CSS 배경 색, 배경 이미지 02

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

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

선형 그라데이션

• 수직 방향이나 수평 방향으로, 혹은 대각선 방향으로 색상이 일정하게 변하는 것
• 선형 그라데이션을 지정할 때는 방향과 색상이 필요하다.

linear-gradient(<각도> to <방향>, color-stop, [color-stop,...])

• 위 구문이 표준 구문이지만 '위치'와 '각도'를 표시하는 방법이 중간에 몇 번 바뀌다 보니 브라우저별, 버전별 사용법이 조금씩 다릅니다.

1) 방향

- [표준 구문] 끝 지점을 기준으로 'to' 키워드와 함께 사용

-[접두사 구문] 예전 모던 브라우저에서는 접두사를  사용해야 하는데, 접두사마다 방향 속성 값을 사용하는 기준이 다름

접두사	브라우저 버전	'위치' 속성 값
-webkit-	사파리 5.1 ~ 6.0	그라데이션 시작 위치 기준
-moz-	파이어 폭스 3.6~15	그라데이션 끝 위치 기준,키워드 to사용x
-o-	오페라 11.1~12.0	그라데이션 끝 위치 기준,키워드 to사용x

2) 각도

• 그라데이션이 끝나는 각도
• 단위는 deg

3) 색상 중지점

• 색상이 바뀌는 지점
• 색상만 지정할 수도 있고 색상과 함께 중지 점의 위치도 함께 지정할 수도 있습니다.