고급 - 그룹선택자(Grouping selectors)와 집합선택자(Nesting selectors)

 

그룹 선택자 (Grouping)

 

그룹 선택자는 여러 태그에 같은 스타일을 지정할 때 사용하는 방법입니다. 각 엘레멘트를 콤머(,)로 구분하여, 여러 개의 엘레멘트를 열거합니다. 이 때 그룹으로 작성된 엘레멘트는 모두 같은 스타일이 적용됩니다.

 

 

위와 같이 작성하면 h1, h2, h3 엘레멘트에 같은 스타일이 적용됩니다.

 

 

 

 

 

집합 선택자(Nesting)

집합 선택자는 HTML 문서의 특성인 집합화를 사용해 스타일을 구조적 방법으로 지정합니다. 집합 선택자를 사용하면 지정한 선택자 하위에 있는 엘레멘트에 스타일을 지정할 수 있습니다.  집합 선택자는 선택자 사이를 공백(space)으로 구분하고, 포함하는 엘레멘트를 앞에 작성하는 방법입니다.  

 

이렇게 집합 선택자를 사용하면 HTML 문서내에서 class나 id 사용을 줄이는데 도움이 되며 문서의 구조화와 스타일의 구조화를 동시에 추구할 수 있습니다.

 

 

위 예에서 보면 p 엘레멘트에 스타일을 지정했다. 그후 marked 클래스 안에 있는 p 엘레멘트의 스타일을 세부적으로 지정한 것을 확인할 수 있다.

 

 

 

 

 

 

※ 그룹 선택자와 집합 선택자를 사용할 시 주의할 점
 
그룹화는 각각의 태그 엘레멘트에 같은 스타일을 지정할 때 사용하고, 집합화는 특정 엘레멘트 안에 있는 엘레멘트의 스타일을 지정할 때 사용된다. 이 때 그룹화와 집합화를 사용할 때는 선택자를 정확히 이해해야 한다.

 

<div class="a">
    <h1>제목</h1>
    <span>내용</span>
</div>

 

위와 같은 HTML 문서가 있을 때, h1 엘레멘트와 span 엘레멘트에 같은 스타일을 지정하기 위해 아래와 같이 스타일을 작성했다면

 

.a h1, span { font-size:20pt; }

 

h1엘레멘트는 스타일 적용되지만 span엘레멘트는 스타일이 적용되지 않는다. 왜냐하면 a 클래스 아래의 h1 엘레멘트와 그냥 span 엘레멘트에 스타일을 지정한 것이기 때문이다.  h1과 spane에 같은 스타일을 지정해야 할 경우 아래와 같이 작성해야 한다.

 

.a h1, .a span { font-size:20pt; }

 

위와 같이 집합화와 그룹화를 동시에 사용할 때는 선택자를 정확하게 기술해야 스타일이 제대로 적용된다.