css background
background (단축속성)
요소의 배경을 설정
속성
background-color: 배경 색상
background-image: 하나 이상의 배경 이미지
background-repeat: 배경 이미지의 반복
background-position: 배경 이미지의 위치
background-attachment: 배경 이미지의 스크롤 여부(특성)
background-color (개별속성)
요소의 배경 색상을 지정
속성
색상: 요소의 배경 색상
transparent: 투명
background-image (개별속성)
요소의 배경 하나 이상의 이미지를 삽입
배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보임
속성
none: 이미지 없음
url("경로"): 이미지 경로(URL)
background-repeat (개별속성)
배경 이미지의 반복을 설정
속성
repeat: 배경 이미지를 수직, 수평으로 반복
repeat-x: 배경 이미지를 수평으로 반복
repeat-y: 배경 이미지를 수직으로 반복
no-repeat: 반복 없음
background-position (개별속성)
배경 이미지의 위치를 설정
속성
%: 왼쪽 상단 모서리는 0% 0%, 오른쪽 하단 모서리는 100% 100%
방향: 방향을 입력하여 위치 설정 (top, bottom, left, right, center)
단위: px, em, cm 등 단위로 지정
background-attachment (개별속성)
요소가 스크롤 될 때 배경 이미지의 스크롤 여부(특성) 설정
local 값을 사용했을 경우, overflow: [auto, scroll] 속성이 필요
속성
scroll: 배경 이미지가 요소를 따라서 같이 스크롤 됨
fixed: 배경 이미지가 뷰포트(Viewport)에 고정되어, 요소와 같이 스크롤되지 않음
local: 요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨
background-size
배경 이미지의 크기를 지정
속성
auto: 배경 이미지가 원래의 크기로 표시됨
단위: px, em, % 등 단위로 지정, width height 형태로 입력 가능, width만 입력하면 비율에 맞게 지정됨
cover: 배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐, 이미지가 잘릴 수 있음
contain: 배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐, 이미지가 잘리지 않음
background-origin
배경 이미지의 원점 위치를 지정
background-attachment가 fixed인 경우 무시됨
속성
padding-box: 배경 이미지가 'padding-box'의 좌상단 원점을 가짐
border-box: 배경 이미지가 'border-box'의 좌상단 원점을 가짐
content-box: 배경 이미지가 'content-box'의 좌상단 원점을 가짐
background-clip
배경 색상 및 이미지를 출력할 범위를 지정
속성
padding-box: 배경 이미지가 'padding-box' 범위에서만 출력
border-box: 배경 이미지가 'border-box' 범위에서만 출력
content-box: 배경 이미지가 'content-box' 범위에서만 출력
overflow(단축속성)
요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때, 내용의 보여짐을 제어
속성
visible: 넘친 부분을 자르지 않고 그대로 보여줌
hidden: 넘친 부분을 잘라내고, 보이지 않도록 함
scroll: 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함
auto: 넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함
overflow-x(개별속성)
요소의 x축(좌,우)으로 내용이 넘쳤을 때, overflow 지정
overflow-y(개별속성)
요소의 y축(위,아래)으로 내용이 넘쳤을 때, overflow 지정
opacity
요소의 투명도를 지정
속성
숫자: 0부터 1사이의 소수점 숫자