6.1 content 속성
의사 요소 ::before와 ::after는 HTML 코드를 변경하지 않고도 요소의 내용 앞뒤에 컨텐츠를 추가할 수 있게 해줘.
이 요소들은 데코레이션 목적으로, 사용자 인터페이스 개선을 위해, 그리고 더 인터랙티브한 웹 페이지를 만드는 데 널리 사용돼.
의사 요소 ::before 및 ::after란?
의사 요소 ::before와 ::after는 선택된 요소의 내용 앞뒤에 가상의 요소를 삽입해. 이 의사 요소들은
아이콘, 데코레이션 요소, 또는 시각적 효과를 추가하기 위해 자주 사용돼.
before 문법:
selector::before {
content: "텍스트 또는 다른 값";
/* 스타일 */
}
after 문법:
selector::after {
content: "텍스트 또는 다른 값";
/* 스타일 */
}
content 속성
::before와 ::after 의사 요소의 핵심 속성은 content야. 이 속성은 의사 요소의 내용물을 정의해.
텍스트 문자열일 수도 있고, 이미지일 수도 있고, 시각적 효과만 필요하다면 빈 값일 수도 있어.
content 속성의 가능한 값:
- 텍스트:
"텍스트" - 이미지:
url("path/to/image.png") - 빈 값:
"" - 속성:
attr(attributeName) - 카운터:
counter(name)
6.2 ::before 및 ::after 사용 예제
데코레이션 요소 추가하기
예제 1: 텍스트 앞에 아이콘 추가하기
이 예제에서는 의사 요소 ::before를 사용하여 링크 텍스트 앞에 아이콘을 추가해.
margin-right는 아이콘과 텍스트 사이에 공간을 추가해줘:
/* 링크 텍스트 앞에 아이콘 추가하기 */
a::before {
content: "🔗";
margin-right: 5px;
}
예제 2: 문단 뒤에 데코레이션 요소 추가하기
이 예제에서는 의사 요소 ::after를 사용하여 문단 뒤에 데코레이션 요소를 추가해.
display: block과 text-align: right를 사용하여 요소를 오른쪽에 정렬해:
/* 문단 뒤에 데코레이션 요소 추가하기 */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
데코레이션 테두리와 배경 만들기
예제 3: 요소 주변 데코레이션 테두리
이 예제에서는 의사 요소 ::before를 사용하여 요소 div 위에 데코레이션 선을 만들어.
position: absolute와 top: -10px를 통해 요소 위에 선을 위치시킬 수 있어:
/* 요소 주변 데코레이션 테두리 */
div::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
예제 4: 자동으로 따옴표 추가하기
이 예제에서는 의사 요소 ::before와 ::after를 사용하여 인용구 블록 주변에 따옴표를 추가해:
/* 인용구 주변에 자동으로 따옴표 추가하기 */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
예제 5: 제목 번호 매기기
이 예제에서는 의사 요소 ::before를 사용하여 h2 제목 앞에 번호를 추가해.
counter-increment는 카운터 값을 증가시키고, content: counter(section)는 현재 카운터 값을 삽입해:
/* 제목 번호 매기기 */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
6.3 의사 요소 적용 및 스타일링
의사 요소 스타일링
의사 요소는 다른 요소들과 마찬가지로 스타일링할 수 있어. 색상, 배경, 경계, 크기, 위치같이 대부분의 CSS 속성을 지원해.
복잡한 레이아웃을 만들기 위한 의사 요소 사용
의사 요소는 추가적인 HTML 요소 없이 레이아웃에 데코레이션 요소를 만들기 위해 자주 사용돼, 예를 들어 경계, 그림자, 그리고 다른 시각적 효과같이.
예제: 각 리스트 요소 앞에 파란색 마커가 표시될 거야:
ul li::before {
content: "•";
color: blue;
margin-right: 5px;
}
<ul>
<li>아이템 1</li>
<li>아이템 2</li>
<li>아이템 3</li>
</ul>
6.4 전체 구현 예제
/* 링크 텍스트 앞에 아이콘 추가하기 */
a::before {
content: "🔗";
margin-right: 5px;
}
/* 문단 뒤에 데코레이션 요소 추가하기 */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
/* 요소 주변 데코레이션 테두리 */
.decorative-box {
position: relative;
}
.decorative-box::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
/* 인용구 주변에 자동으로 따옴표 추가하기 */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
/* 제목 번호 매기기 */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>의사 요소 ::before 및 ::after 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">아이콘이 있는 링크</a>
<p>텍스트 뒤에 데코레이션 요소가 있는 문단</p>
<div class="decorative-box">데코레이션 테두리가 있는 요소</div>
<blockquote>자동 따옴표가 있는 인용구</blockquote>
<h2>번호 매기기가 있는 제목</h2>
<h2>또 다른 제목</h2>
</body>
</html>
GO TO FULL VERSION