필자는 이 글의 주제인 ::before와 ::after 선택자를 유튜브에서 처음 활용하는 법을 배웠다.
해당 선택자를 사용하여 입체적인 3D 버튼을 만드는 법을 알게됐다.
각설하고, 이번에는 가상 선택자를 사용하는 방법을 빠르게 알아보겠다.
편의를 위해 css는 html파일 내에 작성하겠다.
이번 글의 목표는 가상 선택자를 사용해서 3D 박스를 제작해보겠다.
먼저 box 클래스를 가진 div를 생성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
background-color: #303030;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.box{
background-color: #202020;
font-size: 30px;
color: ivory;
font-weight: 900;
padding: 30px;
}
</style>
</head>
<body>
<div class="box">3D button</div>
</body>
</html>위 코드를 웹에서 돌려보면
이렇게 보인다.
그러면 이제 가상 선택자를 사용해볼 차례이다.
.box::before{
}
.box::after{
}
우선 가상 선택자를 사용하려면 content 속성을 무조건 넣어야한다.
content 속성은 위 가상 선택자들이 실체를 가질 수 있도록 도와준다. 안넣으면 절대 안된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
background-color: #303030;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.box{
background-color: #202020;
font-size: 30px;
color: ivory;
font-weight: 900;
padding: 30px;
}
.box::before{
content: "";
background-color: blue;
position: absolute;
left: 10px;
width: 10px;
height: 40px;
}
.box::after{
content: "";
background-color: red;
position: absolute;
right: 10px;
width: 10px;
height: 40px;
}
</style>
</head>
<body>
<div class="box">3D button</div>
</body>
</html>
이렇게 새로운 html 요소를 생성하지 않고 추가적인 도형을 생성했다.
그러면 이제 position을 적절히 사용하여 만들어둔 박스 좌측과 상단에 배치하겠다.
transform: Skew()를 통해 전체적으로 회전도 주어야한다.
완성 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
background-color: #303030;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.box{
background-color: #202020;
font-size: 30px;
color: ivory;
font-weight: 900;
padding: 30px;
width: 150px;
height: 40px;
position: relative;
transform: skewY(-15deg);
}
.box::before{
content: "";
background-color: blue;
position: absolute;
left: -20px;
top: -10px;
width: 20px;
height: 100%;
transform: skewY(45deg);
}
.box::after{
content: "";
background-color: red;
position: absolute;
top: -20px;
right: 10px;
width: 100%;
height: 20px;
transform: skewX(45deg);
}
</style>
</head>
<body>
<div class="box">3D button</div>
</body>
</html>
'웹 > 개념' 카테고리의 다른 글
| 웹 css - 태그1 (0) | 2021.06.23 |
|---|---|
| 웹 css - 선택 (0) | 2021.06.23 |