스타일 속성을 적용하는 요소를 '선택자(selector)'라고 부릅니다. 이번에는 아이디 선택자와 클래스 선택자에 대해서 살펴보겠습니다.
목차
아이디 선택자 (ID Selector)
아이디 선택자는 특정 값을 id 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다.
속성값 앞에 #을 붙여 아이디임을 나타냅니다.
예를 들어
#abc {
color: blue;
}
는 id 속성값으로 abc를 갖는 요소를 파란색으로 만듭니다.
클래스 선택자 (Class Selector)
클래스 선택자는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다.
속성값 앞에 .을 붙여 클래스임을 나타냅니다.
예를 들어
.abc
는 class 속성값으로 abc를 갖는 요소를 선택합니다.
클래스 선택자 앞에 아무 것도 없으면
클래스 선택자 앞에 아무 것도 없으면 그 값을 갖는 모든 요소를 선택합니다.
즉 .abc 는
<h1 class="abc">Lorem</h1>
<p class="abc">Lorem</p>
모두 선택합니다.
클래스 선택자 앞에 무언가 있으면
클래스 선택자 앞에 무언가 있으면 모두 만족하는 요소를 선택합니다.
p.abc 는 class 값으로 abc를 갖는 p 요소를 선택합니다.
<h1 class="abc">Lorem</h1>
<h1>은 선택되지 않고,
<p class="abc">Lorem</p>
<p>는 선택됩니다.
클래스 속성의 값이 여러 개이면
- class 속성은 여러 개의 값을 가질 수 있습니다.
- 이 경우 CSS에 정의된 순서대로 적용됩니다. 마지막에 정의된 속성이 최종적으로 요소에 적용됩니다.
- 예를 들어 다음의 두 문단은 모두 주황색으로 나옵니다. CSS에서 .abc를 먼저 .xyz를 나중에 정의했기 때문입니다.
<p class="abc xyz">Lorem Ipsum Dolor.</p>
<p class="xyz abc">Lorem Ipsum Dolor.</p>
.abc {
color: green;
}
.xyz {
color: orange;
}
아이디 선택자와 클래스 선택자의 차이점
아이디 선택자와 클래스 선택자의 가장 큰 차이는 클래스 선택자가 문서 안에서
여러번 적용할 수 있는 스타일인 반면, 아이디 선택자는 문서 안에서 한 번만
적용할수 있다는 것입니다.
아이디 선택자는 중복해서 사용할 수 없기 때문에 주로 문서의 레이아웃과 관련된
스타일을 지정하거나 자바스크립트 프로그램에서 웹 요소를 구별하기 위해 자주
사용합니다.
CSS 선택자 유형
전체 선택자, 타입 선택자, 속성 선택자 하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자