강좌 및 설정/CSS 기본 강좌

CSS 선택자 세번째 (결합자)

웹 개발자의 비상 2022. 12. 8. 09:27

이번 강좌에서는  자식, 자손, 형제 요소란 말이 계속 나오게 됩니다. 만약 용어가 어렵게 생각되신다면 html 기본강좌에서

부모요소, 자식요소, 형제요소, 조상요소, 자손요소 그리고 상속 강좌를 꼭 읽어보시뒤에 진행하시길 바랍니다.

 

지금까지의 선택자만을 가지고도 다소 불편함은 있게지만 html 요소의 선택은 어느정도 가능합니다. 대신 css에서 선언해야 하는 코드가 많이 길어지고 html 문서에서는 id나 class 마크업이 엄청나게 늘어날 것입니다. css 결합자는 그런 코딩의 양을 획기적으로 줄이고 html 문서는 단순화 할 수 있으며 css의 선택자를 시각적으로도 명확하게 만들수 있게 합니다.

 

결합이라는 말이 두가지 이상을 합치다라는 의미가 있습니다. 즉 결합자란 최소한 두가지의 선택자가 필요하게 되구요 먼저 나오는 선택자를 기준으로 나중에 나오는 선택자중 어떤 선택자를 선택할지를 결정하는 방법입니다.

 

종류 css 형태 설명
자손(하위) 결합자   div p, p .txt-white
빈값이 아니라 공백문자입니다.
첫번째 선택자의 자식과 자손요소 중 두번째 선택자를 가진 모든 요소를 선택합니다.
자식 결합자 > div>p, p>.txt-white
첫번째 선택자의 자식요소 중 두번째 선택자를 가진 모든 요소를 선택합니다.
일반 형제 결합자 ~ div~p, p~.txt-white
첫번째 선택자 이후에 나오는 형제요소 중 두번째 선택자를 가진 모든 요소를 선택합니다.
인접 형제 결합자 + div+p, p+.txt-white
첫번째 선택자 이후 바로 뒤에 나오는 두번째 선택자를 가진 요소만을 선택합니다.

 

1. 자손(하위) 결합자

이전 css 다중 적용 강좌에서 여러개의 클래스가 적용된 html 요소를 선택할 때 공백을 넣으면 안되다고 알려드렸습니다. 바로 공백문자(space bar)를 넣게 되면 바로 자손(하위) 결합자를 사용한 것이 되기 때문입니다.

이전 강좌 마지막에 적용한 css를 보게되면

.bg-green.txt-white.txt-2em{ font-weight: bold; } 입니다. 여기서 공백을 넣어

.bg-green .txt-white .txt-2em{ font-weight: bold; } 로 작성한다면

이 의미는 bg-green 클래스를 가진 요소의 자식요소 중 txt-white 클래스를 가진 자식요소를 찾은 뒤 그 요소의 자식요소 중에 다시 txt-2em 클래스를 가진 요소를 선택하라라는 것이 됩니다.

그래서 bg-green클래스와 txt-white 클래스 txt-2em 클래스를 모두 가진 요소를 찾는 것이라면 반드시 공백없이 모두 붙여서 .bg-green.txt-white.txt-2em로 작성해야 되는 것입니다.

<body>
    <h1>이문열 삼국지</h1>
    <h2>책 소개</h2>
    <p>젊은 세대를 위해 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』</p>
    <p class="bg-green">젊은 세대를 위해 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』</p>
    <p class="bg-green txt-white">젊은 세대를 위해 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』</p>
    <p class="bg-green txt-white txt-2em">젊은 세대를 위해 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』</p>
    <section class="bg-green">
        <h1>1권 도원(桃園)에 피는 의(義)</h1>
        <ul class="txt-white">
            <li>서사(序辭)</li>
            <li class="txt-2em">창천(蒼天)에 비끼는 노을</li>
            <li>누운 용 엎드린 범</li>
            <li>영웅, 여기도 있다</li>
        </ul>
    </section>
    <section>
        <h1>2권 구름처럼 이는 영웅</h1>
        <ul>
            <li>가자, 낙양으로</li>
            <li>데운 술이 식기 전에</li>
            <li>낙양에는 이르렀건만</li>
            <li>어제의 동지, 오늘의 적</li>
        </ul>
    </section>
</body>

이전 html 문서에 2가지 section 요소를 추가 했습니다. 1권과 2권의 제목과 목차 4가지를 소개하는 것입니다.

그리고 css에 위의 자손(하위) 결합자를 이용해 다음과 같이 한줄 더 작성했습니다.

@charset "utf-8";
/* CSS Document */

