[CSS] 이미지와 그라데이션 효과

1. 배경 이미지 관련 속성

속성 종류	설명
background-color	배경색을 지정한다.
background-clip	배경색이나 이미지를 어디까지 적용할지 지정한다.
background-image	배경 이미지를 지정한다.
background-repeat	배경 이미지의 반복 방법을 지정한다.
background-position	배경 이미지의 위치를 지정한다.
background-origin	배경 이미지를 배치할 기준을 지정한다.
background-attachment	배경 이미지를 문서에 고정한다.
background	하나의 속성으로 배경 스타일을 한꺼번에 지정한다.
background-size	배경 이미지의 크기를 조절한다.

---

2. 그라데이션 효과로 배경 꾸미기

1) 선형 그라데이션

• 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다.

linear-gradient(to<방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>,...]);

속성 종류	설명
방향	끝 지점을 기준으로 to 다음에 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있다.
	사용할 수 있는 예약어 : left, right, top, bottom
각도	그라데이션이 끝나는 각도를 지정한다. (값 : deg로 표기)
색상 중지점	, 로 색상을 구분하며 색상만 지정하거나 색상과 중지점의 위치를 함께 지정한다.

---

2) 원형 그라데이션

• 원 또는 타원의 중심에서부터 동심원을 그리며 바깥 방향으로 색상이 바뀐다.

  -> 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그라데이션의 모양을 선택해야 한다.

속성 종류	설명
ellipse	타원형의 그라데이션을 나타낸다. (기본값)
circle	원형의 그라데이션을 나타낸다.
closest-side	그라데이션 가장 자리가 그라데이션 중심에서 가장 가까운 측면에 닿게 한다.
closeset-corner	그라데이션 가장 자리가 그라데이션 중심에서 가장 가까운 꼭짓점에 닿게 한다.
farthest-side	그라데이션 가장 자리가 그라데이션 중심에서 가장 멀리 떨어진 측면에 닿게 한다.
farthest-corner	그라데이션 가장 자리가 그라데이션 중심에서 가장 멀리 떨어진 꼭짓점에 닿게 한다.
위치	at을 앞에 붙인 후 키워드나 백분율을 사용한다.
색상 중지점	, 로 색상을 구분하며 색상만 지정하거나 색상과 중지점의 위치를 함께 지정한다.