문제
CSS battle#1 - 6.Missing Slice 문제 링크
코드
<div class="b">
<div class="a"></div>
</div>
<style>
*{
background-color: #E3516E;
margin: 0;
padding: 0;
}
.b{
display: flex;
justify-content: center;
align-items:center;
height: 100vh;
}
.a{
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(#FADE8B 90deg,#E3516E 0,180deg,#F7F3D7 0 270deg,#51B5A9 0);
}
</style>이렇게 작성한 이유!
처음에는 색깔이 다른 구역 하나하나 div로 나누어서 원 모양으로 배치할 생각이었습니다.
더 간단하게 만드는 방법이 없을까? 고민하던 중에 conic-gradient();가 생각났습니다.
conic-gradient는 간단히 말해서 가운데를 중심으로 회전하게 만드는 코드입니다.
코드 설명
*
background 속성으로 전체에 전경색(#E3516E)을 깔아줬습니다.
.b
원을 가운데에 배치하기 위한 상위 div 태그입니다.
.a
conic-gradient 태그는 전술했듯이 가운데를 중심으로 해서 시계 방향으로 회전하게 만드는 코드입니다. 저희가 사용할 색상은 4가지이기 때문에 먼저 4가지 색상 코드를 괄호()안에 배치해 주었습니다.
시계 방향으로 회전하기 때문에 우측 상단의 #FADE8B 코드가 제일 먼저 옵니다.
conic-gradient(#FADE8B, #E3516E, #F7F3D7, #51B5A9);하지만 이렇게 색상 코드만으로는 원하는 모양을 만들 수 없습니다.
conic-gradient 의 기본 속성에 따라 자동으로 그라데이션이 되기 때문입니다.
때문에 deg값을 사용해 구역을 나누어 줄 필요가 있습니다. deg는 degree(각도)입니다.
conic-gradient(#FADE8B 90deg, #E3516E 0 180deg,
#F7F3D7 0 270deg, #51B5A9 0);90deg는 90도입니다. 그 뒤로 0 180deg, 0 270deg, 0순으로 값을 입력해 주면 원하는 모양을 만들 수 있습니다. 참고로 마지막 값을 0 360deg로 주어도 똑같이 보입니다.
2, 3, 4번째 deg값 앞에 0이 붙는 이유는 시작 각도를 지정하기 위함입니다.
deg값이 아닌 turn값을 사용해서도 같은 모양을 만들 수 있습니다.
conic-gradient(#FADE8B 0.25turn, #E3516E 0 0.5turn,
#F7F3D7 0 0.75turn, #51B5A9 0)1turn이 360도이기 때문에 소수점을 사용하여 나타내야 합니다. 원리는 deg값과 똑같습니다. 편하신 거 사용하시면 되겠습니당. 끝!
