3장: 고급 선택자와 속성
### 3.1 복합 선택자 (Combinators)
복합 선택자는 여러 선택자를 결합하여 특정 조건에 맞는 요소를 선택할 수 있습니다. 주요 복합 선택자에는 자손 선택자, 자식 선택자, 인접 형제 선택자, 일반 형제 선택자가 있습니다.
#### 3.1.1 자손 선택자 (Descendant Selector)
공백을 사용하여 특정 요소의 모든 자손 요소를 선택합니다.
예제:
div p {
color: blue;
}
HTML 코드:
<div>
<p>이 문장은 파란색입니다.</p>
<section>
<p>이 문장도 파란색입니다.</p>
</section>
</div>
#### 3.1.2 자식 선택자 (Child Selector)
`>` 기호를 사용하여 특정 요소의 직계 자식 요소를 선택합니다.
예제:
div > p {
color: green;
}
HTML 코드:
<div>
<p>이 문장은 녹색입니다.</p>
<section>
<p>이 문장은 파란색입니다.</p>
</section>
</div>
#### 3.1.3 인접 형제 선택자 (Adjacent Sibling Selector)
`+` 기호를 사용하여 특정 요소의 인접 형제 요소를 선택합니다.
예제:
h1 + p {
color: red;
}
HTML 코드:
<h1>제목</h1>
<p>이 문장은 빨간색입니다.</p>
<p>이 문장은 기본 색상입니다.</p>
#### 3.1.4 일반 형제 선택자 (General Sibling Selector)
`~` 기호를 사용하여 특정 요소의 모든 형제 요소를 선택합니다.
예제:
h1 ~ p {
color: purple;
}
HTML 코드:
<h1>제목</h1>
<p>이 문장은 보라색입니다.</p>
<p>이 문장도 보라색입니다.</p>
### 3.2 의사클래스 (Pseudo-classes)
의사클래스는 특정 상태에 있는 요소를 선택할 수 있게 합니다. 주요 의사클래스에는 `:hover`, `:active`, `:focus`, `:nth-child()` 등이 있습니다.
#### 3.2.1 `:hover`
요소에 마우스 포인터가 올라갔을 때 선택합니다.
예제:
a:hover {
color: orange;
}
HTML 코드:
<a href="#">링크</a>
#### 3.2.2 `:active`
요소가 활성화되었을 때 선택합니다. 보통 클릭했을 때의 상태를 나타냅니다.
예제:
a:active {
color: red;
}
HTML 코드:
<a href="#">링크</a>
#### 3.2.3 `:focus`
요소가 포커스를 받을 때 선택합니다. 보통 폼 요소에 사용됩니다.
예제:
input:focus {
border-color: blue;
}
HTML 코드:
<input type="text" placeholder="텍스트를 입력하세요">
#### 3.2.4 `:nth-child()`
요소의 형제 요소 중 특정 순서에 있는 요소를 선택합니다.
예제:
li:nth-child(2) {
color: green;
}
HTML 코드:
<ul>
<li>첫 번째 아이템</li>
<li>두 번째 아이템 (녹색)</li>
<li>세 번째 아이템</li>
</ul>
### 3.3 의사요소 (Pseudo-elements)
의사요소는 특정 요소의 일부분을 선택할 수 있게 합니다. 주요 의사요소에는 `::before`, `::after`, `::first-line`, `::first-letter` 등이 있습니다.
#### 3.3.1 `::before`
요소의 내용 앞에 삽입되는 가상의 요소를 선택합니다.
예제:
p::before {
content: "★ ";
color: gold;
}
HTML 코드:
<p>이 문장 앞에 별이 추가됩니다.</p>
#### 3.3.2 `::after`
요소의 내용 뒤에 삽입되는 가상의 요소를 선택합니다.
예제:
p::after {
content: " ★";
color: gold;
}
HTML 코드:
<p>이 문장 뒤에 별이 추가됩니다.</p>
#### 3.3.3 `::first-line`
블록 요소의 첫 번째 줄을 선택합니다.
예제:
p::first-line {
font-weight: bold;
}
HTML 코드:
<p>첫 번째 줄만 굵게 표시됩니다.</p>
#### 3.3.4 `::first-letter`
블록 요소의 첫 글자를 선택합니다.
예제:
p::first-letter {
font-size: 200%;
color: red;
}
HTML 코드:
<p>첫 글자만 크게 표시됩니다.</p>
### 3.4 속성 선택자 (Attribute Selectors)
속성 선택자는 특정 속성을 가진 요소를 선택합니다. 주요 속성 선택자에는 `[attr]`, `[attr=value]`, `[attr~=value]`, `[attr|=value]`, `[attr^=value]`, `[attr$=value]`, `[attr*=value]` 등이 있습니다.
#### 3.4.1 `[attr]`
특정 속성을 가진 요소를 선택합니다.
예제:
a[target] {
color: red;
}
HTML 코드:
<a href="#">일반 링크</a>
<a href="#" target="_blank">새 창에서 열기</a>
#### 3.4.2 `[attr=value]`
특정 속성이 특정 값을 가진 요소를 선택합니다.
예제:
input[type="text"] {
border: 1px solid black;
}
HTML 코드:
<input type="text" placeholder="텍스트 입력">
<input type="password" placeholder="비밀번호 입력">
#### 3.4.3 `[attr~=value]`
공백으로 구분된 단어 목록에서 특정 단어를 포함하는 요소를 선택합니다.
예제:
[title~="flower"] {
color: purple;
}
HTML 코드:
<p title="red flower">이 문장은 보라색입니다.</p>
<p title="blue sky">이 문장은 기본 색상입니다.</p>
#### 3.4.4 `[attr|=value]`
하이픈(-)으로 구분된 값에서 특정 값을 포함하는 요소를 선택합니다.
예제:
[lang|="en"] {
color: green;
}
HTML 코드:
<p lang="en-US">이 문장은 녹색입니다.</p>
<p lang="fr">이 문장은 기본 색상입니다.</p>
#### 3.4.5 `[attr^=value]`
특정 속성이 특정 값으로 시작하는 요소를 선택합니다.
예제:
a[href^="https"] {
color: orange;
}
HTML 코드:
<a href="https://example.com">HTTPS 링크</a>
<a href="http://example.com">HTTP 링크</a>
#### 3.4.6 `[attr$=value]`
특정 속성이 특정 값으로 끝나는 요소를 선택합니다.
예제:
a[href$=".pdf"] {
color: red;
}
HTML 코드:
<a href="document.pdf">PDF 문서</a>
<a href="document.doc">DOC 문서</a>
#### 3.4.7 `[attr*=value]`
특정 속성이 특정 값을 포함하는 요소를 선택합니다.
예제:
a[href*="example"] {
color: blue;
}
HTML 코드:
<a href="https://example.com">Example 링크</a>
<a href="https://test.com">Test 링크</a>
### 연습 문제
1. 복합 선택자를 사용하여 다양한 HTML 요소를 선택하고 스타일을 적용해 보세요.
2. 의사클래스를 사용하여 마우스 호버, 활성화, 포커스 상태에서의 스타일을 지정해 보세요.
3. 의사요소를 사용하여 요소의 내용 앞이나 뒤에 가상의 내용을 삽입해 보세요.
4. 속성 선택자를 사용하여 특정 속성을 가진 HTML 요소에 스타일을 적용해 보세요.
---
댓글
댓글 쓰기