[CSS] 2. CSS 속성 - 배경 속성

배경 관련 속성

속성	설명
background-color	요소의 배경색 지정 <색상>, transparent
background-image	요소의 배경으로 이미지 파일 지정 url('URL'), none
background-repeat	배경 이미지의 반복 여부 지정 repeat, repeat-x, repeat-y, no-repeat, space, round
background-attachment	스크롤에 따른 배경 이미지의 움직임 여부 지정 scroll, fixed, local
background-position	배경 이미지의 시작 위치 지정 <x키워드 y키워드>, <x% y%>, <xpos ypos>
background-clip	배경 속성이 적용되는 영역 지정 border-box, padding-box, content-box
background-origin	배경 이미지가 시작하는 기준 위치 지정 padding-box, border-box, content-box
background-size	배경 이미지의 크기 지정 auto, <폭 높이>, <폭% 높이%>, cover, contain
background	배경 관련 속성(background-*)의 일괄 지정

background-color 속성

　▷ 요소의 배경색 지정

　　 ＊ 값 → transparent(기본. 배경을 투명하게 지정), <색상>

background-image 속성

　▷ 요소의 배경으로 사용할 이미지 파일을 지정
　　 ＊ 값 → none, url(URL)

background-repeat 속성

　▷ 배경 이미지의 반복 여부를 지정
　　 ＊ 값 → repeat(기본), repeat-x, repeat-y, no-repeat, space, round

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

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

background-attachment 속성

　▷ 배경 이미지를 콘텐츠 영역과 함께 스크롤되도록 할 것인지의 여부 지정
　　 ＊ 값 → scroll(기본), fixed, local
　　　　☞ scroll → 배경 이미지가 콘텐츠 영역과 함께 스크롤되도록 지정
　　　　☞ fixed → 배경 이미지는 뷰포트에 고정되어 있고 콘텐츠 영역만 스크롤되도록 지정
　　　　☞ local → 요소 내부에서 스크롤이 발생할 경우, 요소 내부의 콘텐츠 영역과 함께 스크롤되도록 지정

background-position 속성

　▷ 배경 이미지의 시작 위치를 지정
　　 ＊ 기본 위치 → 요소의 왼쪽 상단 모서리

background-origin 속성

　▷ 배경 이미지가 시작하는 기준 위치를 지정
　　 ＊ 값 → padding-box(기본), border-box, content-box

background-clip 속성

　▷ 배경 속성(색상, 이미지)이 적용되는 영역을 지정
　　 ＊ 값 → border-box(기본), padding-box, content-box

background-size 속성

　▷ 배경 이미지의 크기를 지정

　　　　☞ cover → 이미지의 폭과 높이 중에서 길이가 짧은 것을 기준으로 영역을 채움(원래 크기 비율 무시)
　　　　☞ contain → 이미지의 폭과 높이 중에서 길이가 긴 것을 기준으로 영역을 채움(원래 크기 비율 유지)

background 속성

　▷ background-* 속성을 일괄적으로 지정

　　　background: -color -image -position / -size -repeat -origin -clip -attachment

　　 ＊각 속성은 생략 가능
　　 ＊background-size 속성의 값은 반드시 '/'를 사용해서 표시
　　 ＊배경 이미지를 여러 개 사용하면서 배경색을 지정하는 경우 background-color 속성의 값을 리스트의 맨 뒤에 위치시킴
　　 ＊한 번에 여러 개의 배경 이미지를 일괄적으로 지정하는 경우에는 콤마로 구분