.bg-green { background-color: green; }
.txt-white { color: white; }
.txt-2em { font-size: 2em; color:yellow }

.bg-green.txt-white.txt-2em{ font-weight: bold; }
.bg-green .txt-white .txt-2em{ font-size:1em; }

마지막 줄을 확인해 주세요 공백문자를 결합자로 bg-green 클래스를 가진 요소의 자식요소 중 txt-white 클래스를 가진 자식요소를 찾은 뒤 그 요소의 자식요소 중에 다시 txt-2em 클래스를 가진 요소를 선택하는 방법입니다.

그 윗줄은 bg-green클래스와 txt-white 클래스 txt-2em 클래스를 모두 가진 요소를 선택한 것이구요

html 파일의 요소중 첫번째 section 요소에 bg-green 클래스를 가지고 있습니다. 두번째 section 요소는 없습니다.

그러니 첫번째 요소에만 배경색이 초록으로 바뀌었습니다. 그리고 자식 요소 중 ul 요소에 txt-white가 적용 되었으니 글자색은 글자색은 흰색으로 바뀌었습니다. 그리고 ul의 자식 요소 중 2번째 li 요소에 txt-2em이 적용되었으니 글자색은 노락색으로 바뀌었습니다. 그리고 css에서 결합자를 사용한 마지막 줄이 없었다면 글자는 두배 크기가 되어야 합니다.

하지만 css 마지막 줄에서 글자크기를 다시 정했기 때문에 다시 원래 크기인 1em으로 돌아 온 것이 됩니다.

 

2. 자식 결합자

자식 결합자와 자손(하위) 결합자의 가장 큰 차이점은 명칭처럼 자식과 자손의 차이 입니다. 자손(하위) 결합자가 먼저 선언된 선택자의 자식과 자손 즉 모든 요소 중에 최종 선언된 요소 모두를 선택하는 것이라면 자식 결합자의 경우는 먼저 선언된 선택자의 자식요소중 최종 선언된 요소만를 선택하는 것입니다. 

<body>
    <h1>이문열 삼국지</h1>
    <h2>책 소개</h2>
    <div>
        <span>젊은 세대를 위해</span> 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』
        <p>1988년 출간된 이래 누적판매 2,000만 부라는 대기록을 세운 <span>『이문열 삼국지』</span>가 출간 30여 년 만에 새롭게 출간된다.</p>
    </div>
</body>

위의 html 문서를 보시면 div요소는 span 요소를 자식요소와 자손요소 에 모두 가지고 있습니다. 이경우 css에서 div 요소의 모든 span 요소를 선택하고 싶다면 div span 으로 선택자를 정하면 됩니다. 자손(하위) 요소를 사용하는 것입니다.

하지만 자손까지 적용하지 않고 싶다면 div>span 으로 자식 결합자를 사용하해야 됩니다.

@charset "utf-8";
/* CSS Document */

div span{ color: red; }
div>span{ font-weight: bold; font-size: 1.2em; }

위의 css 4번 줄에서 자손(하위) 결합자를 이용했기 때문에 div 요소의 모든 span 요소는 붉은색이 되었습니다. 그리고 5번줄에서 자식결합자를 이용하였으므로 div 자식요소중 span 요소만이 두꺼운 글씨에 글자크기가 1.2배가 된 것입니다.

 

3. 일반 형제 결합자

상속의 개념을 이해 하셨다면 자손과 자식의 결합자가 있으니 형제요소의 결합자도 있을 것이라 유추할 수 있습니다. 같은 부모요소를 가지고 있는 다른 요소들을 선택자 하는 것이 되겠죠

<body>
    <h1>이문열 삼국지</h1>
    <h2>책 소개</h2>
    <div>
        <span>젊은 세대를 위해</span> 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』
        <p>1988년 출간된 이래 누적판매 2,000만 부라는 대기록을 세운 <span>『이문열 삼국지』</span>가 출간 30여 년 만에 새롭게 출간된다.</p>
        <a href="http://www.yes24.com/Product/Goods/89987444" target="_blank">1권 도원(桃園)에 피는 의(義)</a><br>
        <a href="http://www.yes24.com/Product/Goods/89987445" target="_blank">2권 구름처럼 이는 영웅</a><br>
        <a href="http://www.yes24.com/Product/Goods/89987446" target="_blank">3권 헝클어진 천하</a>
    </div>
</body>

위의 html 문서를 보시면 이전 소스 하단에 1권, 2권, 3권을 링크하는 a 태그를 넣었습니다. p 요소와 형제 요소로 span 태그와 a 태그가 있습니다.

@charset "utf-8";
/* CSS Document */

div span{ color: red; }
div>span{ font-weight: bold; font-size: 1.2em; }

