<html>
<head>
<title>Shows Code Examples Here</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: Ivory;
}
/* 하트의 기본 모양. 사각형을 돌려 하트의 아래 부분을 만듭니다*/
.heart {
position: relative;
width: 300px;
height: 300px;
background-color: red;
transform: rotate(-45deg);
}
/* ::before 와 ::after 는 하트의 윗부분을 담당하는 두 개의 원입니다.
각각의 위치를 조정하여 원들이 하트처럼 보이도록 배치합니다.*/
/* 덧붙이자면, ::before 와 ::after 는 의사 요소(pseudo-elements)로 해당 콘텐츠의
앞이나 뒤에 HTML코드를 쓰지 않고도 가상의 콘텐츠를 추가할 수 있게 해줍니다.
CSS만으로 스타일이나 컨텐츠를 추가할 때 유용합니다.*/
.heart::before,
.heart::after {
content: "";
position: absolute;
width: 300px;
height: 300px;
background-color: red;
border-radius: 50%;
}
.heart::before {
top: -150px;
left:0;
}
.heart::after {
left: 150px;
top: 0;
}
<style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
Back to love