그레이디언트
그레이디언트는 두 가지 이상의 색상을 혼합하는 채색 기능입니다. 예를 들어 [그림 6-36]의 네이버 메인 페이지 메뉴를 살펴봅시다. 위에는 밝은 초록색이고 아래는 어두운 초록색으로 색이 혼합된 형태입니다.
[그림 6-36] 네이버 메인 메뉴
CSS3 이전의 웹은 그레이디언트를 지원하지 않아 [그림 6-37]처럼 포토샵과 그래픽 툴로 이미지를 그린 후 background-image 속성을 사용해 웹 페이지에 넣었습니다.
TIP_[기본 예제 6-19]와 같으 ㄴ방식을 사용하면 웹 브라우저의 버전에 상관없이 그레이디언트를 생성할 수 있습니다.
[그림 6-37] 네이버 메인 페이지 아이콘 (스프라이트)
하지만 CSS3부터는 그레이디언트 기능을 지원합니다. 약간 내용이 어려우므로 툴을 사용해 그레디언트를 만들고 간단히 분석해 봅시다.
기본 예제 6-19 그레이디언트 생성
1. 툴을 사용해 그레이디언트 코드 생성하기
httpA://www.colorzilla.com.gradient-editor/에 접속합니다. Ultimate CSS gradient Generator 페이지의 왼쪽에서 원ㅇ하는 형태의 그레이디언트를 생성한 후 오른쪽에 생성된 CSS 코드를 복사합니다.
[그림 6-36] 그레이디언트 생성기
2. 복사한 CSS코드를 사용해 HTML 페이지 만들기 복사한 CSS 코드를 붙여 넣어 다음 코드처럼 HTML 페이지를 작성합니다. 일반 코드를 보면 다음과 같은 생각이 들 것입니다.
"갑자기 외울 게 늘어났군...."
외우지 마세요. 방금 사용한 Ultimate Gradient Generator와 같은 툴로 그레이디언트를 생성하세요. Ultimate CSS Gradient Generator를 사용하면 선형 그레이디언트 이외에 원형 그레이디언트도 쉽게 생성할 수 있습니다.
[코드6-52] 선형 그레이디언트 생성
<!DOCTYPE html>
<html>
<head>
<title>CSS3 style Property Basic</title>
<style>
div {
font-family: 'Times New Roman';
height: 60px;
line-height: 60px;
text-align: center;
/* 복사해서 붙여 넣으세요. */
/* Old browsers */
background: #f85032;
/* FF3.6+ */
background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827));
/* Chrome10+ Safari5.1+ */
background: -webkit-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
/* IE10+ */
background: -ms- linear-gradient(top, #85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
/* W3C */
background: linear-gradient(to bottom, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient
( startColorstr='#f85032', endColorstr='#e73827', GradientType=0 );
}
</style>
</head>
<body>
<div>
<h1>CSS3 그레이디언트</h1>
</div>
</body>
</html>
NOTE_ 벤더 프리픽스
벤더 프리픽스(Vendor Prefix)는 글자 그대로 번역하면 공급업체 접두사를 의미합니다. 벤더 프리픽슨느 웹 브라우저 공급업체(마이크로소프트, 모질라, 구글, 애플, 오페라)에서 제공하는 실험적인 기능을 사용합니다. [코드 6-52]에서 그레이디언트 앞에 붙어있는 단어들이 벤더프리픽스입니다. 웹 브라우저마다 [그림6-39]의 벤더프리픽스가 있습니다.
[그림 6-39]
인터넷 익스플로러 -ms-
크롬 -webkit-
모질라 -moz-
애플 -wiebkit-
오페라 -o-
2011년에는 border-radius, text-shadow, box-shadow 속성 모두 벤더 프리픽스를 사용했습니다. 2016년에는 사실 인터넷 익스플로러를 제외한 자동 업데이트를 지원하는 모든 웹 브라우저에서 벤더 프리픽스 없이 그레이디언트를 사용할 수 있지만, 일부 업데이트를 하지 않으 웹브라우저도 지원할 수 있게 [코드6-52]에서는 벤더 프리픽스를 입력한 것입니다.
사실 그레이디언트를 직접 입력하는 사람은 없을 것이므로 그레이디언트와 관련된 설명 대신 간단하게 선형 그레이디언트를 분석해 봅시다.
선형 그레이디언트는 [그림 6-40]의 형태로 구성됩니다. linear-gradient () 함수에는 선형 그레이디언트가 진행될 각도와 색상 블록을 차례로 입력합니다.
색상 블록
linear-gradient(45deg, #f85032 0%, #e73827 100%)
각도 색상 위치
[그림 6-40 linear-gradient() 함수
색상 블록의 왼쪽에는 색상 단위를 오른쪽에는 퍼센트 단위를 입력해 그레이디언트 색상과 위치를 지정합니다. 색상 블록의 퍼센트 단위가 의미하는 위치는 [그림 6-41]을 참고하면 쉽게 알 수 있을 것입니다.
원형 그레이디언트를 생성할 때는 radial-gradient() 함수를 사용합니다. 하지만 내용이 너무 복잡하고 직접 입력해서 생성할 것이 아니므로 설명은 생략합니다.
