16th
::before와 ::after란 가상요소 선택자(pseudo element)이고, 직접적으로 선택은 안된다.
<!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">
<title>2022.06.08. 가상요소 선택자 01</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
section {
padding: 100px 0;
text-align: center;
}
section:nth-child(even) {
background: #f9f9f9;
}
/* section:nth-child(even) 짝수의 nth:child
section:nth-child(odd) 홀수의 nth:child
---게시판 같은 곳에 사용---*/
section h2 {
font-size: 30px;
font-weight: 700;
letter-spacing: -0.025em;
margin: 0 0 10px 0;
}
section p {
font-size: 15px;
font-weight: 300;
letter-spacing: -0.025em;
margin: 0 0 30px 0;
}
section .container {
display: flex;
gap: 30px;
width: 1200px;
margin: 0 auto;
}
section .container figure {
flex: 1;
}
section .container img {
max-width: 100%;
}
.psd01 h2::before {
content: "앞";
}
.psd01 h2::after {
content: "뒤";
}
.psd02 h2::after {
content: "";
display: block;
width: 80px;
height: 1px;
background: #f00;
margin: 20px auto;
}
.psd03 h2::before {
content: "";
display: inline-block;
width: 80px;
height: 1px;
background: #f00;
vertical-align: middle;
/* display: inline-block;을 할 때는 vertical-align으로 center맞춰주면 됨 근데 완전한 센터는 아니어서
margin의 위쪽으로 간격을 주면 된다. */
margin: -5px 10px 0 0;
}
.psd03 h2::after {
content: "";
display: inline-block;
width: 80px;
height: 1px;
background: #f00;
vertical-align: middle;
margin: -5px 0 0 10px;
}
.psd04 h2::after {
content: "\e907";
font-family: xeicon !important;
}
.dot_list {
width: 300px;
}
/* hr도 해야한다 */
.dot_list>li {
position: relative;
text-align: left;
padding: 0 0 0 20px;
line-height: 1.2;
border-bottom: 1px solid #ddd;
}
.dot_list>li::before {
content: "";
position: absolute;
top: 6px;
left: 0;
width: 5px;
height: 5px;
background: #f00;
border-radius: 50%;
}
.psd05 h2::after {
content: "";
display: block;
width: 30px;
height: 30px;
background: #369;
margin: 20px auto;
border-radius: 50% 0;
transform: rotate(15deg);
transition: 1s;
}
.psd05 h2:hover::after {
transform: rotate(1200deg);
}
.psd05 figure {
position: relative;
}
.psd05 figure:hover::after {
transform: rotateX(720deg);
}
.psd05 figure::after {
content: attr(data-num);
position: absolute;
top: -30px;
left: -30px;
background: #f00;
padding: 30px;
font-size: 30px;
color: #fff;
border-radius: 50%;
transition: 1s;
}
hr.list_hr {
position: relative;
border: none;
border-top: 1px solid #ddd;
margin: 50px 0;
overflow: visible;
/* hr에 overflow:hidden이 되어 있어, visible을 함 */
}
hr.list_hr::after {
content: "\e907";
font-family: xeicon !important;
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
background: #f7f7f7;
padding: 20px;
font-size: 20px;
border-radius: 50%;
}
</style>
</head>
<body>
<section class="psd01">
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, temporibus nesciunt aspernatur accusamus
sit sed rerum recusandae laborum!</p>
<div class="container">
<figure>
<img src="../img/lesedilarona01.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona02.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona03.jpg" alt="">
</figure>
</div>
</section>
<section class="psd02">
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, temporibus nesciunt aspernatur accusamus
sit sed rerum recusandae laborum!</p>
<div class="container">
<figure>
<img src="../img/lesedilarona01.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona02.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona03.jpg" alt="">
</figure>
</div>
</section>
<section class="psd03">
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, temporibus nesciunt aspernatur accusamus
sit sed rerum recusandae laborum!</p>
<div class="container">
<figure>
<img src="../img/lesedilarona01.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona02.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona03.jpg" alt="">
</figure>
</div>
</section>
<section class="psd04">
<h2><i class="xi-arrow-right"></i>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, temporibus nesciunt aspernatur accusamus
sit sed rerum recusandae laborum!</p>
<div class="container">
<ul class="dot_list">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. sit sed rerum recusandae laborum!</li>
</ul>
</section>
<section class="psd05">
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, temporibus nesciunt aspernatur accusamus
sit sed rerum recusandae laborum!</p>
<div class="container">
<figure data-num="01">
<img src="../img/lesedilarona01.jpg" alt="">
</figure>
<figure data-num="02">
<img src="../img/lesedilarona02.jpg" alt="">
</figure>
<figure data-num="03">
<img src="../img/lesedilarona03.jpg" alt="">
</figure>
</div>
</section>
<section class="psd06">
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, temporibus nesciunt aspernatur
accusamus
sit sed rerum recusandae laborum!</p>
<hr class="list_hr" />
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque doloremque nobis expedita illo iusto.
Distinctio consequuntur quo voluptates magni eos.
</p>
<div class="container">
<figure data-num="01">
<img src="../img/lesedilarona01.jpg" alt="">
</figure>
<figure data-num="02">
<img src="../img/lesedilarona02.jpg" alt="">
</figure>
<figure data-num="03">
<img src="../img/lesedilarona03.jpg" alt="">
</figure>
</div>
</section>
</body>
</html>
가상요소를 사용해서 line, xecion 등을 삽입했다.
::befor, ::after은 가상요소 선택자이므로, 직접적으로 선택은 안된다.
'수업내용' 카테고리의 다른 글
| [HTML, CSS, jQuery] 다단메뉴와 반응형 + jQuery (0) | 2022.07.31 |
|---|---|
| [ HTML, CSS] 다양한 headerd의 nav메뉴 만들기 (0) | 2022.07.31 |
| [HTML, CSS] position, hover, ::before&after (0) | 2022.07.31 |
| [html, css] 포지션 absolute, , relative, fixed, sticky와 응용 (0) | 2022.07.31 |
| [HTML, CSS] 선택자 씹고 뜯고 맛보고 즐기고(하)_2022.06.02.THU (1) | 2022.06.02 |