[css3] gradient (linear-gradient) 사용법

 

 

[css3] gradient (linear-gradient) 사용법

 

그동안 미루어 두었던 gradient 속성

 

어렵다고 자꾸 미루다 보니, 영엉  못 쓸 거 같아서 조금씩 다루어 보려고 해요^^

 

예전에 어느 모임에 갔다가,  초등 꼬마가 발표하는 걸 들었는데

 

코끼리를 냉장고에 넣는 법에 관한 이야기였어요.

 

코끼리를 한 번에 집어넣으려고 하면 못 넣지만,

 

조금씩 잘라서 넣으면 다 들어갈 수 있다는 얘기입니다.

 

좀 잔인한 이야기 같지만^^, 이 이야기의 교훈은

 

아무리 어렵게 느껴지는 일도 조금씩 나누어 하면, 어느새 다 할 수 있다는

 

깊은 뜻이 담겨 있습니다^^

 

그래서 정말 하기 싫고, 어려운 일이 생기면 이 우화를 떠올려 봐요.

 

그런 의미에서, gradient에 대한 완벽한 글을 쓰기보다는,

 

제가 이해한 것만 조금씩 정리하려고 해요.

 

 

 

gradient는 세 가지 종류가 있는데

 

→linear-gradient 선형 그레디언트

→radial-gradient 반지름형 그레디언트

→repeating gradient 반복형 그레디언트

 

오늘은 linear- gradient만 다루겠습니다

 

 

gradient의 뜻은 '기울어짐'의 정도나, 기온이나 압력의 '변화 비율'을 뜻합니다.

 

css에서 gradient 는 한 방향에서 다른 방향으로 색이 점차 흐려지거나, 색이 변화하는 효과를 줄 때 쓰는 속성이에요.

 

css gradient는  색상이 아닌, 크기가 없는 이미지입니다.

 

그래서 css로 색상을 지정할 때 background-color 혹은 단축 속성 background 속성을 사용했다면,

 

배경색 background-color 속성 배우기

 

background 속성(배경 전체 지정)

 

 

그레디언트를 지정할 때, background-image 속성을 사용합니다. 단축 속성 background 속성도 가능.

 

배경 이미지를 넣는 background-image 속성

 

그레디언트는 브라우저가 생성하는 것이기 때문에

이미지를 사용했을 때보다 용량이 훨씬 적고, 화면을 확대해도 이미지보다 선명하게

 

잘 나옵니다.

 

 

 

linear gradient(선형 그레디언트)

 

색상 선택(color stops)

 

우선 선을 그릴려면 색을 설정(color stop)해야 하고,

 

시작 색상, 끝 색상, 이 2가지는 필수로 선택합니다.

 

중간에 선택적으로 여러 색상을 더 넣을 수 있어요.

 

여러 가지 색상을 넣을 때 쉼표로 분리해서 적습니다

 

예> linear-gradient(orange, yellow, green)

 

색상은, 영문 색상이름, rgba, hsla 등 가능합니다.

 

[css] 색상값 단위 5가지(rgba 포함)

 

방향 또는 각도 설정

 

방향도 선택할 수 있어요. (기본값은 위에서 아래로)

 

방향을 지정할 때, 시작 지점을 생략하며, 도착 지점만  to를 사용 지정합니다.

 

→왼쪽에서 오른쪽으로 지정

 

