배경 - 그라데이션 효과

목차

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

① 그라데이션은 크기가 없는 배경 이미지이므로 background-image나 background 속성에서 사용
② 그라데이션 속성은 표준화 됨
③ 하지만 구형 모던 브라우저에서는 브라우저 접두사를 붙여야 동작함

    <style>
       	         .grad{
				background : blue; /*그라데이션을 지원하지 않는 브라우저용*/
				background : -webkit-linear-gradient(left top, blue, white);
                		/*-webkit- 사파리 5.1~6.0 */
				background : -moz-linear-gradient(right bottom, blue, white);
                		/*-moz-  파이어폭스 3.6~15 */
				background: -o-linear-gradient(right bottom, blue, white);
                		/* -o- 오페라 11.1~12.0 */
				background: linear-gradient(to right bottom, blue, white);
			}
    </style>

 

2) 선형 그라데이션

① 수직 방향이나 수평 방향 또는 대각선 방향으로 색상이 일정하게 변하는 것
② 선형 그라데이션 지정 시 방향과 색상 필요
③ 기본형 liner-gradient (<각도> to <방향>, color-stop, [color-stop,...]);
※ 위 구문이 표준 구문이지만 ‘위치’와 ‘각도’를 표시하는 방법이 중간에 몇 번 바뀌다 보니 브라우저별, 버전별 사용법이 조금씩 다름
④ 방향 : 끝 지점을 기준으로 ‘to’키워드와 함께 사용

to top       아래에서 시작해 위로 그라데이션이 생성

to left       오른쪽에서 시작해 왼쪽으로 그라데이션이 생성

to right     왼쪽에서 시작해 오른쪽으로 그라데이션이 생성

to bottom  위에서 시작해 아래로 그라데이션이 생성

⑤ 각도 - 그라데이션이 끝나는 각도 단위는 deg. 12시가 0도로 시작해서 시계방향으로 증가함

⑥ 색상 중지점(color-stop) - 색상이 바뀌는 지점 색상만 지정할 수도 있고 색상과 함께 중지점의 위치도 지정할 수 있음

 

 

3) 원형 그라데이션

① 원이나 타원의 중심부터 동심원을 그리며 바깥 방향으로 색상이 바뀌는 그러데이션
② 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그러데이션의 모양을 지정해야 함.
③ 기본형 radial-gradient(<최종 모양> <크기> at <위치>, color-stop, [color-stop...])
④ 모양
- 원형 그라데이션에서 만들어지는 모양은 circle(원형)과 ellipse(타원형)
- 따로 지정하지 않으면 ellipse로 인식
⑤ 위치
- 그라데이션이 시작하는 원의 중심 지정
- ‘모양‘, ‘크기‘ 속성 다음에 at 키워드와 함께 위치 값 지정
- 사용 가능한 값 : 키워드(left, center, right나 top, center, bottom)나 백분율

⑥ 크기 : 그라데이션의 크기 지정

속성 값	설명	예
closest-side	[원] 그라데이션 가장자리가 그라데이션 중심에서 가 장 가까운 모서리와 만남 [타원] 그라데이션 중심에서 가장 가까운 요소의 수평 축이나 수직축과 만남
closest-corner	그라데이션 가장자리가 그라데이션 줌심에서 가장 가 까운 요소의 코너에 닿도록 함
farthest-side	[원] 그라데이션 가장자리가 그라데이션 중심에서 가 장 먼 모서리와 만남 [타원] 그라데이션 가장자리가 그라데이션 중심에서 가장 먼 모서리와 만남
farthest-corner	그라데이션 가장자리가 그라데이션 중심에서 가장 먼 코너에 닿도록 함

⑦ 색상 중지점 - 색상이 바뀌는 지점 색상만 지정할 수도 있고 색상과 함께 중지점의 위치도 지정할 수 있음

 

4) 그라데이션 반복

① 단순히 그라데이션을 반복하는 것이 아니라 패턴을 반복함

② 선형 그라데이션의 반복은 repeating-linear-gradient 사용

③ 원형 그라데이션의 반복은 repeating-radial-gradient 사용