( ) MCGUFFIN ARCHIVE, CSS 문법 (2) : 선택자의 유형 및 조합, 문서 구조의 이해

선택자는 CSS에서 스타일을 입힐 HTML 등 마크업 언어의 요소를 선택하는 문자를 뜻한다. 대부분의 CSS 코드는 A { (B): (C); } 형태로 이뤄져 있는데, 스타일을 나열한 중괄호 앞 부분에 오는 A 부분이 바로 선택자다. 이번 포스트는 선택자의 유형과 조합에 대해 알아보고, 선택자와 문서의 관계 기준으로 문서 구조를 이해해 본다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

요소 선택자

h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }
h4 { color: yellow; }
h5 { color: yellow; }
h6 { color: yellow; }

선택자 중 가장 기본이 되는 선택자로, 선택자 부분에 태그 이름이 들어가는 점을 따서 태그 선택자라고도 한다. 요소 선택자를 사용하면 문서 내 선택자에 해당하는 모든 요소에 스타일 규칙이 적용된다.

그룹화

h1, h2, h3, h4, h5, h6 { color: yellow; }
* { color: yellow; }

선택자는 기본적으로 쉼표를 이용해서 그룹화할 수 있고, asterisk 기호(*)로 문서 내의 모든 요소를 선택할 수도 있다.

h1 { color: yellow; font-size: 2em; background-color: gray; }
h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }

선택자 뿐 아니라 선언도 그룹화 가능하다. 물론 선택자와 선언을 동시에 그룹화할 수도 있다.

요소 선택자의 한계

아래와 같은 코드가 있다고 가정하자.

<dl>
    <dt>HTML</dt>
    <dd><span>HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt>CSS</dt>
    <dd><span>CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>

당신은 해당 HTML 문서의 "HTML" 부분에는 보라색 글자를 지정하고, "CSS" 부분에는 밑줄을 선언하고 싶다. 하지만 요소 선택자로는 동일한 이름으로 묶여 있는 요소를 각각 선택해서 규칙을 적용하기는 불가능하다. <dt>에 보라색을 지정하면 "CSS"도 보라색으로 변할 것이고, 반대로 <dt>에 밑줄을 그으면 "HTML"에도 동일하게 밑줄이 그어질 것이다. 당신이 원하는 방식대로 문맥마다 스타일을 각각 적용할 방법은 없을까?

class 선택자

.foo { font-size: 30px; }

<p class="foo"> ... </p>

요소에 구애받지 않고 스타일 규칙을 적용시키는 가장 일반적인 방법은 class 선택자를 활용하는 것이다. HTML에서 동일한 스타일을 적용받을 class명을 적어 놓고 CSS에서 적용할 규칙을 써 놓으면 동일한 class명을 가진 모든 요소에 동일한 스타일 규칙이 적용된다. 그럼 class 선택자를 이용해 요소 선택자로 구현해내지 못 했던 부분을 구현해 보자.

.html { color: purple; }
.css { text-decoration: underline; }

<dl>
    <dt class="html">HTML</dt>
    <dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt class="css">CSS</dt>
    <dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>

이때, 한 요소는 class 속성을 동시에 여러 개 가질 수 있다. 공백으로 구분해 여러 개의 class 값을 넣어 주면 된다.

.foo { font-size: 30px; }
.bar { color: blue; }

<p class="foo bar"> ... </p>

위 HTML문의 <p> 안에는 "foo"와 "bar"라는 두 개의 class가 선언돼 있다. CSS문에는 또 foo class가 30px의 폰트 크기를 갖게, bar class는 글자를 파란색으로 적용하도록 설정돼 있다. 위 코드를 실행하면, <p>에 foo, bar 둘 모두의 규칙이 적용되고 있다는 것을 알 수 있다.

id 선택자

#bar { background-color: yellow; }

<p id="bar"> ... </p>

id 선택자는 class 선택자와 거의 유사하다. 다만 .(마침표) 대신 #(해시) 기호를 쓴다는 점과, 요소에 class 속성 대신 id 속성을 사용한다는 점이 다르다. 또, 여러 요소에 중복 선언될 수 있는 class와 다르게 id는 문서 내에서 단 한 번만 쓰일 수 있다.

선택자의 조합

/* 요소와 class의 조합 */
p.bar { ... }

/* 다중 class */
.foo.bar { ... }

/* id와 class의 조합 */
#foo.bar { ... }

위 예제와 같이, 여러 선택자를 조합해 사용할 수도 있다.

