[CSS] background gradient

2023.12.15 - 1차 수정 / 설명 수정 및 추가

---

-참고 (https://developer.mozilla.org/ko/docs/Web/CSS/gradient/linear-gradient)

 

 

0. gradient

단색	gradient , 최소 2개 이상의 색이 섞임

- 이하 그라디언트로 표기

 

---

1. css 속성 - background-image

- 이미지를 배경으로 사용할 수 있는 속성

- background-color 는 색상(단색), background-image 는 이미지

- 그라디언트는 이미지 취급

- 그냥 background 로 사용가능

              background: linear-gradient(to right, rgba(255, 0, 0, 0) 60%, #2199e8);

              background-image: linear-gradient(to right, rgba(255, 0, 0, 0) 60%, #2199e8);

 

---

2. background: linear-gradient()

- 그라디언트를 배경 이미지로 지정

 

(1). background: linear-gradient(#E8B5FF, #B4EAF6);

      - 첫번째 색(위) -> 두번째 색(아래)

 

(2). background: linear-gradient(to right, #E8B5FF,  #fff , #B4EAF6);

      - 색 앞에 방향을 설정

        to right, to left, top, bottom

      - 첫번째 색(좌) -> 두번째 색(중앙) -> 세번째 색(오른쪽)

 

(3). background: linear-gradient(45deg, #E8B5FF, #B4EAF6);

      - 색 앞에 각도를 설정

 

(4). background: linear-gradient(to right,  #E8B5FF,  #fff  50%, #B4EAF6 80%);

      - 색상의 범위를 지정

      - 전체 영역(100%) 중 원하는 만큼 퍼센트를 색상 뒤 기재