오늘 멋쟁이사자처럼에서는 주요 CSS Selector들에 대해서 알아보았다.

CSS에서는

• Universal Selector (*)
• Type Selector ([attr="value"])
• Class Selector (.class)
• Id Selecto (#id)

등의 Selector들로 요소를 선택하며, 콤마(,)로 선택자들을 연결하여 일치하는 모든 요소를 선택하는 선택자 목록(Selector list)을 이용해 중복되는 코드를 줄일 수 있다.

오늘의 과제

오늘의 과제에서는 짧은 마크업과 스타일 두 줄이 주어졌다.

<!-- html -->
<ul>
    <li>Apple</li>
    <li class="a">Mango</li>
    <li class="a">Banana</li>
    <li>Melon</li>
    <li>Strawberry</li>
</ul>

/* css */
.a + li { background:red;}
li + li + li { font-size:30px;}

Q. 위의 마크업에서 어떤 li가 빨간 배경을 가지며, 어떤 li의 글자 크기가 변경될까요?

문제를 보고 가장 먼저 눈에 들어온 것은 + 선택자. 오늘 중 강의에서 배우지 않았고, 혼자 CSS를 공부할 때도 한 번도 본적 없던 선택자다. 교수님 이건 시험범위가 아니잖아요 수업이 끝나고도 더 찾아보라는 호준님의 큰 뜻이라고 받아들였다.

이 +는 검색해보니 "인접 형제 결합자"라는 이름을 가지고 있었다. MDN의 CSS 선택자 페이지에서 확인할 수 있다.

인접 형제 결합자 (Adjacent sibling combinator)

"인접 형제 결합자". 즉, 선택자가 아니라 좀더 구체적인 선택을 돕는 결합자의 일종이기에 {첫 번째 요소} + {두 번째 요소} 형태의 구문을 통해 사용할 수 있다.

인접 형제 결합자 +는 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 "두 번째 요소"를 선택합니다. ─ MDN, 인접 형제 결합자

예제를 통해 이해해보자.

h1 + p { color: blue; }

• 첫 번째 요소 = h1
• 두 번째 요소 = p

그러니, "같은 부모태그 아래에 있는 h1과 p 중에서, h1 태그의 바로 뒤에 오는 p 태그를 골라" 글씨를 파란색으로 바꾸라는 뜻이 되겠다.

(🚨주의! h1 태그는 선택되지 않는다.)

우선 1. 첫 번째 요소의 바로 뒤에 오는 두 번째 요소를 찾고, 2. 두 요소가 같은 부모 아래 있는 지 확인하는 절차를 거치면 간단하겠다.

과제 풀이

모르는 문법을 익혔으니, 과제로 돌아가 문제를 풀어 볼까. 다시 한번 CSS를 살펴보자.

.a + li { background:red;}
li + li + li { font-size:30px;}

이제는 선택자를 해석할 수 있다!

1. 첫 번째 라인 - background: red;

.a + li { background:red;}

위 css는 li 요소 중에서 "a"라는 class name을 가진 요소의 바로 뒤에 오는 요소의 배경을 빨간색으로 바꾸라는 뜻.

<ul>
    <li>Apple</li>
    <li class="a">Mango</li>
    <li class="a">Banana</li>
    <li>Melon</li>
    <li>Strawberry</li>
</ul>

여기서 a 클래스를 가진 요소는 3라인과 4라인의 <li> 이므로

1. 3라인 Mango의 바로 뒤에 오는 li인 Banana
2. 4라인 Banana의 바로 뒤에 오는 li인 Melon

두 요소가 빨간색 배경을 가지게 된다.

2. 두 번째 라인 - font-size: 30px

li + li + li { font-size:30px;}

이번엔 결합자가 두 개. 어려울 건 없다!
li 바로 뒤에 오는 li가 있으면, 그 것의 바로 뒤에 오는 li를 찾으면 된다. 그러니까, 형제 요소로 앞에 li 두 개가 오는 li를 선택한 것이다.

<ul>
    <li>Apple</li>
    <li class="a">Mango</li>
    <li class="a">Banana</li>
    <li>Melon</li>
    <li>Strawberry</li>
</ul>

여기서 형제 요소로 두 개의 li를 가진 li를 찾자.

각각 첫 번째, 두 번째 li인 Apple과 Mango는 탈락이고, 그 아래에 있는 Banana, Melon, Strawberry는 모두 바로 앞에 li 두 개가 있으므로 font-size: 30px이 적용될 것이다.

정답 확인

Q. 위의 마크업에서 어떤 li가 빨간 배경을 가지며, 어떤 li의 글자 크기가 변경될까요?

문제에 대한 내 답은 아래와 같다.

• 빨간 배경 : Banana, Melon
• 글자 크기가 변경 : Banana, Melon, Strawberry

답이 맞는지 확인해보자!