9.1 의사 요소 ::before와 ::after
의사 요소 ::before와 ::after는 HTML을 수정하지 않고도 요소 내용 앞이나 뒤에 장식 요소를 추가할 수 있는 CSS의 강력한 도구야. 시각적 효과를 만들고, 사용자 인터페이스를 개선하고, 요소에 스타일을 추가하는 데 널리 사용되고 있어.
설명:
::before: 요소의 내용 앞에 추가되는 의사 요소::after: 요소의 내용 뒤에 추가되는 의사 요소
구문:
element::before {
/* 의사 요소 before의 스타일 */
}
element::after {
/* 의사 요소 after의 스타일 */
}
주요 속성
의사 요소 ::before와 ::after는 색상, 크기, 위치, 배경, 그림자 등 거의 모든 CSS 속성을 포함할 수 있어. 하지만 의사 요소가 보이려면 반드시 콘텐츠와 크기를 설정해야 해.
content: 의사 요소의 내용을 설정. 텍스트나 이미지, 또는 빈 문자열이 될 수 있어display: 의사 요소의 표시 유형을 설정. 일반적으로block이나inline-block이 사용돼position: 의사 요소의 위치를 관리 (예:absolute나relative)width와height: 의사 요소의 크기를 설정
9.2 텍스트 추가
content 속성을 사용하여 쉽게 텍스트를 요소의 시작 또는 끝에 추가할 수 있어.
CSS
.example::before {
content: "시작: ";
color: blue;
}
.example::after {
content: " :끝";
color: red;
}
HTML
<body>
<p class="example">이것은 예제 텍스트야</p>
</body>
코드 설명:
.example::before: 요소의 내용 앞에 "시작: "이라는 텍스트를 추가하고 파란색으로 염색.example::after: 요소의 내용 뒤에 " :끝"이라는 텍스트를 추가하고 빨간색으로 염색
9.3 장식용 선
내용을 감싸는 장식용 선도 추가할 수 있어:
CSS
.decorative-line::before,
.decorative-line::after {
content: "";
display: block;
height: 2px;
background: black;
margin: 10px 0;
}
HTML
<body>
<div class="decorative-line">장식선이 있는 텍스트</div>
</body>
코드 설명:
.decorative-line::before: 요소 내용 앞에 장식용 선을 생성.decorative-line::after: 요소 내용 뒤에 장식용 선을 생성
9.4 아이콘 삽입
텍스트가 부족하다면? 아이콘을 몇 개 추가할 수도 있어:
CSS
.icon::before {
content: url('https://via.placeholder.com/20');
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
HTML
<body>
<p class="icon">아이콘이 있는 텍스트</p>
</body>
코드 설명:
.icon::before: 이미지 URL을 사용하여 텍스트 앞에 아이콘 추가
9.5 복잡한 장식 요소
뭔가 더 복잡한 걸 추가해보자:
CSS
.complex-decor::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f06, transparent);
position: absolute;
top: -10px;
left: -10px;
}
.complex-decor {
position: relative;
padding: 20px;
background: #eee;
margin: 20px;
}
HTML
<body>
<div class="complex-decor">장식된 모서리가 있는 요소</div>
</body>
코드 설명:
.complex-decor::before: 그라디언트와 절대 위치를 사용하여 주요 콘텐츠 앞에 장식 요소 생성.complex-decor: 의사 요소가 요소에 상대적으로 위치할 수 있도록 부모 요소의 상대 위치 설정
9.6 애니메이션 사용
애니메이션도 추가할 수 있어:
CSS
.animated::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: red;
animation: rotate 5s infinite;
margin: 20px auto;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
HTML
<body>
<div class="animated"></div>
</body>
코드 설명:
.animated::before: 사각형 의사 요소 생성 및 keyframes를 사용하여 회전시키는 애니메이션 적용
GO TO FULL VERSION