CSS3 : conic-gradient background 백그라운드 색상 표현 방법
가운데를 중심으로 회전하며 표현되는 백그라운드 그라이언트는 conic-gradient라는 옵션을 사용합니다. 이 옵션을 이용하면 다양한 백그라운드 표현이 가능해집니다. 말로설명하자니 어려운 부분이 있군요. 바로 예시를 살펴보시겠습니다.
미리보기
See the Pen CSS3 : How to Use conic-gradient? (BG) by rgy0409 (@rgy0409) on CodePen.
총 7개의 div 요소가 있고 각 요소에는 conic-gradient 가 적용되어 있습니다.
CSS 살펴보기
먼저 test1의 div에 적용된 CSS를 살펴봅시다. div에 공통으로 적용된 가로, 세로 크기라던지 magin값은 언급하지 않겠습니다.
.test1 {
background: conic-gradient(#f54 0turn 0.125turn,
#48f 0.125turn 0.25turn,
#fc0 0.25turn 0.375turn,
#1c1 0.375turn 0.5turn,
#f54 0.5turn 0.625turn,
#48f 0.625turn 0.75turn,
#fc0 0.75turn 0.875turn,
#1c1 0.875turn 1turn);
}보시면 backgroud가 적용되어 있습니다. 백그라운드는 아시죠? 그렇습니다. 배경을 지정할 때 사용하는 CSS 스타일 옵션입니다. 여기에서 중요한 부분은 background-color를 사용하면 안 된다는 것입니다. 이 옵션은 단색으로 표현할 때에만 유효합니다. 다양한 그라디언트를 적용시키려면 backgroud 또는 background-image를 사용해야 합니다.
가운데를 중심으로 돌아가는 학종이같은 백그라운드를 표현하려면 conic-gradient를 사용합니다. 마크업 후 바로 괄호를 붙여서 사용합니다. 즉 이런 것입니다.
conic-gradient(); ▶ O
conic-gradient (); ▶ X
소괄호를 반드시 바짝 붙여줘야 정상 작동합니다. 이점 유념해 주시기 바랍니다. 소괄호 안에는 16진수 색상값을 사용하거나 순수 고유명사의 색이름을 입력해 줍니다. 그리고 바로 뒤에는 turn값 또는 deg값을 넣기도 하고 넣지 않기도 합니다. 예시에서는 test1부터 4까지 turn값이 들어가있으며 test5에만 색상값만 적용이 되어있습니다. test6과 test7에는 deg값이 적용되어 있습니다. 색상 이후의 값 입력에 따른 유무 차이는 예시에서도 쉽게 파악이 됩니다. 그렇습니다. 입력이 되어있는 경우에는 색상마다 정확한 경계를 표현할 수 있습니다. 없는 경우는 test5의 div처럼 오리지널 그라디언트로 표현됩니다. 물론 입력을 한 이후에도 그라디언트 표현이 가능합니다. 이런 경우는 색상이 자연스럽게 넘어가는 구간을 좀 더 디테일하게 표현하고 싶을 때 값에 따라 조절 가능합니다. 일러스트레이터에서 그라디언트 설정을 사용해보신 분들이라면 무슨 의미인지 알 수 있을 것입니다.
turn 또는 deg값의 시작은 보통 마크업 하지 않는 경우에 12시를 기준으로 시작합니다. 그리고 시계 방향으로 돌아가면서 간격 조절이 진행됩니다. -값인 음수 사용도 가능하지만 보통 음수는 사용하지 않습니다. 어차피 한 바퀴 다 돌아가며 표현하는게 대부분이기 때문에 딱히 음수는 사용할 필요가 없습니다.
turn값은 0부터 1까지 소수점을 사용합니다. 0은 0도를 의미하고 1은 한 바퀴가 끝나는 360도를 뜻합니다. 따라서 90도는 0.25turn이고 180도는 0.5turn, 270도는 0.75turn이며 360도는 1turn입니다. test1은 총 8개의 색상이 표현되어있으며 이것을 8분할 해야하니 0.125turn씩 쪼개져 있음을 알 수 있습니다. 간단한 계산 방법은 1을 8로 나누면 0.125가 됩니다. 즉 1을 분할하고자 하는 값만큼 나눠주면 됩니다. 다만 정확하게 딱 맞아 떨어지지 않는 test3과 test4는 소수점 4번째 자리까지 최대한 입력해서 근사값으로 만들어줍니다.
.test6 {
background-image: conic-gradient(#f54 30deg, #fc0 60deg, #05f 90deg, #1c1 120deg, #c62f20 150deg, #fda4f6 180deg, #709af0 210deg, #58facf 240deg, #db933f 270deg, #3c3995 300deg, #318431 330deg, #f54 360deg);
}
.test7 {
background-image: conic-gradient(#f54 60deg, #fc0 60deg 120deg, #05f 120deg 180deg, #eb931b 180deg 240deg, #fa20e9 240deg 300deg, #318431 300deg 360deg);
}turn값 사용이 어려우면 deg값을 사용하면 됩니다. test6과 test7의 div에 적용된 위의 코드를 보시면 turn 대신 deg 값이 적용되어 있음을 알 수 있습니다. deg를 사용하면 1을 분할하고자 하는 값으로 나눠서 계산할 필요가 없습니다. deg는 말그대로 degree(각도)의 영어식 표현입니다. 20deg라는 의미는 20도이고 170deg는 170도입니다. test6과 test7의 차이라고 한다면 그라디언트의 표현 유무인데 원리는 conic-gradient 안에 마크업된 deg값을 비교해 보시면 쉽게 파악하실 수 있을 것입니다.
turn값으로 숫자 입력이 다소 애매했던 6등분의 경우에는 deg를 사용하면 정확한 값으로 표현이 가능합니다. test3과 test7은 6등분된 색 표현 방법이 적용되어 있습니다. turn은 1을 6으로 나눠 소수점까지 계산된 값을 입력해야하는 번거로움이 있었죠. 그리고 매번 0.6666씩 더해서 계산해야 했기에 살짝 복잡했습니다. deg 값을 사용하면 정말 쉽습니다. 60deg씩 증가한 값을 적용시키면 되니까요. 끝.
