거의 막바지에 바뀐 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!에서 챙겨보자.

꼬리표:

관련된 주제의 글

댓글을 남겨 주세요