[HTML+CSS][색상과 배경을 위한 스타일] 03 - 그러데이션 효과로 배경 꾸미기

 

 

[HTML+CSS][색상과 배경을 위한 스타일] 02 - 배경색과 배경 이미지

 

단순히 이미지와 배경색으로도 배경을 꾸밀 수 있지만

이번에는 좀 더 다채로운 그러데이션에 대해서 배워보자.

 

 

---

 

 

그러데이션과 브라우저 접두사

 

그러데이션을

현재에는 표준화된 구문이 완성되어 한결 수월해진 편이다.

 

하지만 현재의 표준화된 구문 외에도

그러데이션을

접두사를 붙여 사용하는 브라우저까지 고려해 함께 입력해야 한다.

 

이때, 선형 그라데이션 함수나 원형 그라데이션 함수를 이용해 만드는 배경은

크기가 없는 배경 이미지이므로 그라데이션 값을

background-image속성이나 background속성 값으로 지정해 준다.

 

 

---

 

 

선형 그러데이션

 

색상이 수직이나 수평 또는 대각선 방향으로 일정하게 변하는 것으로

linear-gradient를 사용하며 색상이 어느 방향으로 바뀌고

어떤 색상으로 바뀌는지 알려줘야 한다.

 

 

- 방향 -

방향을 지시할 때 끝 지점을 기준으로 ‘to’와 함께 사용해 주면 되며,

위치나 각도를 생략할 경우 ‘to bottom’으로 인식한다.

 

 

 

 

- 각도 -

선형 그라데이션에서 색상이 바뀌는 방향을 각도로도 표현해 줄 수 있는데

‘deg’로 표현해 준다.

 

 

 

 

- 색상 중지 점 -

선형 그라데이션을 만들기 위해서는

바뀌는 부분의 색을 지정해 주어야 하는데

바뀌는 지점을 색상 중지 점이라고 한다.

 

색상 중지 점을 지정할 때는 색상만 지정할 수도 있고

색상과 함께 중지 점의 위치도 함께 지정할 수 있다.

 

 

 

 

---

 

 

원형 그러데이션

 

원이나 타원의 중심부터 동심원을 그리며 바깥 방향으로 색상이 바뀌며

색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고

그라데이션 모양을 지정해 줘야 한다.

 

 

- 모양 -

circle(원형)과 ellipse(타원형) 중에 고르면 되며,

따로 지정하지 않으면 타원형으로 인식한다.

 

 

 

 

- 위치 -

그러데이션이,

표준 구문에서는 ‘모양＇과 ‘크기＇ 속성 다음에 at 키워드와 함께 위치 값을 지정하지만

브라우저 접두사를 붙이는 구문에는 키워드 없이 구문의 맨 앞부분에 위치를 표시한다.

 

 

 

 

- 크기 -

원의 크기를 지정할 수 있다.

 

 

① closet-side 속성 값

원의 경우, 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 모서리와 만나고

타원의 경우, 그라데이션 중심에서 가장 가까운 요소의 수평축이나 수직축과 만난다.

 

② closet-corner 속성 값

그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 코너에 닿도록 한다.

 

③ farthest-side 속성 값

원의 경우, 그라데이션 가장자리가 그라데이션 중심에서 가장 먼 모서리와 만나고

타원의 경우, 그라데이션 가장자리가 그라데이션 중심에서 가장 먼 모서리와 만나도록 한다.

 

④ farthest-corner 속성 값

그라데이션 가장자리가 그라데이션 중심에서 가장 먼 코너에 닿도록 한다.

 

 

 

 

- 색상 중지 점 -

원형 그라데이션에서 색상이 바뀌는 부분을 색상 중지 점이라고 하며,

그러데이션색상뿐만 아니라 색상이 바뀌는 위치도 함께 지정할 수 있다.

 

 

 

 

---

 

 

그러데이션 반복

 

선형 그라데이션과 원형 그라데이션은 패턴을 한 번 만든 후

요소를 채울 만큼 반복해 표시할 수 있다.

 

repeating-linear-gradient나 repeating-radial-gradient를 사용해 주면 된다.

 

 

 

 

---

 

 

단순히 그러데이션 하면 색상이 연결되는 것만 생각했는데

종류도 다양하고 그에 해당하는 속성도 굉장히 많은 것 같다.

 

특히 속성이 정말 많아서 외우기 힘들었지만

컴퓨터로 나오는 결과가 아주 만족스러웠다.

 

 

---

 

 

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

 

 

※ 해당 글은 습득 목적으로 작성된 글입니다 ※