가상 요소 선택자 중 보편적으로 많이 쓰이는 Before와 After에 대해 정리.
가상 요소 선택자 (Pseudo Selector)
- 가상선택자는 index.html 상에는 없는 태그지만, CSS로 컨텐츠를 동적으로 제어 가능하다.
- 대상의 앞이나 뒤에 붙여 다양한 모션이나 float의 속성 해제에 중요한 역할을 한다.
가상선택자 Before
<!DOCTYPE html>
<html lang="ko">
<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">
<title>가상선택자</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box">
<p>TEXT</p>
</div>
</body>
</html>* {margin: 0; padding: 0;}
ol,ul,li {list-style: none;}
a {outline: 0; text-decoration: none;}
img {border: 0;}
.box {width:300px; height: 300px; background-color: lightblue;}
.box p {font: bold 30px/1 "arial"; color: #000;}
.box::before {content: 'p태그 앞쪽에 들어갈 컨텐츠';}
가상선택자 ::before로 .box의 TEXT가 있는 p태그 앞에 다른 텍스트를 추가한 모습.
HTML 상에는 box와 TEXT밖에 존재하지 않지만, CSS에서 가상선택자를 활용하면 말 그대로 가상으로 대상의 앞이나 뒤에 디자인 요소나 텍스트를 추가로 넣을 수 있다. 화면에선 정상적으로 출력된다.
가상선택자 After
* {margin: 0; padding: 0;}
ol,ul,li {list-style: none;}
a {outline: 0; text-decoration: none;}
img {border: 0;}
.box {width:300px; height: 300px; background-color: lightblue;}
.box p {font: bold 30px/1 "arial"; color: #000;}
.box::after {content: 'p태그 뒤쪽에 들어갈 컨텐츠';}
가상선택자 ::after로 .box의 TEXT가 있는 p태그 앞에 다른 텍스트를 추가한 모습.
지정한 대상을 기준으로 befor는 바로 앞쪽, after는 바로 뒤쪽에 추가된다.
웹 접근성을 고려한다면, HTML 태그 안에 불필요한 요소가 들어가선 안되므로 HTML 태그를 덧붙이지 않으면서 꾸미는 요소를 넣어야 할 때 CSS의 가상선택자를 활용하게 된다.
가상선택자에 대해 정리해보았다. 이 또한 생각보다 빈번하게 쓰게 된다. 설정하기에 따라 텍스트는 물론이고 배경색과 크기를 설정해 도형이 될 수도 있고, 라인이 될 수도 있고, float 해제 설정을 걸어주는 등 다양한 방식으로 응용하여 쓰인다고 한다.
여담이지만 가상선택자 앞에 붙는 콜론 두개는 하나로 쓰이기도 한다. 예전에는 : 한개로 썼었는데, ::로 바뀌었다고 한다. 현재 보편적으로 쓰이는 건 CSS3이니 ::를 쓰도록 해야겠지만, :로 써도 인식은 된다. 이름이 비슷한 가상 클래스 선택자는 여전히 : 한개로 사용한다. 혼동하지 않도록 참고 해두면 좋을 거 같다.
