[HTML5] 8-1 배경

배경 관련 속성

 

 

 

 

-background-color 속성

: 요소의 배경색 지정

*값 -> transparent, <색상>

 

출력:

 

 

 

 

-background-image 속성

: 요소의 배경으로 사용할 이미지 파일 지정

*값 -> none, url(파일)

*콤마로 구분해서 여러 개의 이미지 지정이 가능 -> 계층 형성

 

 

출력:

 

 

 

 

-background-repeat 속성

: 배경 이미지의 반복 여부 지정

*값 -> repeat, repeat-x, repeat-y, no-repeat, space, round

 

-space : 배경을 채우는 영역의 경계에서 이미지가 잘려 보이지 않도록 반복 이미지 간의 공백 조정

-round : 배경을 채우는 영역의 경계에서 이미지가 잘려 보이지 않도록 이미지의 크기를 재설정

 

 

 

출력:

 

 

 

 

-background-attachment 속성

: 배경 이미지를 콘텐츠 영역과 함께 스크롤되도록 할 것인지 여부 지정

*값 -> scroll, fixed, local

 

-scroll : 배경 이미지가 콘텐츠 영역과 함께 스크로로딤

-fixed : 배경 이미지는 뷰포트에 고정된 채 콘텐츠 영역만 스크롤됨

-local : 요소 내부에서 스크롤이 발생할 경우, 요소 내부의 콘텐츠 영역과 함께 스크롤됨

 

 

 

출력:

 

 

 

 

-background-position 속성

: 배경 이미지의 시작 위치 지정

*기본 위치 -> 요소의 왼쪽 상단 모서리 (0% 0% 또는 left top)

 

 

 

 

 

 

-background-origin 속성

: 배경 이미지가 시작하는 기준 위치 지정

*값 -> padding-box, border-box, content-box

 

 

출력:

 

 

 

 

-background-size 속성

: 배경 이미지의 크기 지정

 

-cover : 이미지의 폭과 높이 중에서 길이가 짧은 것을 기준으로 영역을 채움 -> 원래 크기 비율 무시

-contain : 이미지의 폭과 높이 중에서 길이가 긴 것을 기준으로 영역을 채움 -> 원래 크기 비율 유지

 

 

 

 

 

-background-clip 속성

: 배경 속성(색상, 이미지)이 적용되는 영역 지정

*값 -> border-box, padding-box, content-box

 

 

 

 

 

-background 속성

: background-* 속성의 일괄 지정

 

: 긴 속성은 생략 가능

: background-size 속성값을 사용할 때는 반드시 '/' 사용

: 이미지 파일을 여러 개 사용하면서 배경색을 지정하는 경우에는 background-color 속성값을 리스트의 맨 뒤에 위치시킴

: 한 번에 여러 개의 이미지를 지정하는 경우에는 콤마로 구분