[CSS3] CSS Selector - Advanced 및 Review

CSS를 작성할 때 동시에 여러 CSS Selector를 적용하는 것이 가능하다. 이는 단순히 여러 Selector를 연달아 쓰는 것인데, 예를 들어 special 이란 클래스를 가진 <h1> 태그를 다음과 같이 선택할 수 있다.

h1.special {

}

위 코드는 <h1> 태그들 중에서 special 이란 클래스를 가진 요소를 선택해낸다. 만약 special 클래스를 가진 <p> 태그가 존재한다 해도 영향을 받지 않는다.

 

 

 

Nested Elements

 

여러 Selector를 chaining 하기 위해 CSS는 nested(중첩된) 요소를 선택하는 것을 도와준다. 예를들어, 다음과 같은 HTML이 있다고 하자.

<ul class='main-list'>
  <li> 먹고 </li>
  <li> 자고 </li>
  <li> 코딩하고 </li>
</ul>

<ul> 태그 안에 있는 <li> 태그들을 선택하기 위해서 다음과 같이 CSS를 작성할 수 있다.

.main-list li {

}

위 예제에서 .main-list Selector는 <ul> 태그를 선택하고, 공백 다음에 주어진 li Selector는 <ul> 태그 안에 있는 <li> 태그들을 선택하게 된다. 두 Selector 사이에 공백이 주어져야 함을 유의하자. 이렇게 요소를 선택하는 방법은 더 복잡한 콘텍스트 안의 요소들도 쉽게 식별해 낼 수 있게 해 준다. 

 

 

 

Chaining and Specificity

 

이미 이 글을 보면서 눈치 챈 사람도 있겠지만, Selector를 chaining 하는 것은 Specificity를 높여주는 역할을 한다. 하나의 태그보다는 클래스 또는 id와 함께 선택하는 것이 결과적으로 CSS Selector에 Specificity를 부여하는 것이다.  다음 예제를 보자.

p {
  color: blue;
}

.main p {
  color: red;
}

두 CSS 코드는 <p> 태그가 어떻게 스타일 될지 명시하고 있다. ".main p" Selector가 class와 p 태그를 보유하고 있기 때문에, <p> 태그 중에서 오직 main 클래스를 보유한 것 만이 빨간색을 띠게 된다. 

 

 

 

!Important

 

저번 게시글에서 id style을 override 하는 방법은 또 다른 id style을 적용하는 것 이라고 했는데 사실은 더 높은 specificity를 가진 것이 존재한다. 바로 !important 키워드다. !important는 모든 rule보다 specific 하기 때문에 다른 어떤 style도 override 할 수 있다. 다른 말로 하면, 거의 사용하지 않는다. 일단 !important가 사용되면 나중에 override 하기 무척 힘든 상황이 나타날 수 있다. !important 는 다음과 같이 사용할 수 있다.

p {
  color: blue !important;
}

.main p {
  color: red;
}

원래 ".main p" Selector의 specificity가 더 높았지만, 상황이 달라졌다. p Selector에 !important가 붙은 이상 모든 <p> 태그는 파란색이 될 수밖에 없다.

 

!important 키워드는 Specificity를 뒤죽박죽으로 만들어 버리는 것 같아서 왠지 기피하고 싶다. 그런데 !important가 유용하게 쓰일 때도 있는데, 스타일 되는 요소가 항상 동등한 모습을 유지해야 할 때이다. 하지만 실제론 거의 접하기 힘들다. 프로젝트가 커져가면서 100% 동일한 모습을 유지할 수 있으리라 보장하기 어렵기 때문이다. 즉, 가장 좋은 방법은 !important 키워드를 되도록 쓰지 않는 것이다. !important를 사용하지 않고도 유연한 CSS 코드를 작성할 수 있기 때문이다. CSS 코드에 유연성을 더할수록 유지 보수가 쉬워지며 발생하는 문제들에 대해서도 쉽게 대처할 수 있다.

 

 

 

Multiple Selectors

 

CSS 코드를 간결하게 작성하기 위해 CSS 스타일을 여러 Selector에 거쳐 한 번에 작성하는 것이 가능하다. 예를들어, 다음 코드는 중복되는 부분이 있다.

h1 {
  font-family: Georgia;
}

.menu {
  font-family: Georgia;
}

"font-family: Georgia" 를 두 번 쓰는 것보다는 다음과 같이 Selector를 comma( , )로 구분하여 적용할 수 있다.

h1, .menu {
  font-family: Georgia;
}

CSS Selector를 comma로 구분함으로써 code duplicate를 피할 수 있다.

 

 

 

Review CSS Selectors

 

지금까지 어떻게 HTML 요소를 CSS Selector로 선택하여 스타일을 적용하는지에 대해서 살펴보았다. 지금까지 배운 것들은 정리하자면 다음과 같다:

 

1. CSS는 HTML의 모습을 바꿀 수 있다. 그러기 위해선, CSS 는 HTML 요소를 선택해야 하고, 스타일을 적용시켜야 한다.

 

2. CSS는 HTML 요소를 tag, class 또는 id 로 선택할 수 있다.

 

3. 한 HTML 요소에 여러 class 가 적용될 수 있다.

 

4. Class는 재사용 가능한 반면, id는 오직 하나의 요소에만 사용된다

 

5. Tag보다 class가, class보다 id가 더 specific 하다. 즉, id는 다른 class style 들을 override 하며, class style들은 tag style을 override 한다.

 

6. 한 요소를 선택하는데 여러 Selector 들이 chaining 될 수 있고, 이는 specificity를 높여주는 역할을 한다.

 

7. Nested element들을 접근하기 위해선 Selector 들을 공백으로 구분한다.

 

8. !important 키워드는 모든 style을 override 하여 나중에 수정이 어렵기 때문에 잘 사용되지 않는다.

 

9. 여러 Selector 들이 같은 style을 만들 땐 comma로 구분함으로써 코드를 간결하게 만들자.

 

 

지금까지 CSS의 기본적인 내용에 대해 알아보았다. 이 지식들을 활용하여 독자들이 자기만의 웹 사이트를 이쁘게 꾸밀 수 있기를 바란다. 다음 게시글에선 스타일과 직접적으로 관련된 CSS의 Visual Rule에 대해서 공부해보도록 하자.