속성 선택자

p[class] { color: silver; }
p[class][id] { text-decoration: underline; }

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

속성 선택자는 타 선택자와 달리 대괄호를 이용해 묶고 대괄호 안에 속성 이름이 들어가는 선택자다. 요소에 해당 이름의 속성이 있다면 적용된다.

정확한 속성값으로 선택

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

class, id값 존재 자체로 두루뭉술 묶을 수도 있지만 이처럼 명확한 속성을 지정해 줄 수도 있다. 이처럼 속성 선택자에 속성값까지 지정해 주면 동일한 속성에 동일한 속성값을 가진 부분에만 스타일이 적용된다.

부분 속성값으로 선택

<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

p[class~="color"] { font-style: italic; }
p[class^="color"] { font-style: italic; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { font-style: italic; }

[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택.
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택.
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택.
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택.

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

문서 구조의 이해

<html>
<body>
    <div>
        <h1><span>HTML</span>: Hyper Text Markup Language</h1>
    </div>
    <p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>

선택자와 문서의 관계를 이해하기 위해 먼저 어떻게 문서가 구조화되는지 살펴보자. 이들의 관계는 부모와 자식, 조상과 자손, 그리고 형제 관계로 분류될 수 있다.

부모와 자식 관계

부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 한 요소의 부모 요소는 하나뿐이다. 자식 요소는 부모 요소의 반대라고 생각하면 된다. 다만 한 요소의 부모 요소는 한 개만 존재할 수 있는 반면 한 부모 아래의 자식 요소는 여러 개 존재할 수 있다.

<body>의 부모 요소 : <html> ↔ <html>의 자식 요소 : <body>
<div>의 부모 요소 : <body> ↔ <body>의 자식 요소 : <div>, <p>
<h1>의 부모 요소 : <div> ↔ <div>의 자식 요소 : <h1>
<span>의 부모 요소 : <h1> ↔ <h1>의 자식 요소 : <span>
<p>의 부모 요소 : <body> ↔ <body>의 자식 요소 : <div>, <p>

조상과 자손 관계

조상과 자손의 관계 여러 부모 자식 관계를 포함해 확장한 관계라고 보면 된다. 조상 요소는 한 요소를 포함하는 (부모 요소를 포함한) 모든 요소고, 자손 요소는 반대로 그 요소가 포함하고 있는 모든 요소다.

<body>의 조상 요소 : <html> ↔ <html>의 자손 요소 : <body>, <div>, <h1>, <span>, <p>
<div>의 조상 요소 : <html>, <body> ↔ <body>의 자손 요소 : <div>, <h1>, <span>, <p>
<h1>의 조상 요소 : <html>, <body>, <div> ↔ <div>의 자손 요소 : <h1>, <span>
<span>의 조상 요소 : <html>, <body>, <div>, <h1> ↔ <h1>의 자손 요소 : <span>
<p>의 조상 요소 : <html>, <body> ↔ <body>의 자손 요소 : <div>, <h1>, <span>, <p>

형제 관계

서로 같은 부모를 가지고 있는 요소 사이의 관계를 형제 관계라고 한다. 위 코드 중 <div>, <p>가 형제 관계다. 형제 관계 중 바로 뒤에 있는 요소를 지칭할 경우는 인접한 관계를 가진다, 혹은 인접한다고 부른다. 위 코드에서는 <p>가 <div>에 인접한 형제 요소가 된다.

문서 구조 관련 선택자

문서 구조를 이용한 선택자로 자손 선택자, 자식 선택자, 인접 선택자가 있다.

자손 선택자

div span { color: red; }

자손 선택자는 선택자 사이에 아무 기호 없이 공백으로 구분한다. 이 선택자는 <div>의 자손 요소인 <span>을 선택하는 선택자다.

자식 선택자

div > h1 { color: red; }

자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣는다. 이 선택자는 <div>의 자식 요소인 <h1>을 선택하는 선택자다.

인접 형제 선택자

div + p { color: red; }

인접 형제 선택자는 선택자 사이에 +를 넣어 표현한다.

'TOOLS > Frontend' 카테고리의 다른 글

CSS 문법 (3) : 가상 클래스/ 요소, 선택자 간의 구체성 정의 (0)	2024.03.14
CSS 문법 (1) : CSS의 정의, HTML와의 연결 방법 (0)	2024.03.10
HTML 요소별 문법 태그 정리 (0)	2024.03.10

CSS 문법 (2) : 선택자의 유형 및 조합, 문서 구조의 이해