가상 요소(Virtual element)는 HTML 문서 트리(DOM)에는 실제로 존재하지 않지만 CSS를 사용하여 스타일을 적용할 수 있는 요소를 의미합니다. 가상요소를 사용하면 HTML문서에 존재하지 않는 요소를 CSS를 통해 생성하고 스타일을 적용할 수 있습니다. 다시 말해서, HTML 태그나 javascript없이 CSS만으로도 HTML 문서 안에 디자인 요소를 추가할 수 있다는 것이죠.
가상 요소에는 대표적으로 ::before와 ::after가 있습니다. ::before는 선택한 요소의 시작 부분(앞)에 가상 요소를 생성하고, ::after는 선택한 요소의 끝 부분(뒤)에 가상 요소를 생성합니다. 아래의 간단한 예시를 보면 "Hello, World" 앞에 before 가상요소(👋)가 뒤에 after 가상요소(😉)가 생긴걸 볼 수 있습니다.
가상 요소는 주로 추가적인 콘텐츠를 생성하거나 요소의 디자인을 꾸밀 때 사용됩니다. 예를 들어, 위의 예시처럼 content 속성을 사용하여 가상 요소에 콘텐츠를 추가할수도 있구요. 홈페이지 아래 푸터에 구분선을 넣을수도 있구요. 체크박스나 리스트의 아이콘 등을 변경할 수도 있습니다.
📌1. 가상요소 작성방법
- 콜론 두개(::): before, after 이름 앞에 콜론 두개(::)를 사용
(CSS3부터는 가상클래스와 구분하기위해 콜론 두개를 사용하는 것을 권장합니다) - content 속성: 가상요소에 표시할 컨텐츠를 반드시 표기
- 기본값 inline : 가상요소는 기본적으로 inline요소이므로 원하는 크기를 갖기위해선 block이나 inline-block으로 변경
📌2. Contents속성
content: ""; // 빈값
content: "Hello"; // 문자열
content: "\2605"; // 특수문자 ★
content: "url("image.png")"; // url값
content: attr(data-text); // <div data-text="예시"></div>의 예시
content: counter(카운터명) // 순서 넘버링- 빈값: 아무내용도 표시하지 않음
- 문자열: 따옴표(")나 작은따옴표(')로 묶인 일반 텍스트 문자열
- 특수문자: 일부 특수 문자나 이스케이프 시퀀스
- URL: 이미지의 url을 사용
- 데이터 속성: 요소의 데이터 속성값을 가져와서 표시
- counter: 자동으로 순서를 생성
📌3. before, after 예시
💡 (1) 특수문자, 문자열 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
.custom-label {
position: relative;
font-size: 24px;
}
.custom-label::before {
content: 'Hi, ';
}
.custom-label::after {
content: ' \2605';
}
</style>
<div class="custom-label">Stars!</div>
</body>
</html>
💡 (2) 구분선 넣기
<!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>
</head>
<body>
<div>
<ul>
<li><a href="#" class="">회사소개</a></li>
<li><a href="#" class="">인재채용</a></li>
<li><a href="#" class="">이용약관</a></li>
<li><a href="#" class="">고객센터</a></li>
</ul>
</div>
<style>
/* 기본 적용된 스타일링 제거 */
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: inherit;
display: inline-block;
}
/* 구분선 스타일링 */
ul {
display: flex;
}
li {
padding: 10px;
}
li::after{
content: "|";
padding-left: 17px;
}
li:last-child::after{
content: "";
}
</style>
</body>
</html>💡 (3) 순번 자동생성
① counter-reset: 먼저 카운터를 초기화
② conternt: coutent 속성에 counter함수를 이용하여 카운터 값을 표시
③ counter-increment: counter-increment 속성을 사용하여 각 항목마다 카운터 값을 증가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<style>
ol {
counter-reset: myCounter; /* 카운터 초기화 */
list-style-type: none; /* 리스트 스타일 제거 */
}
li::before {
content: counter(myCounter) ".";
margin-right: 8px; /* 숫자와 텍스트 사이 간격 조절 */
}
ol li {
counter-increment: myCounter;
}
</style>
<ol>
<li>첫 번째</li>
<li>두 번째</li>
<li>세 번째</li>
</ol>
</body>
</html>'지금, 개발하기 > CSS' 카테고리의 다른 글
| HTML/CSS] label 태그는 언제 쓰는 건가요? (0) | 2021.10.05 |
|---|---|
| HTML/CSS] flex- box로 요소 배치하기2 (0) | 2021.08.22 |
| HTML/CSS] flex- box로 요소 배치하기 (0) | 2021.08.21 |
| HTML/CSS] float을 이용하여 왼쪽/오른쪽 정렬하기 (0) | 2021.08.20 |
| HTML/CSS] Position으로 요소 배치하기 (0) | 2021.08.18 |