p~a{ color:blue; }

css 마지막 줄을 확인 해주세요. 이렇게 일반 형제 결합자 ~를 사용하면

먼저 선언된 요소(위에서는 p) 다음에 나오는 형제 요소 중 나중에 선언된 요소(위에서는 a)만을 선택하게 됩니다.

위 처럼 p 요소 다음의 a 요소 모두에 글자색이 파란색을 바뀐것을 확인 하실 수 있습니다.

여기서 반드시 알아야 할 사항이 있는습니다. p의 형제 요소중 a 요소만이 아니라 p 요소 다음에 나오는 형제 요소 중 a 요소라는 것입니다. 위의 경우는 html 문서에서 p요소 이전 형제 요소중 a 태그 요소는 없습니다. span 요소만 있네요. 하지만 만약 a 요소가 있었다면 어떻게 되었을까요? 있다고 하더라도 전혀 변화가 없을 것입니다. 기준이 되는 먼저나온 p 요소의 이전 형제요소는 전혀 관여하지 않기 때문입니다. p 다음 요소 중 a 형제 요소를 선택한 것이니까요

 

4. 인접 형제 결합자

일반 형제 결합자를 이해 하셨다면 인접 형제 결합자는 더 간단합니다. 일반 형제 결합자가 먼저 선언된 선택자 다음에 나오는 모든 최종 선택자를 선택한다면 인접 형제 결합자는 그 중에 가장 처음 나온 것만을 선택합니다.

이해를 위해 css에 다시 한줄 추가해 보겠습니다.

@charset "utf-8";
/* CSS Document */

div span{ color: red; }
div>span{ font-weight: bold; font-size: 1.2em; }

p~a{ color:blue; }
p+a{ background: black; }

위의 css 마지막 줄을 확인해 주세요 인접 형제 결합자를 사용 했구요 배경색을 검정 색으로 했습니다.

결과 p~a는 p 요소 다음에 나오는 형제 요소중 a 요소 모두에 글자색을 파란색으로 변경 했지만

p+a는 p 요소 다음에 나오는 처음 형제요소 a 만 배경색을 바꾸었습니다.

그런데 살짝 인접이라는 말이 걸리네요 인접이라는 것은 바로 붙어 있다라는 뜻입니다. 그렇다면 떨어져있다면 어떻게 될까요? p 요소와 a 요소 사이에 하나의 요소를 추가해 보겠습니다.

<body>
    <h1>이문열 삼국지</h1>
    <h2>책 소개</h2>
    <div>
        <span>젊은 세대를 위해</span> 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』
        <p>1988년 출간된 이래 누적판매 2,000만 부라는 대기록을 세운 <span>『이문열 삼국지』</span>가 출간 30여 년 만에 새롭게 출간된다.</p>
        <hr>
        <a href="http://www.yes24.com/Product/Goods/89987444" target="_blank">1권 도원(桃園)에 피는 의(義)</a><br>
        <a href="http://www.yes24.com/Product/Goods/89987445" target="_blank">2권 구름처럼 이는 영웅</a><br>
        <a href="http://www.yes24.com/Product/Goods/89987446" target="_blank">3권 헝클어진 천하</a>
    </div>
</body>

p 요소와 a 요소 사이에 hr 태그를 넣어서 선을 하나 추가했습니다.

결과를 보면 p~a 선언은 적용되고 p+a 선언은 적용되지 않았습니다. 왜 일까요?

바로 인접이 아니기 때문입니다. 즉 인접 형제 결합자의 경우는 바로 붙어서 나오는 형제 요소에만 적용이 됩니다. hr 요소가 없었을 경우는 a 요소가 바로 붙어서 즉 인접해 있어서 적용이 되었지만 hr이 들어가는 순간 a는 인접이 아닌게 되버린 것입니다. 그럼 이전 처럼 a 첫번째 요소 배경색을 바꾸려면 어떻게 해야 할까요?

그렇습니다. p+a를 hr+a로 바꾸어야 되는 것입니다.

728x90

'강좌 및 설정 > CSS 기본 강좌' 카테고리의 다른 글

가시 속성 첫번째 (display 속성)  (0) 2022.12.30
CSS 선택자 네번째 (그룹 선택자)  (1) 2022.12.09
CSS 선택자 두번째 (class 다중 적용)  (0) 2022.12.07
CSS 선택자 첫번째 (기본 선택자와 우선순위)  (0) 2022.12.04
CSS 적용 방식  (0) 2022.12.01

'강좌 및 설정/CSS 기본 강좌'의 다른글

  • 현재글CSS 선택자 세번째 (결합자)

관련글

댓글

티스토리툴바