[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "CSS-셋째마당: 09.이미지와 그러데이션 효과로 배경 꾸미기"

09-1 배경색과 배경범위 지정하기

배경 이미지 관련 속성

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

 

선형 그러데이션 관련 속성

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

 

원형 그러데이션 관련 속성

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

 

 

---

 

 

출처

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB