220418 CSS Chapter 9

이미지와 그러데이션 효과로 배경 꾸미기

 

- 배경 이미지 관련 속성

background-color : 배경색을 지정

background-image : 배경 이미지를 지정

background-repeat : 배경 이미지의 반복 방법을 지정

background-position : 배경 이미지의 위치를 지정

background-attatchment : 배경 이미지를 문서 특정위치에 고정함

background-size : 배경 이미지의 크기를 조절

 

background : 하나의 속성으로 배경 스타일을 한꺼번에 지정

 

 

- 원형 그러데이션 관련 속성

 

모양 

ellipse : 타원형이며, 기본값이다.

circle : 원형

 

크기

closest-side : 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 측면에 닿게 함

closest-corner : 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 꼭짓점에 닿게 함

farthest-side : 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어진 측면에 닿게 함

farthest-corner : 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어진 꼭짓점에 닿게 함

 

그라데이션 시작 위치

at을 앞에 붙인 후 키워드나 백분율을 사용함

ex) background: radial-gradient(circle at 20% 20%, white, blue);  원형 그라데이션, 20% 20% 위치, 흰색에서 파란색으로

 

색상 중지점

쉼표(,)로 색상을 구분하며, 색상만 지정하거나 색상과 중지점의 위치를 함께 지정함

 

---

출처 : Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석