[정리] 3 | 배경 이미지, 선형 그라데이션, 원형 그라데이션 정리

[정리] 3 | 배경 이미지, 선형 그라데이션, 원형 그라데이션 정리

배경 이미지 속성

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

선형 그라데이션 속성

종류	설명
방향	끝 지점을 기준으로 to 예약어 2개까지 사용 가능 (left, rignt, top, bottom)
각도	그라데이션이 끝나는 각도 지정 (deg)
색상 중지점	쉼표(,)로 색상 구분, 색상과 중지점의 위치를 함께 지정 가능

원형 그라데이션 속성

종류		설명
모양	ellipse	타원형의 그라데이션을 나타냄 (기본값)
	circle	원형 그라데이션을 나타냄
크기	closest-side	그라데이션 가장자리가 중심에서 가장 가까운 측면에 닿도록 함
	closest-corner	그라데이션 가장자리가 중심에서 가장 가까운 꼭짓점에 닿도록 함
	farthest-side	그라데이션 가장자리가 중심에서 가장 멀리 떨어진 측면에 닿도록 함
	farthest-corner	그라데이션 가장자리가 중심에서 가장 멀리 떨어진 꼭짓점에 닿도록 함
위치		at을 앞에 붙인 후 키워드나 백분율 사용
색상 중지점		쉼표(,)로 색상 구분, 색상과 중지점의 위치를 함께 지정 가능

 

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)