[CSS3] CSS Selector 개요

CSS는 HTML요소를 태그 이름으로 선택할 수 있다. parapraph 요소 <p> 태그를 선택하는 CSS 문법은 다음과 같다.

p {

}

위 코드는 모든 <p> 태그를 선택한다. 여기서 p는 CSS Selector가 된다. CSS Selector가 스타일을 적용할 HTML 태그의 이름과 매치된다. 선택된 요소를 스타일링하는 모든 코드들은 { }(curly brace) 사이에 들어간다. 

 

 

 

Class name

 

CSS는 단지 태그 이름으로만 HTML 요소를 선택할 수 있는 건 아니다. HTML의 요소들은 여러 속성들을 가지는데, 가장 흔한 속성인 class도 selector가 될 수 있다. 다음 예시를 보자.

<p class="brand">North face</p>

이 paragraph는 "brand"라는 클래스를 가진다. 이 클래스를 선택하는 selector는 다음과 같다.

.brand {

}

HTML요소를 class로 선택하기 위해선 반드시 클래스 이름앞에 period( . )가 붙어야 한다. 위의 예제에서 클래스 이름이 brand 이므로 CSS selector는 .brand가 된다.

 

 

 

Multiple Classes

 

class도 CSS selector가 될 수 있단걸 위의 예에서 확인했다. 그런데, 모든 HTML요소가 한 가지 클래스만 가질 수 있는 것은 아니다. 다음과 같이 여러 개의 클래스를 보유할 수 있다.

<h1 class="green bold"> 나는 초록색인 동시에 굵은 글씨이고 싶어 </h1>

한 가지 요소에 여러 class를 추가해줄때 이름 사이에 공백으로 클래스를 구분 짓는다. 이러한 클래스의 조합은 여러 가지 독특한 스타일링을 만들어내는 기법 중 하나이다.

 

 

 

ID Name

 

만약 HTML 요소가 유니크한 스타일을 가져야 할때 우리는 ID 속성을 부여할 수 있다. 

<h1 id="large-title"> (속보)아주 중요한 제목 </h1>

id 속성 또한 CSS의 Selector가 될 수 있는데, 다음과 같이 hashtag(#)를 앞에 붙인다.

#large-title {

}

 

 

 

Classes and IDs

 

지금까지 CSS는 HTML 요소들을 태그, class, id로 선택할 수 있단 걸 배웠다. Class와 id는 각기 다른 목적을 위해 사용된다. Class는 여러 요소에 걸쳐 재사용하기 위해 사용한다. Class를 사용함으로써 다양한 방법으로 여러 class를 섞어서 HTML 요소를 디자인할 수 있다. 

 

반면에 id는 단 한 가지 요소를 스타일 하기 위해 사용된다. 이때 id는 다른 스타일들을 override 할 수 있는데, id가 class와 태그 스타일을 override 하기 때문에 항상 동일하게 나타나야 하는 요소에 대해서만 사용해야 한다.

 

 

 

Specificity

 

Specificity는 브라우저가 어떤 CSS 스타일을 우선적으로 렌더링 할 것인지에 대한 순서를 나타낸다. CSS를 사용하는 가장 좋은 방법은 낮은 Specificity를 유지하는 것으로, 만약 어떤 요소가 특별한 디자인을 필요로 한다면 쉽게 override 하기 위함이다. 

 

Id는 CSS selector 중 가장 specific 한 것으로, 다음으로 class가, 마지막으로 tag 순으로 specific 하다. 예를 들어 다음과 같은 HTML과 CSS 코드가 있다고 하자.

<h1 class="headline">신문 1면 헤드라인(깜짝 놀랄만한 제목)</h1>

h1 {
  color: red;
}

.headline {
  color: firebrick;
}

위의 예제에서 헤드라인의 색깔은 어떻게 될까? 정답은 firebrick이다. class selector의 specificity가 <h1> 의 그것보다 높기 때문이다. 만약 여기에 id 속성이 더해진다면 다른 스타일을 한번 더 override 할 것이다. 그럼 id를 override 할 순 없을까? Id style을 override 하는 방법은 또 다른 id style을 추가하는 것이다ㅋ.

 

시간이 흘러, 프로젝트가 커지면서 생기는 여러 id들은 CSS 파일을 수정하기 어렵게 만드는데, 수정을 쉽게 하기 위한 최고의 스타일 방법은 가능한 한 tag selector를 이용하여 스타일링하는 것이다. 거기서 필요하다면 class selector를, 거기서 더 필요하다면 id를 사용하는 것을 고려하는 방법이 좋다.

 

 

지금까지 CSS Selector가 무엇이고, 어떻게 사용하는 것인지 그리고 스타일 우선순위(Specificity)에 대해 알아보았다. 다음 게시글에선 Selector를 활용하는 방법, Selector Chain 등 Selector에 대해 더 자세한 내용을 알아보도록 하자.