HTML+CSS 기초 강의 - 32. CSS 속성 기초 4 - 배경 속성

 종류별 속성

 설명

 사용값

 background-color

배경색 지정. 웹표준 컬러코드, 또는 반투명 배경색 지정 가능.

background-color: #f8f8f8;

background-color: rgba(244,196,196,0.3);

 웹표준 컬러코드(#a8a8a8)

RGB컬러(rgb(255,255,255))

RGBA컬러(rgba(255,255,255,1))

 background-image

 배경 이미지 URL 지정

background-image: url("./bg-img.png");

 URL

 background-position

배경 이미지의 요소 내 시작 위치 지정

%, 픽셀 값으로 임의의 고정 위치를 지정하거나 가로, 세로 정렬 값으로 정렬 위치 지정 가능.

background-position: 100px 100px;

background-position: center;

background-position: left top;

background-position: 50% 50%;

 %, 픽셀, 

가로위치정렬(left, center, right)

세로위치정렬(top, center, bottom)

 background-size

배경 이미지 크기 지정

% 값으로 전체 배경을 비율로 채울 수 있음. 100%를 주면 전체 영역을 채움.

background-size: 100px 100px;

background-size:100%;

background-size:cover;

auto - 배경 이미지 크기 1:1로 출력

cover - 배경을 다 채우도록 배경 이미지 크기 조절. 배경 이미지 크기가 요소보다 크거나 같음. HTML 문서 상단이나 전체 배경으로 많이 사용됨.

contain - 배경 이미지가 다 보이도록 배경 이미지 크기 조절. 배경 이미지 크기가 요소보다 작거나 같음.

픽셀 - 이미지 크기를 고정된 픽셀 크기값으로 고정

% - 요소 크기를 기준으로 % 비율로 크기 가변 지정. 요소 크기값에 따라 자동 변경됨.

 background-repeat

배경 이미지 반복 여부 지정. 가로, 세로, 가로/세로 모두로 구분해 반복 설정 가능

background-repeat: no-repeat;

background-repeat: repeat-y;

repeat - 가로/세로 반복

no-repeat - 반복 없음

repeat-x - 가로 방향 반복

repeat-y - 세로 방향 반복

space -  가로/세로 방향으로 반복하지만 이미지가 잘리지 않는 갯수까지만 반복하고 남는 공간은 여백으로 분배해서 배경 이미지들사이를 띄움.

round - 가로/세로 방향으로 반복하지만 이미지가 잘리지 않는 갯수까지만 반복하고 남는 공간은 배경 이미지들을 키워서 채움

 background-origin

배경 이미지가 표시되는 왼쪽 위 끝 원점 위치를 지정.

background-position 으로 지정하는 위치값의 (0,0) 원점이 됨.

background-origin: content-box;

padding-box - 안쪽 여백(패딩) 영역 왼쪽 위 모서리가 원점이 됨.

border-box - 테두리선 영역 왼쪽 위 모서리가 원점이 됨.

content-box - 내용 표시영역 왼쪽 위 모서리가 원점이 됨.

 background-clip

배경색이나 배경 이미지가 표시될 수 있는 요소 안의 최대 영역 한계를 지정합니다.

background-origin 과 같은 속성 값을 사용합니다.

 padding-box - 안쪽 여백(패딩) 영역까지만 배경 이미지가 표시됨.

border-box - 테두리선 영역 까지만 배경 이미지가 표시됨.

content-box - 내용 표시영역 안쪽에만 배경 이미지가 표시됨.

 background-attachment

배경 이미지 위치를 고정할지 화면 스크롤에 따라 스크롤할지를 지정. 화면 스크롤에 따라 큰 배경 이미지가 스크롤되도록 해 동적인 효과를 줄 때 사용.

scroll - 페이지 스크롤에 따라 배경 이미지가 함께 스크롤 됨.

fixed - 배경 이미지 위치 고정.

local - 컨텐츠 내용을 스크롤바로 스크롤할 수 있는 경우 내용과 함께 배경 이미지가 스크롤 됨.