6장. 백그라운드

[ 목차 ]

1. background-image 프로퍼티

2. background-repeat 프로퍼티

3. background-size 프로퍼티

4. background-position 프로퍼티

5. background-color

5. background-color

 

1. background-image 프로퍼티

1) 요소에 배경 이미지를 지정

 

 

2. background-repeat 프로퍼티

1) 배경 이미지의 반복을 지정

2) 수직, 수평 또는 수직과 수평 모두의 반복을 지정 가능

3) 설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 출력되어 화면을 채우며, 이는 background-repeat 프로퍼티의 기본 값이 repeat이기 때문

4) x축으로만 배경이미지를 반복할 경우 background-repeat 프로퍼티 값에 repeat-x값을 설정

5) y축으로만 배경이미지를 반복할 경우 repeat-y를 설정

6) no-repeat를 설정 시 반복 출력이 멈춤

7) 복수개의 이미지 삽이 시 먼저 설정된 이미지가 전명 출력

 

3. background-size 프로퍼티

1) 배경 이미지의 사이즈를 지정

2) 배경 이미지의 고유 비율을 유지하기 대문에 설정에 따라 이미지의 일부가 보이지 않을 수 있음

3) 프로퍼티 값은 px, %, cover, contain 등을 사용

4) 배경이미지의 width, height 모두 지정 가능하며 하나의 값만 지정할 경우 width를 의미하며 height는 auto로 지정

 

4. background-position 프로퍼티

1) 이미지의 좌표를 지정

2) 기본값은 0%, 0%로 배경이미지는 우축 상단에 위치

 

5. background-color

1) 요소의 배경 색상을 지정

2) 색상값 또는 reansparent 키워드를 지정할 수 있음