🍁전후 선택자
전후 선택자는 선택한 요소의 앞/뒤에 추가로 내용을 생성하는 역할을 한다.
지금까지 봐 온 first-child 같은 것들은 가상 클래스이다. 그리고 ::before는 가상 요소이다.
- 1. ::before = :before
- 2. ::after = :after
전후 선택자는 콜론이 하나가 아니라 2개를 쓴다.
콜론을 하나로 적어도 동작은 하지만 그럼에도 2개로 적는 이유는 성질을 확실하게 하기 위해서이다.
가상 요소 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p > span {
color: blue;
}
p > span::before {
content: '[';
color: orange;
}
p > span::after {
content: ']';
color: orange;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At laudantium vitae sit fugit aliquid recusandae rerum reiciendis unde nisi quisquam, <span>ullam</span> neque debitis, hic consequuntur voluptatum natus nulla iure reprehenderit?
Inventore unde fugiat exercitationem, officiis fugit quaerat rem quod voluptates distinctio, aspernatur similique ea nesciunt ipsum enim iure debitis error? Eius <span>voluptatum</span> labore vel quibusdam voluptatibus esse praesentium quasi enim?
Est quia, in deserunt explicabo ipsum ab laborum et. Vel vero illo blanditiis <span>libero</span> optio et, voluptates consequuntur, exercitationem, ducimus distinctio itaque expedita a eos nobis fugiat? Maxime, similique. Deserunt?</p>
</body>
</html>
지금까지 봐온 가상 클래스는 태그를 찾기 위한 것이었는데, 가상 요소는 콘텐츠를 생산해 낸다.
그래서 가상으로 요소를 추가해 낸다고 해서 가상 요소라고 부르는 것이다.
태그에는 직접적으로 영향을 주지 않으면서 내용을 첨삭할 때 쓸 수 있는 도구이다.
전화번호 앞에 ☎ 삽입
<span class="tel">010-1234-5678</span>p > span.tel::before {
content: '☎';
color: orange;
}
전화번호 앞에 content로 '☎'를 추가하여 디자인 요소로 활용할 수 있다.
링크 앞에 이모지 삽입
링크 앞에 before 요소를 적용하여 링크라는 것을 보이게 할 때 편하게 사용할 수 있다.
또한 이미지를 다른 이미지로 변경할 때에도 일괄적으로 변경할 수 있게 한다.
가상 요소 활용
상자 3개를 가로로 나열되게 만들려고 한다.
여러 가지 방법으로 구현해보며, 마지막에는 가상 요소를 활용하는 방법을 알아보도록 하자.
font-size: 0으로 구현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#list {
font-size: 0;
}
#list .box {
border: 1px solid black;
width: 100px;
height: 100px;
display: inline-block;
font-size: 1rem;
}
</style>
</head>
<body>
<h1>콘텐츠</h1>
<div id="list">
<!-- div#box$.box{상자$}*3 -->
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
</div>
<h2>또 다른 콘텐츠</h2>
</body>
</html>
list의 font-size를 0으로 하면서 상자 사이의 간격을 없애 줄 수 있다.
대신 상자 내의 글자는 보여야 하므로 1rem으로 다시 설정해 준다.
위 결과를 float를 사용해서도 만들 수 있다.
float: left로 구현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#list .box {
border: 1px solid black;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<h1>콘텐츠</h1>
<div id="list">
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
<div style="clear:both;"></div>
</div>
<h2>또 다른 콘텐츠</h2>
</body>
</html>
추가로 태그를 만들어서 float 속성을 부여하여 기능을 구현하였다.
[CSS] display: 인라인 요소의 개행, float
🍁display [CSS] overflow, visibility, display 🍁오버플로우 (overflow) 박스에 담을 수 있는 내용을 초과하면 초과한 내용이 박스를 빠져나간다. 하지만 height: auto; 값을 주면 그만큼 박스가 커지기 때문에
isaac-christian.tistory.com
float에 대해서는 위 글을 참고하도록 하자.
가상 요소로 구현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#list .box {
border: 1px solid black;
width: 100px;
height: 100px;
float: left;
}
#list::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<h1>콘텐츠</h1>
<div id="list">
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
</div>
<h2>또 다른 콘텐츠</h2>
</body>
</html>
가상 요소를 이용하면 추가로 태그를 만들지 않고 가상의 요소로 구현을 할 수 있다.
float와 같이 태그를 추가하지 않고 구현할 수 있으므로 이와 같은 상황에서는 가상 요소를 사용하는 방법을 사용하는 게 좋다.
가상 요소는 after와 before는 위와 같이 clear 하는 용도로 가장 많이 사용한다는 점을 기억하자.
