CSS3 그라디언트 배경화면 만들기

   

안녕하세요 도롱군 입니다.

CSS3를 이용하여, 배경 등 색상을 입힐 수 있는 모든 것에 그라디언트 효과를 줄 수 있는 것은 아시나요?

또한, 키프레임을 이용하여 색상 변환이 이루어질 수 있도록 애니메이션 효과를 적용시킬 수도 있습니다.

들어가기 전, 우선적으로 CSS3를 이용하여 그라디언트를 적용하는 방법에 대해서 써보도록 하겠습니다.

그라디언트는 두가지로 나뉠 수 있습니다.

• Linear Gradients ( 상,하,좌,우,대각선 [top,bottom,left,right] )
• Radial Gradients

CSS3 웹 브라우저 호환성 참고:

	Chrome	IE	Firefox	Safari	Opera
linear-gradient	26.0 10.0 -webkit-	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
radial-gradient	26.0 10.0 -webkit-	10.0	16.0 3.6-moz-	6.1 5.1 -webkit-	12.1 11.1 -o-

Gradient Property Syntax

1:   p { 2:         background: linear-gradient(방향, 색상1, 색상2, 색상3 · · ·); 3:   } 4:

1. linear-gradient 

그라디언트는 기본적으로 2가지 이상의 색 조합으로 만들어집니다.

자연스럽게 색 전환이 이루어지며, 렌더링이 이루어져 두개의 색상 점 사이의 색을 자연스럽게 전환 시켜줍니다.

Linear Gradient는 포토샵에서 자주 쓰이는 그라디언트 속성 중 하나인 선형 그라디언트를 의미합니다.

위의 사진과 같은 방향은 left에서 right를 표현합니다, 

기본적으로 그라디언트는 CSS3 속성이기에, CSS 접두어가 사용되어야 합니다. (위의 테이블 브라우저 별 접두어를 참조하시길 바랍니다.)

Linear Gradient의 기본 방향은 위에서 아래입니다, 따라서 가로로 그라디언트를 지정하고 싶을 경우 방향 지정을 해주셔야합니다.

1.2 Linear Gradient - Diagonal (대각선)

그라디언트의 방향을 서로 다른 두 방향을 설정하고 색상 지정을 하게 되면 자연스럽게 대각선을 따라 렌더링 작업을 하게 됩니다.

기본적인 디폴트로 방향을 지정할 때, to를 꼭 기입해주셔야 합니다.

1.3 Linear Gradient - Angle (각도 설정)

기존과 같이 각도로도 그라디언트 방향을 지정할 수 있습니다.

top, bottom, left, right가 들어간 Value에 위치 대신 각도를 표현하는 값을 넣어주면 각도에 따라 렌더링 됩니다.

각도는 수치와 deg으로 설정이 가능합니다. 문법은 위의 사진을 참고하시길 바랍니다.

(색상은 CSS Color Set, HTML Color Code 외로도 RGB Value를 줄 수 있습니다[rgba으로 opacity 조절 가능])

2. radial-gradient

Radial Gradient는 중앙을 중심으로하여 바깥으로 그라디언트 렌더링이 이루어지는 색상 배치 형식입니다.

타원형, 원형 등 방사형 특징을 띄고 있습니다.

퍼센티지를 이용하여 색상 스프레드 조절이 가능합니다.

필자 또한 그라디언트를 자주 사용하는 편이고, 실제로 실무에 자주 쓰이게되기 때문에,

CSS3를 이용하여 무언가 스타일 작성을 할 때는 필수적으로 사용된다는 점을 알면 되겠습니다.

이제 해당 그라디언트를 이용하여, 좀 더 심화적으로 keyframe을 이용하여 유동적으로 색상 변화를 주는 법을

알아보도록 하겠습니다.

해당 응용하기 전, keyframe을 알아야하지만, 해당 포스팅은 차후에 따로 추가적으로 포스팅할 예정입니다.

우선은 바로 사용할 수 있도록 코드를 보여주도록 하겠습니다.

animation 속성을 이용하여 그라디언트라는 그룹에 변환 속도와 반복 명령을 주었으며,

위에서 언급된 linear-gradient 속성을 이용하여 색상을 주었습니다.

배경 사이즈를 줌으로써 그라디언트 렌더링 색상 범위를 조정할 수 있습니다.

적용된 그라디언트 애니메이션