프론트엔드/CS
[CSS - keyframes, border-radius] 원 도형 아티클 디자인
턴태
2022. 9. 23. 17:31
기본 제작
See the Pen Untitled by seongtae (@stae1102) on CodePen.
위처럼 기본적으로 3개의 도형이 움직이는 아티클을 만들고, 마우스를 올렸을 때 색상을 부여하는 방식의 디자인이다.
1. HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="square">
<span></span>
<span></span>
<span></span>
<div>
<h2>Heading Text</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias qui aperiam ducimus omnis enim. Consequuntur
esse quisquam laborum aspernatur, officiis ipsum fugit optio et hic suscipit ipsam veritatis vero consectetur.
</p>
<a href="#none">Read More</a>
</div>
</div>
</body>
</html>HTML 구조는 아래와 같다.
└ div .square
├ span
├ span
├ span
└ div
├ h2
├ p
└ a2. CSS 작성
2-1. 구조
body {
font-family: "Raleway", sans-serif;
line-height: 1.5em;
margin: 0;
font-weight: 300;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
a {
text-decoration: none;
}기본적으로 가장 부모인 .square div 태그를 정중앙에 정렬시키고자 flex를 사용했다.
.square {
width: 400px;
height: 400px;
position: relative;
}
.square span {
position: absolute;
width: inherit;
height: inherit;
border: 1px solid #fff;
border-radius: 40% 60% 65% 35% / 40% 50% 55% 60%;
transition: 0.5s;
animation: circle 5s linear infinite;
}- 일단 가장 바깥에서 모든 span 태그를 감싸는 div 태그의 크기를 지정했다(지금 보면 웬만해서 여러 태그가 있는 경우 하나로 감싸는 태그를 사용해서 구조를 작성하신다. 좋은 방법인 것 같다).
그런데 신기하게 위치 조정을 굳이 하지 않는데 position 속성을 각각 적절하게 부여하였다. 왜인지 궁금해서 이것저것 주석을 넣었다 빼며 확인해봤는데, position을 absolute 로 주면서 자식 요소는 부모요소를 기준으로 절대적으로 위치를 옮길 수 있으며, 이는 높이값도 영향을 가질 수 있게 된다. 실제로, 부모 요소의 높이값을 200px로 줄였더니 도형이 아래로 이동했다. 즉 부모 요소의 기준 값이 아래로 이동했기 때문에 span태그 요소의 위치도 아래로 이동한 것이다. 참 신기하면서도 어렵다!
- 그 다음 span 태그에는 각각 크기를 상속받도록 했으며 처음에는 가장자리를 하얀 색으로 칠해준다. 여기서 border-radius를 두 개 사용함으로써 원을 더 다양하게 변형시킬 수 있다. 그리고 애니메이션에서 background-color를 바꿀 예정이라서 transition 을 0.5로 설정했다.
.square > div {
text-align: center;
position: absolute;
width: 70%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.square > div > a {
color: #fff;
text-decoration: none;
padding: 10px;
border: 1px solid #fff;
border-radius: 60% 50% 90% 60% / 70% 90% 50% 70%;
}도형에 들어갈 글과 a 태그의 설정을 정해준다.
2-2. 애니메이션
@keyframes circle {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}circle이라는 애니메이션은 0도부터 360도까지 회전하는 애니메이션으로 구성했다.
2-3. 가상 클래스를 사용한 세부 설정
.square:hover span {
background-color: crimson;
border: none;
}
.square span:nth-child(1) {
animation: circle 6s linear infinite;
}
.square span:nth-child(2) {
animation: circle 4s linear infinite;
animation-direction: reverse;
}
.square span:nth-child(3) {
animation: circle 10s linear infinite;
}
.square:hover span:nth-child(1) {
opacity: 0.3;
}
.square:hover span:nth-child(2) {
opacity: 0.5;
}
.square:hover span:nth-child(3) {
opacity: 0.8;
}- 첫 번째는 전체적으로 hover가 됐을 때 span 태그에 색상을 부여하고 테두리를 없애준다.
- 그 다음 각 span 태그들이 서로 다른 속도로 회전하도록 구성한다. 그리고, 역방향으로도 이동할 수 있도록
animation-direction: reverse를 사용했다. - 그 다음 각각 투명도도 다르게 해줬다 이건 굳이 hover가 아니어도 상관 없다.
여기서 중요한 것은 굳이 div를 여러 번 사용하지 않고 span태그를 사용해서 조금 더 클래스를 덜 사용하는 방법이다~!
클래스를 덜 사용하여 조금 더 가독성도 있고 선택자를 자유롭게 사용할 수 있다!