HTML5 CSS 그라데이션 좀 더 예쁜 웹 페이지를 만들기 위해서 배경 이미지나 텍스트 스타일 등 여러 CSS의 속성을 바꾸게 되는데요. 일반 그림이나 색보다는 그라데이션이 들어가면 좀 더 화려하고 예쁘게 보이잖아요. CSS3에서 그라데이션을 적용하는 방법을 알아보도록 할게요. CSS 공부하시는 분들은 참고하셔서 이용해보세요.
■ 먼저 그라데이션은 선형과 원형이 있는데요. 수평이나 수직으로 뻗어 나가는 스타일이 있구요. 원을 그리면서 퍼지듯이 나가는 스타일이 있습니다. 이번 글에서는 선형 그라데이션에 대해서 알아보고, 이어서 다음 글에서 원형에 대해서 알아볼게요.
선형 그라데이션의 형식은 다음과 같습니다.
▶ linear-gradient (각도, 시작하는 색, 끝나는 색)
속성값을 보면 시작하는 색과 끝나는 색을 지정하고 각도를 지정하는데요. 각도는 12시 방향은 0도, 6시 방향은 180도입니다. 9시는 270도가 되겠죠? 그리고 각도에 사용하는 단위는 "deg" 입니다. 글로 설명하는 것보단 직접 예제를 만들어 볼게요.
■ 예제의 내용을 잠깐 살펴보면 일단 id="box"라는 상자를 하나 만들고, CSS에서 가로세로 300픽셀로 조절을 했구요. 테두리의 선을 1px의 검은 실선으로 처리했습니다. 그리고 그라데이션 효과를 주기 위해서 background의 속성을 선형 그라데이션의 형식에 맞게 입력했는데요. 각도가 '45deg' 잖아요. 45도면 12시 방향과 3시 방향의 중앙...즉 오른쪽 대각선 방향이 됩니다. 왼쪽 아래 모서리에서 오른쪽 위 모서리 방향으로 그라데이션 효과가 적용되겠죠? 시작하는 색은 빨간색, 끝나는 색은 힌색입니다. 브라우저에서 열어보겠습니다.
■ 이렇게 적용이 됩니다. 왜 이렇게 되는지 아시겠죠? 그럼 간단하게 방향과 색을 바꿔서 어떻게 변하는지 확인해볼게요.
■ 다른 속성은 그대로 두고, 각도와 시작하는 색만 바꿔봤습니다. 각도가 '90deg' 이면 3시 방향이 되겠죠? 결과물을 보겠습니다.
■ 파란색으로 시작해서 흰색으로 3시 방향으로 뻗어 나가는 그라데이션을 확인할 수 있습니다. ^^ 참고로 각도를 설정할 때 앞에서 살펴본 것처럼 deg로 표시하셔도 되구요. to와 함께 방향을 가리키는 키워드를 사용하셔도 됩니다. 예를 들어 0deg(12시 방향) ="to top" 180deg는 to bottom을 그 외에도 왼쪽과 오른쪽은 to left, to right를 사용하시면 됩니다. 참고하셔요.
그럼 마지막으로 하나만 더 살펴보고 마무리할게요. 그라데이션이 진행되다가 중간에 한 번 색을 끊고 다른 색을 넣어주는 건데요. 말이 좀 어렵네요. 먼저 결과물을 보시고, 예제를 말씀 드릴게요.
■ 이런 형태의 그라데이션을 말씀 드린 거에요. 이렇게 중간에 다른 색을 섞어주는 건데요. 소스코드를 보겠습니다.
■ 방향은 "to bottom" 아래 방향으로 지정했구요. 빨간색에서 시작해서 중간에 하얀색이 한 번 섞이고 다시 빨간색으로 진행되는 형태입니다. 각도를 여러 방향으로 조절해보면 좀 더 다양한 효과를 줄 수 있습니다. ^^ 그리고 섞이는 부분의 위치를 지정해줄 수 있는데요. 예제에서 [white]를 [white 10%]로 바꿔주면 그라데이션이 시작해서 10% 지점에서 하얀색이 표시됩니다. 위 에제에서는 따로 위치값을 지정해주지 않았기 때문에 기본값인 50%(중간)가 적용돼서 가운데서 하얀색이 표시된 거에요. 참고하셔서 직접 방향과 위치값 변경해가면서 테스트해보세요.
이렇게 해서 선형 그라데이션에 대해서 알아봤습니다. 다음 글에 이어서 원형에 대해서 알아볼게요. 수고하셨습니다.
