그룹 선택자는 하나의 선언블럭으로 여러개의 선택자을 한꺼번에 지정하는 방법입니다.
가령 10명의 친구들이 있다고 하겠습니다. 그 중에서 길동이와 꺽정이에게만 사과를 주고 싶습니다. "얘들아 사과 먹어" 라고 하면 10명이 다 먹겠다고 올 것입니다. "길동아, 꺽정아 사과 먹어"라고 얘기 할 것입니다. 그래야 길동이와 꺽정이만 사과를 먹으로 올 것입니다.
css로 대입해 생각해 보면 2개의 요소(길동, 꺽정)을 선택자로 생각할 수 있습니다. 그리고 "사과 먹어"는 선언으로 생각할 수 있습니다. 즉 2가지 이상의 선택자가 같은 속성을 가지기 때문입니다.
<body>
<h1>이문열 삼국지</h1>
<h2>책 소개</h2>
<p>젊은 세대를 위해 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』</p>
<section id="book1">
<h1>1권 도원(桃園)에 피는 의(義)</h1>
<ul>
<li>서사(序辭)</li>
<li>창천(蒼天)에 비끼는 노을</li>
<li>누운 용 엎드린 범</li>
<li>영웅, 여기도 있다</li>
</ul>
</section>
<section id="book2">
<h1>2권 구름처럼 이는 영웅</h1>
<ul>
<li>가자, 낙양으로</li>
<li>데운 술이 식기 전에</li>
<li>낙양에는 이르렀건만</li>
<li>어제의 동지, 오늘의 적</li>
</ul>
</section>
<section id="book3">
<h1>3권 헝클어진 천하</h1>
<ul>
<li>안겨오는 천하</li>
<li>풍운은 다시 서주로</li>
<li>우리를 벗어나는 호랑이</li>
<li>다져지는 또 하나의 기업</li>
</ul>
</section>
</body>이번에는 class가 아닌 id를 사용하여 3가지 section을 나누었습니다. 각각 id를 book1, book2, book3 입니다.
book2, book3 에만 글자를 두껍게 하고 싶다면
@charset "utf-8";
/* CSS Document */
#book2{ color:green; }
#book2{ color:blue; }
#book3{ color:red; }
#book2, #book3
{ font-weight:bold; }8번 줄과 같이 선택자를 쉼표(,)로 구분하고 작성하시면 됩니다.
결과 해당 요소의 글자가 두꺼워 진 것이 확인 됩니다.
첫번째 section에서는 두꺼운 글자가 적용되지 않았습니다. 만약 첫번째 section 에도 두꺼운 글씨로 하고 싶다면
css에서 쉼표로 구분하고 id를 하나더 작성해 주면 됩니다.
물론 순서는 상관없습니다. #book1, #book2, #boo3으로 작성하셔도 전혀 문제없습니다.
하지만 여기서 간혹하는 실수가 있습니다. 마지막 선택자뒤에도 쉼표를 붙이는 실수입니다. 그 경우에는 에러가 발생됩니다. 쉼표는 구분자이기 때문에 쉼표를 하게되면 쉼표뒤에 다른 선택자가 또 올 것이다라고 웹브라우저가 인식합니다. 그런데 아무것도 오지 않으면 선택자가 완전히 만들어 진것이 아니라고 인식하기 때문에 나오는 오류입니다. 그래서 마지막 선택자뒤에는 쉼표가 있으면 안됩니다. 꼭 기억하시기 바랍니다.
자 일단 그룹 선택자 사용법은 어렵지 않게 설명드린 것 같습니다. 그런데 지금까지 사용한 방식하고는 좀 다릅니다. 지금 까지는 클래스를 이용하는 방법에 대해 알려 드렸습니다. 클래스를 이용 한다면 css에서 글자를 두껍에 하는 하나의 클래스를 만들고 html 문서에서 두번째, 세번째 section에 클래스 속성을 적용하면 위와 같은 효과를 보실 수 있습니다.
2가지 방법은 서로의 장단점이 있습니다. 그룹선택자를 사용할 경우 html 문서에는 따로 작업할 필요가 없습니다. css에서만 처리하면 됩니다. html 문서는 확인만 하면 됩니다. 그런데 만약 두가지 선택자를 그룹으로 하는 것이 아니라 100가지라면 어떨가요? 100가지를 css에서 선택자로 입력하는 것 자체가 어려울 것입니다.
친구들중 길동과 꺽정에게 사과를 주는 것이 아니라 10명 모두에게 주는 것이라면 "길동아, 꺽정아, 순이야, 철이야,.... 사과 먹어"는 너무 비효율적입니다. "얘들아 사과먹어"가 효과적이지요
그럼 클래스를 이용하는 경우를 생각해 보겠습니다. 이 경우에는 css와 html 모두를 수정해 주어햐 합니다. 가령 두꺼운 글씨체를 선언하기 위해서는 css에서 .txt-weight{ font-weight:bold; } 라고 선언했다면, html 에서는 해당하는 section 요소를 찾아서 class="txt-weight" 를 작성해 줘야 합니다. 일면 더 복잡해 보이지만 html에서 작성하는 코드는 class="txt-weight"로 동일하기 때문에 한번에 복사와 여러번의 붙여넣기로 끝나는 것입니다. 그리고 또다른 장점도 생기게 됩니다. 글자를 두껍게 하는 클래스를 css에서 만들었기 때문에 이제 부터는 html 문서의 다른 요소에도 class="txt-weight" 사용이 가능하게 되는 것이죠. 사실은 이 효과가 클래스를 사용하는 주요 이유입니다. 바로 10명의 친구들을 "예들아"로 묶어버리게 된는 것입니다.
이것으로 css 선택자를 마치겠습니다. 다음 강좌부터는 선언블럭의 실질적인 속성과 값에 대해 진행하려 합니다. 사실 순서상으로 보면 "가상(의사)클래스(pseudo-class)"를 선택자에서 다루는 것이 맞겠지만 살짝 복잡한 부분이 있어서 먼저 css 선언블럭의 속성과 값에 대한 기본적인 강좌를 진행한 후 다루는 것이 이해하시는데 도움이 될 것 같습니다.
'강좌 및 설정 > CSS 기본 강좌' 카테고리의 다른 글
| 가시 속성 첫번째 (display 속성) (0) | 2022.12.30 |
|---|---|
| CSS 선택자 세번째 (결합자) (0) | 2022.12.08 |
| CSS 선택자 두번째 (class 다중 적용) (0) | 2022.12.07 |
| CSS 선택자 첫번째 (기본 선택자와 우선순위) (0) | 2022.12.04 |
| CSS 적용 방식 (0) | 2022.12.01 |