CSS linear-gradient

linear-gradient(red, orange, yellow, green, blue);

위 코드는 아래와 동일

linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

---

linear-gradient(red 10%, 30%, blue 90%);

위 코드는 다음과 같이 해석될 수 있음
10%까지는 완전한 빨간색
그러다 점점 파란색이 섞이기 시작하면서 30%가 딱 중간이 되는 지점
그리고 30%~90% 지점까지는 천천히 빨간색이 옅어지면서, 점점 파랗게 되다가
90%지점부터 남은 10%는 전부 완전한 파란색

---

위 코드들을 살펴보면 시작점이 색깔옆에 명시되어있음을 알 수 있음
red 10% 예를 들면 왼쪽과 같음
이와 마찬가지로 종료점까지 같이 명시를 할 수 있는데,
여기서 주의해야할 점이 하나 있음
예를 들어서,

background: linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);

다음과 같은 코드가 있음

위 코드는 간략시 설명하면
red,orange가 0~10%에서 서로 섞이고, orange는 10%~30%까지는 완전히 자신의 영역, 그뒤로 yellow와는 30~50%사이에서 섞이고, 50~70%까지는 완전히 자신의 영역, 그리고 yellow 또한 green과 70~90%사이에서 섞이고, 나머지 10%는 온전히 green의 영역

다시 돌아가서, 주의할 점은, 예를 들어서 orange와 yellow가 각각 30%, 50%이기 때문에 서로 섞이는게 문제가 없는데, yellow도 만약 30%일 경우, 그레디에이션이 먹히지 않음

linear-gradient(red 0%, orange 10%, orange 30%, yellow 30%, yellow 70%, green 90%);

다음과 같이 작성할 경우

정확하게 구분선이 발생하고 gradient의 효과가 없어짐을 알 수 있음
위와 같이 gradient가 발생하기 않는 부분을 색상 정지점이라고 부름

---

색을 쓰기 전에 먼저 방향을 설정할 수 있는데,
deg를 이용한 각도 직접작성과, to bottom, to right, to top, to left등이 있음
기본값은 위에 스크린샷을 보면 알겠지만 위에서 시작해(from top) 아래로 향하므로 to bottom임을 알 수 있음

각도의 기준은 우리가 평소에 보던 각도기와는 반대방향으로, 135도 처럼 보이지만, 45도임

반대로 135도로 작성하면 위와 같은 형태

---

색상 정지점이 여러개 일경우, 다음과 같음

linear-gradient(to right, red 0% 20%, orange 20% 40%, 
yellow 40% 60%, green 60% 80%, blue 80% 100%);

---

grid 예제 연습시에 화면 hover시, gradient를 이용해 구분선 보이게 하는 방법

background-image: linear-gradient(to right,
        transparent 20%,
        rgba(60, 75, 90, 0.25) 20%,
        rgba(60, 75, 90, 0.25) 80%,
        transparent 80%),
    linear-gradient(180deg, transparent 97%, #333 97%);
background-size: 80px 24px;

이렇게 하면, 양쪽 20%가 비고, 60%만 불투명한 네모를 가지는 칸이 만들어지고,
180deg로 인해 #333색의 구분선이 하나 만들어짐!

배경하나의 모양은 이렇게 생겼으나, background-size를 통해 너비 80px, 높이 24px로 해주면, 다음과 같이 변경됨

이걸 활용하여 grid예제를 만들어볼 수 있음