[CSS] linear-gradient 사용법 그리고 예제

 

 

소개

 

CSS 의 linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다(출처 MDN).

함수의 결과 생성되는 이미지는 이미지 요소의 한 종류이므로 이미지가 적용되는 곳에 대해서만 이를 사용할 수 있습니다. 즉 background-color 또는 color 와 같은 속성에는 사용할 수 없습니다. 

 

 

사용법 

 

linear-gradient() 함수 사용법은 다음과 같습니다. 

linear-gradient(방향_또는_각도, 색상_그리고_정지점1, 색상_그리고_정지점2, ... 색상_그리고_정지점n);

 

방향 또는 각도

미리 정의된 키워드로 표현한 그라디언트 진행 방향, 또는 진행 각도를 첫 번째 인자로 전달합니다. 이는 선택사항이나, 지정하지 않을 경우 'to bottom'이 기본값으로 적용됩니다. 'to bottom'은 아래로 진행됨을 의미합니다. 

다음은 방향 또는 각도를 지정할 때 사용하는 키워드와 그에 대응하는 각도 값을 나타낸 표입니다. 

to bottom	0deg
to right	90deg
to top	180deg
to left	270deg

 

색상 그리고 정지점

색상을 지정하고, 색상이 어느 정도 지점까지 선명하게 표시될 것인지를 수치로 지정합니다. 개수는 원하는 만큼 지정할 수 있기에 n개라고 표현을 해보았습니다. 색상을 생략하면 그라디언트로써의 의미가 없기에 꼭 써주어야 하나, 정지점은 생략 가능합니다. 정지점 생략 시에는 알아서 색상들끼리 공평하게 그라이언트가 생성됩니다.

 

 

 

사용 예

 

너비 200px, 높이 200px인 div 영역이 하나 있다고 가정하고, background-color에 liear-gradient() 함수를 다양한 방법으로 적용해보도록 하겠습니다.

 

예제 1

background-image: linear-gradient(red,yellow);

방향은 생략하였습니다. 따라서 'to bottom'이 적용되어 위에서부터 아래로 그려지는 그라디언트가 생성됩니다. 

색상은 빨강과 노랑 두 색상을 지정했으므로, 빨강에서 노랑으로 서서히 변화하는 형태의 이미지가 생성되었습니다. 정지점을 생략하였으므로 빨강과 노랑의 비율이 같습니다. 

 

예제2

background-image: linear-gradient(red 50%,yellow 50%);

이번에는 각 색상에 정지점을 지정하였습니다. 

첫번째 인자 'red 50%' 는 빨강을 50% 지점까지 표시한다, 라는 의미입니다. 

두번째 인자 'yellow 50%'는 노랑을 50% 지점부터 표시한다, 라는 의미입니다. 

두번째 이후 인자의 정지점을 어디에서부터 시작할지를 지정한다는 의미를 가집니다. 여기에서는 각각 절반씩 동일하게 정지점을 가지므로 점진적인 변화가 보이지 않고 서로 영역이 나뉜 것과 같은 결과가 나타납니다. 

 

예제 3

background-image: linear-gradient(90deg, red 20% ,yellow 80%);

첫번째 인자로 90deg를 주었습니다. 이는 오른쪽으로 진행한다는 의미입니다. 

두번째 인자 'red 20%'는 빨강을 20% 지점까지 표시한다는 의미이고, 세번째 인자 'yellow 80%'는 노랑을  80%지점부터 표시한다는 의미입니다. 결국 빨강과 노랑은 양끝 20% 만큼씩을 차지하고, 중간에 있는 60% 영역이 점진적인 변화 구간이 됩니다. 

 

예제 4

background-image: linear-gradient(red 20% ,yellow 40% 60%, cyan 80%);

'red 20%' 는 빨강을 20% 지점까지, 입니다.

'yellow 40% 60%' 은 노랑을 40% 지점부터 60%까지, 'cyan 80%'는 싸이언을 80%부터 끝까지, 라는 의미입니다.

이 경우 20~40% 구간과 60~80% 구간이 남게 되는데, 각 남는 구간은 점진적 변화를 표현하게 됩니다. 

 

예제 5

background-image: linear-gradient(45deg, red 25%, yellow 25% 50%, red 50% 75%, yellow 75%);

첫번째 인자가 45deg 입니다. 우상단을 향해 진행한다, 라는 의미입니다. 

여기에서는 빨강,노랑,빨강,노랑 순서로 동일한 비율을 적용해 정지점을 지정하였습니다. 

마지막 '예제 6'에서는 이 그라디언트 이미지의 크기를 작게 만들고, 이를 반복 출력하여 커다란 줄무늬를 만들어보겠습니다.

 

예제 6

 
background-image: linear-gradient(45deg, red 25%, yellow 25% 50%, red 50% 75%, yellow 75%);
background-size: 50px 50px;
background-repeat: repeat;
 

'예제 5' 의 그라디언트를 너비 50px, 높이 50px로 작게 만들었습니다. 그런 다음 배경 이미지(그라디언트)를 반복해 주었더니 마치 줄무늬가 만들어진 것과 같은 효과를 확인할 수가 있습니다.