[css] linear-gradient 반반무많이 2탄

안녕하세요. 플입니다.

liner-gradient를 사용할 때 주의할 점이 있어서 2탄으로 돌아왔습니다.

 

---

 1.  liner-gradient

https://ssimplay.tistory.com/239

[css] 배경색 반반 무많이

배경색 반나누는 1탄은 링크로 남겨둘게요.

---

 2.  그라데이션이 되는 이유

아 퍼센트를 조정하면 두가지색으로 나눌 수 있겠군! 하고 신나서 만들었는데 그라데이션이 된 경우가 있으신가요?

div{ background:linear-gradient( 90deg, #fff5bf 30%, #fff 70% ); }

 

이런 식으로 먼저 쓴 컬러의 퍼센트가 적다면 그라데이션이 되는 구조였더라고요. 하지만 그렇다고 색을 반대로 만들 수는 없잖아요? 사람은 항상 다른 길을 만들어내죠. 왼쪽 비중이 적은 반반무 많이 배경을 만들러 가봅시다.

 

 

---

 3.  자리 바꿔주기

div{ background:linear-gradient( 90deg, #fff 70%, #fff5bf 30% ); }

일단 퍼센트의 자리를 바꿔줍니다. 앞쪽이 70, 뒤쪽이 30으로 바꿔줘요. 색도 같이 바꿔주시는 것 잊지 마시고요!!

그러면 색이 딱 나눠 떨어지는 모습으로 일단 바뀐 게 보이시죠?

---

 4.  방향 변경

div{ background:linear-gradient( to left, #fff 70%, #fff5bf 30% ); }

그다음 각도를 적었던 부분에 to left로 그라데이션의 방향을 반대로 바꿔줍니다. 

짠 왼쪽이 적은 반반무 많이 배경이 완성되었습니다.

 

방향은 4방향 모두 가능해요.

to top / to bottom

to left / to right

 

---

그럼 이만.

총총.