[mdn] 그레이디언트

• 그레이디언트는 image 자료형의 특별한 종류인 gradient로 나타내며 두 개 이상의 색간의 점진적 전환을 표현한다.
• 선형(linear-gradient), 방사형(radial-gradient), 각진 원형(conic-gradient) 세 종류가 있으며, 각각의 변형본으로
  계속해서 반복하는 repeating-linear(radial,conic)-gradient 함수도 있다.

1. linear-gradient (선형 그레이디언트)

  1.1 기본 선형 그레이디언트

• 가장 기본적은 그레이디언트 종류를 생성하기 위해서는 두 가지의 색만 지정하면 된다.
• 각가의색을 "색상 정지점(color stops)"이라 부른다. 최소 두 가지가 필요하지만, 제한 없이 원하는 만큼
  추가할 수 있다.

.simple-linear {
  background: linear-gradient(blue, pink);
}

  1.2 방향 전환

• 기본적으로, 선형 그레이디언트는 위에서 아래로 진행한다. 그러나 방향을 지정함으로써 그레이디언트를
  회전할 수 있다.

.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}

  1.3 대각선 그레이디언트

• 그레이디언트가 한쪽 모서리에서 다른 쪽 모서리를 잇는 대각선 방향으로 진행하도록 할 수도 있다.

.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

  1.4 각도 사용

• 더 정밀하게 방향을 지정하고 싶다면 특정 각도를 지정할 수 있다.
• 각도를 사용할 때 0deg는 아래쪽에서 위쪽으로 진행하는 선형 그레이디언트를, 90deg는 왼쪽에서 오른쪽으로, 등등
  시계 방향으로 회전한다. 음의 각도는 시계 반대 방향으로 회전한다.

.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}

  1.5 위치 지정 색상 중지

• color stop을 기본 위치에 둘 필요가 없다. 위치를 미세 조정하기 위해 각각 0, 1 또는 2%를 지정하거나 반지름 및 
  선형 그라데이션의 경우 절대 길이 값을 지정할 수 있다.
• 위치를 퍼센테이지로 지정하면 0%는 시작점을 나타낸다. 100%는 종료점을 나타낸다.

.multicolor-linear {
   background: linear-gradient(to left, lime 28px, red 77%, cyan);
}