CSS 선택자
CSS 선택자
CSS 선택자는 스타일을 설정할 HTML 요소를 '찾기'（또는 선택하기）에 사용됩니다.
CSS 선택자를 다섯 가지로 분류할 수 있습니다：
- 간단한 선택자（이름, id, 클래스에 따라 요소를 선택합니다）
- 조합자 선택자（특정 관계에 따라 요소를 선택합니다）
- pseudo 클래스 선택자（특정 상태에 따라 요소를 선택합니다）
- pseudo 요소 선택자（요소의 일부를 선택하고 스타일을 설정합니다）
- 속성 선택자（속성이나 속성 값에 따라 요소를 선택합니다）
이 페이지는 가장 기본적인 CSS 선택자를 설명합니다.
CSS 요소 선택자
요소 선택자는 요소 이름을 기준으로 HTML 요소를 선택합니다.
실례
이곳에서 페이지上的 모든 <p> 요소가 중앙 정렬되고, 빨간 텍스트 색상을 가집니다:
p {
text-align: center;
color: red;
}
CSS id 선택자
id 선택자는 HTML 요소의 id 속성을 사용하여 특정 요소를 선택합니다.
요소의 id는 페이지에서 독특하므로, id 선택자는 독특한 요소를 선택하는 데 사용됩니다!
특정 id를 가진 요소를 선택하려면, 해당 요소의 id 뒤에 점자표記법（＃）을 작성합니다.
실례
이 CSS 규칙은 id="para1"를 가진 HTML 요소에 적용됩니다:
#para1 {
text-align: center;
color: red;
}
주의:id 이름은 숫자로 시작할 수 없습니다.
CSS 클래스 선택자
클래스 선택자는 특정 클래스 속성을 가진 HTML 요소를 선택합니다.
특정 클래스를 가진 요소를 선택하려면 점（.） 문자를 작성하고, 그 뒤에 클래스 이름을 따릅니다.
실례
이 예제에서는 class="center"을 가진 모든 HTML 요소가 빨간색이고 중앙 정렬됩니다:
.center {
text-align: center;
color: red;
}
특정 HTML 요소만 클래스에 영향을 미치도록 지정할 수 있습니다.
실례
이 예제에서는 class="center"을 가진 <p> 요소만 중앙 정렬됩니다:
p.center {
text-align: center;
color: red;
}
HTML 요소는 여러 개의 클래스를 참조할 수 있습니다.
실례
이 예제에서는 <p> 요소가 class="center" 과 class="large"에 따라 스타일을 설정됩니다:
<p class="center large">이 문단은 두 개의 클래스를 참조합니다.</p>
주의:클래스 이름은 숫자로 시작할 수 없습니다!
CSS 통용 선택자
통용 선택자（*）는 페이지上的 모든 HTML 요소를 선택합니다.
실례
아래 CSS 규칙은 페이지上的 모든 HTML 요소에 영향을 미칩니다:
* {
text-align: center;
color: blue;
}
CSS 그룹 선택자
그룹 선택자는 동일한 스타일 정의를 가진 모든 HTML 요소를 선택합니다.
아래 CSS 코드를 보세요 (h1, h2, p 요소는 동일한 스타일 정의를 가집니다):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
코드를 최대한 줄이기 위해 선택자를 그룹화하는 것이 좋습니다.
선택자를 그룹화하려면 각 선택자를 콤마로 구분합니다.
실례
이 예제에서는 위 코드의 선택자를 그룹화했습니다:
h1, h2, p {
text-align: center;
color: red;
}
모든 간단한 CSS 선택자
| 선택자 | 예제 | 예제 설명 |
|---|---|---|
| .class | .intro | 모든 class="intro" 요소를 선택합니다. |
| #id | #firstname | id="firstname"인 요소를 선택합니다. |
| * | * | 모든 요소를 선택합니다. |
| element | p | 모든 <p> 요소를 선택합니다. |
| element,element,.. | div, p | 모든 <div> 요소와 모든 <p> 요소를 선택합니다. |
확장 읽기
독학서:CSS 요소 선택자
독학서:CSS 선택자 그룹
독학서:CSS 클래스 선택자 설명
독학서:CSS ID 선택자 설명
독학서:CSS 속성 선택자 설명
독학서:CSS 자식 선택자
독학서:CSS 자식 요소 선택자
독학서:CSS 상단 형제 선택자
