linear-gradient

• 선형 그라데이션
• 수직이나 수평 또는 대각선 방향으로 일정하게 변하는 것을 말함
• 색상이 어느 방향으로 바뀌고, 어떤 색상으로 바뀔 지 정해주어야 함
  linear-gradient(<각도> to <방향>, color-stop, [color-stop, ...]) : 끝 지점을 기준으로 "to" 키워드와 함께 사용

title	desc
to top	오른쪽 아래에서 시작해 왼쪽 위로 그라데이션
to left	오른쪽에서 왼쪽으로 그라데이션
to right	왼쪽에서 오른쪽으로 그라데이션
to bottom	왼쪽 위에서 시작해 오른쪽 아래로 그라데이션

• 각도: 색상이 바뀌는 방향을 알려주는 방법. 그라데이션이 끝나는 각도이고, 값은 "deg"로 표기. (0deg(위)부터 시계방향으로 90deg, 180deg)

• 색상 중지점(color-stop): 선형 그라데이션을 만들기 위해서 바뀌는 부분의 색을 지정해 주어야 하는데, 바뀌는 지점을 색상 중지점이라고 함. 색상만 지정할 수도 있고, 색상과 함께 중지 점의 위치로 지정할 수 있음. (제일 앞에 repeating을 추가하여 패턴만들기도 할 수 있음)
  ex) background: linear-gradient(to bottom, #06f, white 30%, #06f); 아래 방향으로 #06f색상으로 시작하여, 30%지점에 white, 다시 #06f
  

radial-gradient

• 원형 그라데이션
• 원이나 타원의 중심부터 동신원을 그리면 바깥 방향으로 색상ㅇ니 바뀜.
• 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고, 그라데이션의모양을 지정해야 함
  radial-gradient(<최종모양> <크기> at<위치>, color-stop, [color-stop, ...]);
• 색상중지점(color-stop)
• 모양: circle(원형), ellipse(타원형)
• 크기: closet-side / closet-corner / farthest-side / farthdst-corner
• 위치: at키워드(키워드값: left, center, right 중 하나 / top, center, bottom 중 하나) / 30%, 20% 와 같은 백분율 사용. 생략할 경우 center로 인식함