![[CSS] background 색상 넣기 (그라데이션)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtxX8s%2FbtrNa4aW0Uo%2F6pYlHWMx3WC8jEzrbAHE01%2Fimg.png)
CSS의 background 색상 넣기 - 그라데이션
background-color 사용하기
HTML에서 지정한 영역 예시를 든다면 div태그로 지정된 영역에 배경을 설정할 때 background-color를 이용하여 색을 지정할 수 있습니다. style의 값으로 background-color: blue처럼 지정된 색은 직접 색의 이름으로 입력하여도 되고 RGB 값을 16진수로 표현하여 #FFFFFF처럼 줄 수도 있습니다.
See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen.
background 그라데이션 효과
선형 그라데이션
배경에 그라데이션 효과를 주고 싶은 경우 영역의 style을 background : linear-gradient(진행할 방향, 시작 색상, 중간 색상, 끝낼 색상)으로 작성하면 됩니다. 중간 색상은 생략 가능합니다. 진행할 방향은 to top, to bottom, to right, to left로 줄 수 있고 각도를 이용하여 그라데이션을 줄 수 있습니다. 각도를 주고 싶으신 경우 30 deg처럼 각도를 입력하면 됩니다.
원형 그라데이션
그라데이션을 원형으로 주고 싶다면 효과를 줄 영역의 style값을 background : radial-gradient(원의 모양, 중심 색상, 중간 색상, 원의 끝 생상)으로 설정하시면 됩니다. 원의 모양은 타원인 ellipse와 원인 circle이 오며 작성하지 않는 경우 기본 값으로 ellipse가 됩니다.
See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen.
그라데이션 반복하기
그라데이션을 반복하기 위해서 그라데이션 영역을 반복하여 만드는 방법도 있지만 영역 내에서 반복하는 방법은 repeacting을 사용하여 반복할 수 있습니다. 단순히 위에서 사용한 선형과 원형의 그라데이션에 repeating-을 붙이면 됩니다. 선형의 경우 : repeating-linear-gradient(시작 색상, 끝 색상, 그라에이션을 적용할 넓이), 원형의 경우 : repeacting-radial-gradient(원의 모양, 시작 색상, 끝 색상, 그라데이션을 적용할 넓이)로 설정할 수 있습니다.
See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen.