[CSS] 09_이미지와 그라데이션 효과로 배경 꾸미기

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다.

 

01 배경색과 배경 범위 지정하기

 

1. 배경색 지정 : background-color

background-color : #008000 | rgb(0,128,0) | green;
/*16진수, rgb값, 색상이름 가능

 

2.  배경색의 적용범위 조절 : background-clip

종류	설명
border-box	박스 모델의 가장 외곽인 테두리까지 적용(기본값)
padding-box	박스 모델에서 테두리를 뺀 패딩 범위까지 적용
content-box	박스모델에서 콘텐츠 부분에만 적용

backgrond-clip : border-box | padding-box | content-box;

 

02 배경 이미지 지정

1. 웹 요소에 배경이미지 넣기 : background-image

background-image: url('이미지 파일경로')

 

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

종류	설명
repeat	브라우저 화면에 가득 찰 때까지 가로 세로 반복
repeat-x	가로로 반복
repeat-y	세로로 반복
no-repeat	한번만 표시

 

3. 배경 이미지의 위치 조절 : background-position

background-position: <수평위치> <수직위치>
수평 위치: left | center | right | <백분율> | <길이 값>
수직 위치: top | center | botton | <백분율> | <길이 값>

 

4. 배경 이미지의 적용 범위 조절 : background-origin

종류	설명
border-box	테두리까지 배경 이미지 표시
padding-box	패딩까지 배경 이미지 표시
content-box	콘텐츠 부분에만 배경 이미지 표시(기본값)

 

5. 배경 이미지 고정 : background-attachment

종류	설명
scroll	화면 스크롤시 배경 이미지도 스크롤(기본값)
fixed	화면 스크롤시 배경 이미지 고정

 

6. 배경 이미지 크기 조절 : backgrond-size

background-size : auto | contain | cover | 크기 | 백분율

종류	설명
auto	원래 배경 이미지 크기만큼 표시(기본값)
contain	요소 안에 배경 이미지가 들어오도록 함
cover	배경 이미지로 요소를 모두 덮도록 함

 

7. background 속성 하나로 배경 이미지 제어

- 여러 속성들을 background 하나로 제어 가능하다.

body {
  background: url('img.png') no-repeat center bottom fixed;
}

 

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

1. 선형 그라데이션

linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>, .....]);
linear-gradient(to right bottom, blue, white); //왼쪽 위에서 오른쪽 아래 방향

 

2. 원형 그라데이션

radial-gradient(<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>, ....])