728x90
이번 시간에는 CSS를 사용하여 하트를 만들어 보도록 하겠습니다.
사용할 핵심 요소는 CSS의 가상 클레스인 before, after입니다.
before : 요소의 앞에 가상의 자식 요소를 생성합니다.
after : 요소의 뒤에 가상의 자식 요소를 생성합니다.
소스코드
완성된 소스코드입니다. CSS 옆에 설명을 달아 두었으니 참고하시면 되겠습니다.
<!-- HTML -->
<body class="container">
<div class="make_heart"></div>
</body>
/*CSS*/
.container {
flex-direction: row;
margin-top: 200px;
border: 2px solid #333333;
}
.make_heart {
margin: 0 auto;
width: 100px;
height: 100px;
background: #ea2027;
position: relative; /*부모*/
transform: rotate(45deg); /*회전*/
}
.make_heart:before, .make_heart:after {
content: "";
width: 100px;
height: 100px;
position: absolute; /*자식*/
border-radius: 50%; /*둥글게*/
background: #ea2027;
border: 1px solid blue; /*테두리 확인*/
}
.make_heart:before {
left: -50%; /*왼쪽으로 -50%*/
}
.make_heart:after {
top: -50%; /*위쪽으로 -50%*/
} */
이해를 돕기위해 태두리 옵션을 넣어두었으니 사용 하실때는 제거하고 사용하기시 바랍니다.
.container {
border: 2px solid #333333;
}
.make_heart:before, .make_heart:after {
border: 1px solid blue; /*테두리 확인*/
}
반응형
그리드형
'IT > HTML & CSS & JavaScript' 카테고리의 다른 글
| [CSS] 애니메이션 / 움직이는 강아지 (0) | 2021.09.17 |
|---|---|
| [CSS] margin, padding 개념 & 사용법 정리 (0) | 2021.09.17 |
| [CSS] 마우스 hover / 이미지 확대 2가지 방법 (1) | 2021.09.17 |
| [CSS] 가상요소(before), 가상클래스(hover) 사용법 (0) | 2021.09.16 |
| [CSS] !important - 속성값 우선 적용방법 (0) | 2021.09.16 |
댓글