속성 종류 | 설명 |
---|---|
background-color | 배경색을 지정한다. |
background-clip | 배경색이나 이미지를 어디까지 적용할지 지정한다. |
background-image | 배경 이미지를 지정한다. |
background-repeat | 배경 이미지의 반복 방법을 지정한다. |
background-position | 배경 이미지의 위치를 지정한다. |
background-origin | 배경 이미지를 배치할 기준을 지정한다. |
background-attachment | 배경 이미지를 문서에 고정한다. |
background | 하나의 속성으로 배경 스타일을 한꺼번에 지정한다. |
background-size | 배경 이미지의 크기를 조절한다. |
1) 선형 그라데이션
linear-gradient(to<방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>,...]);
속성 종류 | 설명 |
---|---|
방향 | 끝 지점을 기준으로 to 다음에 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있다. |
사용할 수 있는 예약어 : left, right, top, bottom | |
각도 | 그라데이션이 끝나는 각도를 지정한다. (값 : deg로 표기) |
색상 중지점 | , 로 색상을 구분하며 색상만 지정하거나 색상과 중지점의 위치를 함께 지정한다. |
2) 원형 그라데이션
원 또는 타원의 중심에서부터 동심원을 그리며 바깥 방향으로 색상이 바뀐다.
-> 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그라데이션의 모양을 선택해야 한다.
속성 종류 | 설명 |
---|---|
ellipse | 타원형의 그라데이션을 나타낸다. (기본값) |
circle | 원형의 그라데이션을 나타낸다. |
closest-side | 그라데이션 가장 자리가 그라데이션 중심에서 가장 가까운 측면에 닿게 한다. |
closeset-corner | 그라데이션 가장 자리가 그라데이션 중심에서 가장 가까운 꼭짓점에 닿게 한다. |
farthest-side | 그라데이션 가장 자리가 그라데이션 중심에서 가장 멀리 떨어진 측면에 닿게 한다. |
farthest-corner | 그라데이션 가장 자리가 그라데이션 중심에서 가장 멀리 떨어진 꼭짓점에 닿게 한다. |
위치 | at을 앞에 붙인 후 키워드나 백분율을 사용한다. |
색상 중지점 | , 로 색상을 구분하며 색상만 지정하거나 색상과 중지점의 위치를 함께 지정한다. |