그러데이션 스타일

선형 그러데이션

 

• 선형 그러데이션이란 섹상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다.

linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>, ...]);

• 방향
  - 끝 지점을 기준으로 to 예약어와 함께 사용한다.
  - to 다음에는 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있다.
  - 이때 예약어는 수평 방향을 나타내는 left와 right, 수직 방향을 나타내는 top과 bottom을 사용한다.
  - 위치나 각도 옵션을 생략하면 to bottom으로 인식한다.
• 각도
  - 선형 그러데이션에서 색상이 바뀌는 방향을 알려 주는 방법이다.
  - 각도는 그러데이션이 끝나는 부분이고 값은 deg로 표기한다.
  - 각도 맨 윗부분이 0deg이고, 시계방향으로 회전하면서 90deg, 180deg가 된다.
• 색상 중지점 (color-stop)
  - 그러데이션에서 바뀌는 색
  - 색상 중지점을 지정할 때 쉼표(,)로 색상을 구분하는데, 색상만 지정할 수도 있고 색상과 함께 중지점의 위치도 함께 지정할 수이다.

 

원형 그러데이션

 

• 원 또는 타원의 중심에서부터 동심원을 그리며 바깥 방향으로 색상이 바뀐다.
• 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그러데이션의 모양을 선택한다.

radial-gradient(<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>, ...])

• 모양
  - 원형(circle)과 타원(ellipse)이다.
  - 모양을 따로 지정하지 않으면 타원형으로 인식한다.
• 위치
  - at 키워드와 함께 지정하면 그러데이션이 시작하는 원의 중심을 다르게 나타낼 수 있다.
  - 사용할 수 있는 위치 속성 값은 키워드 또는 백분율이다.
• 색상 중지점
  - 색상이 바뀌는 부분
• 크기
  - 원의 크기도 정할 수 있다.
  

  속성값	설명
  closet-side	원형이라면 그러데이션 가장자리가 그러데이션 중심에서 가장 가까운 요소의 측면에 닿을 때까지 그린다. 타원형이라면 그러데이션 중심에서 가장 가까운 요소의 가로 측면이나 세로 측면에 닿을 때까지 그린다.
  closet-corner	그러데이션 가장자리가 중심에서 가장 가까운 요소의 코너에 닿도록 그린다.
  farhest-side	원형이라면 그러데이션 가장자리가 그러데이션 중심에서 가장 멀리 떨어져 있는 측면에 닿을 때까지 그린다. 타원형이라면 그러데이션 가장자리가 그러데이션 중심에서 가장 멀리 떨어져 있는 가로 또는 세로 측면과 만나도록 한다.
  farthest-corner	그러데이션의 가장자리가 그러데이션의 중심에서 가장 멀리 떨어져 있는 코너에 닿도록 한다.

 

그러데이션을 사용한 패턴 만들기

 

• 선형 그러데이션을 반복할 때는 repeating-linear-gradient를 사용하고, 원형 그러데이션을 반복할 때는 repeating-raidal-gradient를 사용한다.