body{background-image:linear-gradient(to right, black, #D5D5D5);}

 

→상단 오른쪽으로

 

body{background-image:linear-gradient(to top right, black, #D5D5D5);}

 

→하단 왼쪽으로

 

body{background-image:linear-gradient(to bottom left, black, #D5D5D5);}

 

 

각도 지정하기

(각도를 지정하지 않으면, 하나는 자동으로 주어진 방향에 기초하여 결정)

 

body{background-image:linear-gradient(45deg, black, gray);}

*deg는 degree의 약자

 

0deg는 아래에서 위 방향

 

45deg는 하단 왼쪽에서 상단 오른쪽 방향(즉 45도 방향임)

90deg는 왼쪽에서 오른쪽 방향

 

180deg는 상단에서 하단 방향

 

음수값도 가능함. -45deg

 

 

색상점 위치 지정하기(stop position)

 

그레디언트 축에서 색상점(color stop)의 위치를 지정할 수 있는데 %나 길이값(20px 등)도 가능 합니다.

 

body{background:linear-gradient(to right, skyblue 5%, green 20%, white);}

 

 

▶html 작성 예

 

 

<h3>linear-gradient(skyblue, white);</h3>
<div id="linear">
</div>

 

<h3>linear-gradient(to right, skyblue, white);</h3>
<div id="linear2">
</div>

 

<h3>linear-gradient(to right, skyblue 5%, green 20%, white);</h3>
<div id="linear3">
</div>

 

 

▶css

 

 

div#linear1, #linear2, #linear3{width:200px; height: 100px;}
#linear1{background-image:linear-gradient(skyblue, white);}
#linear2{background-image:linear-gradient(to right, skyblue, white);}
#linear3{background-image:linear-gradient(to right, skyblue 5%, green 20%, white );}

 

 

▶실행화면

 

1번 예제는 방향 설정 없이 색깔 두 가지만 입력했을 때 기본적인 화면입니다.

(기본값으로 상단에서 하단 방향으로 색이 점차 흐려집니다)

 

2번 예제는 방향을 왼쪽에서 오른쪽으로 설정했을 때

(시작 지점은 생략함)

 

3번 예제는, 방향을 오른쪽으로 설정하고, 세가지 색상을 쉼표로 분리하여 지정했어요.

 

각 색깔의 위치도 같이 지정할 수 있어요.

 

▶html 작성 예 2(각도 설정)

 

<h3>linear-gradient(0deg, skyblue, yellow);</h3>
<div id="linear4_1">
</div>
<h3>linear-gradient(45deg, skyblue, yellow);</h3>
<div id="linear4_2">
</div>
<h3>linear-gradient(90deg, skyblue, yellow);</h3>
<div id="linear4_3">
</div>
<h3>linear-gradient(180deg, skyblue, yellow);</h3>
<div id="linear4_4">
</div>

 

▶css

 

#linear4_1,#linear4_2,#linear4_3,#linear4_4{width:200px; height: 100px;}
#linear4_1{background-image:linear-gradient(0deg, skyblue, yellow );}
#linear4_2{background-image:linear-gradient(45deg, skyblue, yellow );}
#linear4_3{background-image:linear-gradient(90deg, skyblue, yellow );}
#linear4_4{background-image:linear-gradient(180deg, skyblue, yellow );}

 

▶ 실행화면

 

0도는 하단->상단

45도는 하단 왼쪽->상단 오른쪽

90도는 왼쪽->오른쪽

180도는 상단->하단 임

 

 

 

▶linear-gradient 브라우저 지원

 

표준 문법 : ie10.0+, chrome 26.0, firefox 16.0+, safari 6.1+, opera 12.1+

 

 

 

 

접두어 버전 : chrome 10.0+과 safari 5.1+은 -webkit- 

                   firefox 3.6+ 은 -moz- 

                  opera 11.1+은 -o-

 

IE6~8 버전 :  유효하진 않지만 작동함

 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='16진수 색상값', endColorstr='16진수 색상값');

 

IE8+ 버전: 유효함

 

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";

 

※ background-image 속성은 filter를 무시합니다. 그래서 폴백으로 사용하기에는 부적당함

 하지만 background-color 속성과 filter는 동시에 사용할 수 있습니다. 

※ filter를 통해서 alpha 투명도도 만들 수 있습니다. 

 

예

rgba(92,47,90,1) == #FF5C2F5A
 

 

브라우저 업체별 접두어(vendor prefix)

 

 

▶사용 예

 

우선 그레디언트를 지원하지 않는 브라우저를 위해, 배경 색이나, 배경 이미지를 넣어주기도하고

 

표준 문법은 맨 아래에 써 줍니다.

 

#linear-gradient{

  background-color: skyblue;  /* fallback */
  background: -webkit-linear-gradient(skyblue, white); /* Safari 5.1 ~ 6.0, chrome 10.0~25 */
  background: -o-linear-gradient(skyblue, white); /* Opera 11.1~ 12.0 */
  background: -moz-linear-gradient(skyblue, white); /* Firefox 3.6 ~ 15 */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='16진수 색상값', endColorstr='16진수 색상값'); /*IE6~8*/

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='16진주', endColorstr='16진수')"; /*IE8+*/

  background: linear-gradient(skyblue, white); /*표준 문법 */
}

 

 

 

표준 문법만 달랑 써도 되는 날이 어서 오면 좋겠습니다 ㅠ

 

위 예는 linear-graident의 기본적으로 두 가지 색상만 설정한 것인데,

 

사실 방향을 설정할 때 접두어 버전의 문법이 다르답니다.

 

자세한 예는 첨부파일을 통해 확인해 주세요.

 

browser support.txt

 

복잡하신 분은 그레디언트 생성기(자동으로 접두어 버전을 만들어주는 사이트)를 이용하셔도 좋을 거예요.

 

http://www.colorzilla.com/gradient-editor/

 

 

[참고 사이트]

 

http://www.impressivewebs.com/css3-linear-gradient-syntax/

 

http://www.w3schools.com/Css/css3_gradients.asp

 

http://css-tricks.com/css3-gradients/