CSS로 하트 만들기
간단하지만 잘 안 되는 하트 만들기.
가상요소 ::before와 ::after 그리고 border-radius와 transform 속성을 활용합니다.
| ::before | 요소의 앞에 가상의 자식 요소를 생성합니다. |
| ::after | 요소의 뒤에 가상의 자식 요소를 생성합니다. |
가상 요소 before와 after는 각각 하트의 봉우리가 됩니다.
구현
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css" />
<style>
.heart {
width: 300px;
height: 300px;
background: #ea2027;
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
1. heart 클래스에 ::befor와 ::after를 추가합니다.
.heart {
width: 300px;
height: 300px;
background: #ea2027;
}
.heart::before {
content: "";
width: 300px;
height: 300px;
}
.heart::after {
content: "";
width: 300px;
height: 300px;
}
2. heart와 가상 요소들의 position을 각각 relative와 absolute로 설정합니다.
.heart {
width: 300px;
height: 300px;
background: #ea2027;
position: relative;
}
.heart::before {
content: "";
width: 300px;
height: 300px;
position: absolute;
}
.heart::after {
content: "";
width: 300px;
height: 300px;
position: absolute;
}
아직은 아무런 변화가 없습니다. 위의 코드에서는 before와 after가 생성되었지만 heart와 겹쳐져 있는 상태입니다.
3. before와 after의 존재를 확인하기 위해 위치를 조정하고 border속성을 추가하겠습니다.
.heart {
width: 300px;
height: 300px;
background: #ea2027;
position: relative;
}
.heart::before {
content: "";
width: 300px;
height: 300px;
position: absolute;
left: -50%;
border: 5px solid blue;
}
.heart::after {
content: "";
width: 300px;
height: 300px;
position: absolute;
top: -50%;
border: 5px solid green;
}
before와 after의 테두리(border)가 그려지면서 화면에 나타났습니다.
4. 봉우리 모양을 만들기 위해 border-radius속성을 추가해 줍니다.
.heart {
width: 300px;
height: 300px;
background: #ea2027;
position: relative;
}
.heart::before {
content: "";
width: 300px;
height: 300px;
position: absolute;
left: -50%;
border: 5px solid blue;
border-radius: 50%;
}
.heart::after {
content: "";
width: 300px;
height: 300px;
position: absolute;
top: -50%;
border: 5px solid green;
border-radius: 50%;
}
5. border 속성을 지우고 background 속성으로 색상을 맞춰줍니다.
.heart {
width: 300px;
height: 300px;
background: #ea2027;
position: relative;
margin: 150px auto;
}
.heart::before {
content: "";
width: 300px;
height: 300px;
position: absolute;
left: -50%;
border-radius: 50%;
background: #ea2027;
}
.heart::after {
content: "";
width: 300px;
height: 300px;
position: absolute;
top: -50%;
border-radius: 50%;
background: #ea2027;
}
이제 하트를 똑바로 세워주기만 하면 됩니다.
6. heart 클래스에서 transform 속성을 사용하여 요소를 45도 기울여줍니다.
이때 heart 클래스를 움직이면 자식 요소인 before와 after도 함께 움직이기 때문에 before와 after에는 따로 설정하지 않습니다.
.heart {
width: 300px;
height: 300px;
background: #ea2027;
position: relative;
transform: rotate(45deg);
}
완성!
수고하셨습니다.
::after (:after) - CSS: Cascading Style Sheets | MDN
CSS에서, ::after 는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.
developer.mozilla.org
::before - CSS: Cascading Style Sheets | MDN
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
developer.mozilla.org
'프론트엔드 HTML CSS JAVASCRIPT' 카테고리의 다른 글
| [HTML, CSS] display 속성 차이(block, inline, inline-block) (0) | 2023.12.31 |
|---|---|
| [HTML, CSS] 요소에 그림자 추가하는 방법(입체감 주는 방법) box-shadow, text-shadow 총정리 (1) | 2023.12.31 |
| [HTML, CSS] transform, transition으로 요소 이동 및 변형시키는 방법 / 동적인 효과(애니메이션) (0) | 2023.12.28 |
| [HTML, CSS] flexbox(display: flex) 총정리 (0) | 2023.12.28 |
| [HTML, CSS] 스크롤바 생성 overflow (auto, scroll, hidden) (2) | 2021.04.01 |
