CSS Gradient 그라데이션 (원형) 이전 글에서 CSS 속성 중에서 직선으로 뻗어나가는 "선형 그라데이션"에 대해서 알아봤었는데요. 이번에는 원형에 대해서 알아보겠습니다. 혹시 선형 그라데이션에 대해서 아직 공부 안 하셨으면 아래 글 참고하시면 도움이 좀 되실 겁니다.
■ http://godvow.tistory.com/38
■ 원형은 이런 형식의 그라데이션인데요. 시작하는 색과 끝나는 색을 지정해주면 가운데를 중심으로 원을 그리며 뻗어 나가는 형태입니다. 그림에서는 중심점을 잡아주지 않아서 기본값인 정 중앙에 위치하고 있지만 이 위치도 변경해줄 수 있습니다. 아래 예제에서 확인해 볼게요.
■ 먼저 이 원형 그라데이션의 형식은 다음과 같습니다. background 속성에 값을 넣어주면 됩니다.
background: circle-gradient(circle, 시작하는 색, 끝나는 색)
형식을 생각하면서 예제를 만들어 볼게요.
■ 아주 간단하죠? background에 원형 그라데이션의 형식에 맞게 입력하고 시작하는 색을 하얀색, 끝나는 색을 붉은색으로 지정한 상태입니다. 이렇게 간단하게 만들 수 있어요. 예제에서는 중심점의 위치를 지정해 주지 않았기 때문에 기본 위치값인 50%, 50%가 설정돼서 중앙에 위치하게 되는데요. 중심점을 옆으로 옮겨보겠습니다. 부모 요소를 기준으로 '%'로 지정해주면 되거든요. 글로 보는 것보다 다음 예제를 볼게요.
■ background 속성에 "-webkit-"이라는 브라우저 접두사가 붙어 있느 거 보이시죠? 중심점의 위치를 옮기기 위해서는 이렇게 브라우저 접두사를 붙여줘야 확인 할 수 있습니다. 저는 크롬을 사용하고 있어서 크롬의 접두사인 "-webkit-"을 붙였습니다. 그리고 가로, 세로 10%로 지정을 했는데요. 왼쪽 위 모서리를 기준으로 가로 세로 각각 10%의 위치에 중심점이 자리 잡게 됩니다. 위치값 지정해서 이리저리 옮겨보세요.^^ 수고하셨습니다.
