거의 막바지에 바뀐 CSS3 Gradients 용법

CSS 댓글 달기

이미 널리 쓰이고 있는 CSS3 Gradients의 용법이 이번에 또 바뀌었는데, 관련 CSS Image Values and Replaced Content Module Level 3가 지난 1월 12일에 “Last Call” draft 상태로 진입한 것을 보면 어떤 커다란 용법의 변경은 더는 없으리라 예상(기대)된다.

우선 Linear Gradient 용법의 달라진 점.

Linear Gradient의 가장 단순한 사용 예로 다름과 같은 것이 있다. (vendor prefix는 생략함)

div { background: linear-gradient(white, black); }

적용하면 위에서 아래 방향으로 흰색을 시작으로 점점 짙어지면서 마지막은 검은색으로 표시된다.

linear gradient function의 첫 번째 argument는 gradient의 시작점과 끝점을 잇는 기준 축인 gradient-line을 지정하게 되는데, 위의 예에서처럼 생략되면 위에서 아래방향을 가리킨다. 그리고 gradient-line은 deg 단위를 써서 각도를 지정해 주거나, 혹은 몇몇 정의된 keywords를 쓸 수도 있다.

이전의 spec 내용과 달라진 내용으로, 과거 0deg는 왼쪽에서 오른쪽 x 축을 기준으로 각도가 커지면 시계 반대 방향으로 회전했으나, 지금은 밑에서 위를 가리키는 y 축이 기준이며 각도가 커지면 시계 방향으로 회전한다. 그리고 keywords의 경우 예전엔 시작점을 기준으로 했으나 이젠 to와 함께 도착점을 지정해 주어야 한다. 그래서 위의 예를 gradient-line을 써서 과거 용법과 새 용법을 비교하면 다음과 같다.

div { background: linear-gradient(top, white, black); } /* old syntax */
div { background: linear-gradient(-90deg, white, black); } /* old syntax */
div { background: linear-gradient(to bottom, white, black); } /* new syntax */
div { background: linear-gradient(180deg, white, black); } /* new syntax */

gradient-line의 이해는 spec 문서에 나와있는 예제 그림을 보면 쉽게 이해할 수 있는데, 아래 그림은 background: linear-gradient(45deg, white, black); 스타일을 가지는 박스 모양.
네모난 상자 모양의 그림으로 배경색이 왼쪽 아래 구석에서 흰색을 시작으로 점점 짙어지면서 오른쪽 위 구석은 검은색으로 칠해져 있다. gradient-line을 나타내는 선이 그어져 있는데, 상자의 중앙을 지나서 약 45도 각도로 기울어져 있다. gradient-line과 상자의 왼쪽 아래 그리고 오른쪽 위 구석을 평행선을 이루며 그어진 선이 교차하는 지점에 gradient-line의 시작점과 끝점이 표시되어 있다.

다음에 Linear Gradient보다 비교적 덜 쓰여서 약간 생소할 수도 있는 Radial Gradients의 새 용법은 다음과 같이 쓰인다.

div { background: radial-gradient(5em circle at top left, yellow, blue); }

shape과 (혹은) size를 지정하고 position 앞에 at을 붙여준 점에 주의.
예전 여러 size keywords 중 하나로 사용되던 contain과 cover는 각각 같은 의미가 있는 closest-side와 farthest-corner가 이미 정의되어 있기 때문에 혼동을 줄이려고 더는 사용되지 않는다.

아래는 간단한 Radial Gradient의 과거 용법과 새 용법을 비교한 예.

div { background: radial-gradient(50% 50%, circle closest-side, white, black); } /* old syntax */
div { background: radial-gradient(closest-side circle at 50% 50%, white, black); } /* new syntax */

vendor prefixes를 붙여서 사용했던 예전의 gradients 용법은 웹 브라우저가 과거 호환성을 위해 계속 지원해주겠지만, 그렇지 않고 미래 호환성을 생각해서 미리 prefixes를 땐 gradients properties도 함께 정의했다면, 바뀐 용법으로 적절히 수정해줘야 할 것이다.

CSS3 관련 구체적 사용 예시와 브라우저 지원 상황은 항상 CSS3 Please!에서 챙겨보자.

꼬리표:

관련된 주제의 글

댓글을 남겨 주세요