[CSS] 선택자의 기본

선택자의 개념

---

특정 스타일이 적용되는 위치

 

 

 

선택자의 사용방법

---

선택자는 선택자 { } 형태로 사용합니다. 괄호 앞에 선택자를 작성하시고 괄호 안에 css 코드를 자유롭게 작성하시면 됩니다. 아래 코드에서는 *과 h1이 선택자입니다. 

* {
	/* css 코드 */
}

h1{
	/* css 코드 */
}

 

 

선택자의 종류

---

1. 전체 선택자 - *

---

전체 선택자는 css 파일이 적용된 html 파일의 모든 부분에 스타일을 적용할 때 사용합니다. 전체 선택자는 * 기호로 표시하므로 '* { }' 형태로 사용하면 됩니다.

 

*{
    /*css 코드 */
}

 

 

2. 태그 선택자

---

태그 선택자는 html 파일의 특정 태그에 스타일을 적용할 때 사용합니다. 태그 선택자를 사용하면 해당 태그를 사용하는 모든 영역에 일괄적으로 스타일이 적용됩니다. 예를들어, 제목 텍스트 태그 <h1>의 스타일을 css를 사용해 새로 지정한다면 <h1>태그를 사용하는 모든 영역이 수정된 스타일로 변경됩니다. 태그 선택자는 '태그 이름 { }' 형태로 사용하면 됩니다.

 

h1{
    /*css 코드 */
}

h2{
    /*css 코드 */
}

 

 

3. 클래스 선택자

---

클래스 선택자는 html 파일의 특정 클래스에만 스타일을 적용할 때 사용합니다. 클래스 선택자를 사용하면 특정 클래스 영역에만 스타일이 적용됩니다. 클래스 선택자는 '.클래스 이름 { }' 형태로 사용하면 됩니다.

 

.class1{
    /*css 코드 */
}

.class2{
    /*css 코드 */
}

 

 

4. id 선택자

---

id 선택자는 html 파일의 특정 id에만 스타일을 적용할 때 사용합니다. id 선택자를 사용하면 특정 id 영역에만 스타일이 적용됩니다. id 선택자는 '#id 이름 { }' 형태로 사용하면 됩니다.

 

#id1{
    /*css 코드 */
}

#id2{
    /*css 코드 */
}

 

5. 그룹 선택자

---

그룹 선택자는 다수의 영역에 동일한 스타일을 적용할 때 사용합니다. 동일한 스타일이 적용되는 선택자들을 나열한 후 괄호 안에 css 코드를 작성하시면 됩니다. 각 선택자들의 구분은 반점(,)으로 하시면 됩니다. '선택자1, 선택자2, 선택자3 { }' 형태입니다.

 

h1, h2, h3 {
    /*css 코드 */
}