8.1 기본 개념
CSS에서 의사 클래스와 의사 요소를 결합하면 요소의 상태, 구조 및 내용에 따라 스타일을 적용할 수 있는 강력하고 유연한 선택자를 만들 수 있어. 덕분에 복잡하고 역동적인 스타일을 생성하게 되고, 사용자 인터페이스랑 웹 페이지랑 상호작용 경험을 향상시켜줘.
결합의 기초
의사 클래스
의사 클래스는 콜론 하나로 표시되고(:), 요소의 상태나 위치에 따라 적용돼. 예를 들면:
:hover— 요소에 마우스를 올렸을 때 적용됨:first-child— 부모의 첫 번째 자식을 선택함
의사 요소
의사 요소는 두 개의 콜론(::)으로 표시되고, 요소의 일부분을 스타일링하거나 내용을 추가하는 데 사용돼. 예를 들면:
::before— 요소 앞에 내용을 추가함::first-letter— 요소의 첫 글자를 스타일링함
결합하기
의사 클래스와 의사 요소는 결합해서 상태와 구조에 따라 스타일을 적용할 수 있는 복잡한 선택자를 만들 수 있어.
문법:
선택자:의사클래스::의사요소 {
속성: 값;
}
8.2 상호작용을 위한 결합
예제 1: 마우스를 올렸을 때 첫 글자 스타일링하기
이 예제에서는 문단에 마우스를 올리면 첫 글자가 커지고 빨간색으로 변해:
/* 문단에 마우스를 올릴 때 첫 번째 글자 스타일링 */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<p>Hover over this paragraph to see the first letter change.</p>
예제 2: 포커스가 있을 때 링크 앞에 내용 추가하기
이 예제에서는 링크에 포커스가 있을 때 링크 앞에 아이콘을 추가하고 파란색으로 변해:
/* 포커스가 있을 때 링크 앞에 아이콘 추가 */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
8.3 구조 스타일링을 위한 결합
예제 3: div 안의 첫 번째 문단에 내용 추가하기
이 예제에서는 div 안의 첫 번째 문단의 첫 줄을 굵게 하고 녹색으로 변해:
/* div 안의 첫 번째 문단의 첫 줄 스타일링 */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
예제 4: 리스트의 마지막 요소 뒤에 장식 요소 추가하기
이 예제에서는 리스트의 마지막 요소 뒤에 장식 요소를 추가하고 빨간색으로 변해:
/* 리스트의 마지막 요소 뒤에 장식 요소 추가 */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
8.4 복잡한 조건을 위한 결합
예제 5: 짝수 리스트 요소에 마우스를 올렸을 때 스타일링하기
이 예제에서는 짝수 리스트 요소에 마우스를 올리면 밝은 회색 배경과 파란색 텍스트가 적용돼:
/* 짝수 리스트 요소에 마우스를 올렸을 때 스타일링 */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
예제 6: 방문한 상태의 활성 링크 스타일링하기
이 예제에서는 방문한 후 활성 상태인 링크를 주황색으로 변하고 밑줄을 추가해:
/* 방문한 상태의 활성 링크 스타일링 */
a:visited:active {
color: #e67e22;
text-decoration: underline;
}
8.5 전체 구현 예제
/* div 안의 첫 번째 문단의 첫 줄 스타일링 */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
/* 리스트의 마지막 요소 뒤에 장식 요소 추가 */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
/* 짝수 리스트 요소에 마우스를 올렸을 때 스타일링 */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
/* 포커스가 있을 때 링크 앞에 아이콘 추가 */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
/* 문단에 마우스를 올릴 때 첫 번째 글자 스타일링 */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>의사 클래스 및 의사 요소 결합 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>이것은 div 안의 첫 번째 문단입니다.</p>
<p>이것은 div 안의 두 번째 문단입니다.</p>
</div>
<ul>
<li>리스트 요소 1</li>
<li>리스트 요소 2</li>
<li>리스트 요소 3</li>
<li>리스트 요소 4</li>
</ul>
<a href="#">포커스가 있을 때 아이콘이 있는 링크</a>
<p>첫 글자가 변하는 효과를 보려면 이 문단 위로 마우스를 올려보세요.</p>
</body>
</html>
GO TO FULL VERSION