[기본 개념] 3 | (3.1) 배경색, 배경 범위, 배경 이미지

728x90

[기본 개념] 3 | (3.1) 배경색, 배경 범위, 배경 이미지

1> 배경색과 배경 범위 지정하기

2> 배경 이미지 지정하기

3 그라데이션 효과로 배경 꾸미기

1 배경색과 배경 범위 지정하기

배경색을 지정하는 background-color 속성

배경색을 지정하려면 background-color 속성을 사용한다.

글꼴이나 글자 크기 등은 <body> 태그 선택자에서 지정하면 문서 전체에 상속되었지만 background-color값은 상속되지 않는다.

배경색의 적용 범위를 조절하는 background-clip 속성

박스 모델의 가장 외곽인 테두리까지 적용할지, 패딩 범위까지 적용할지, 내용 부분에만 적용할지 선택하려면 background-clip 속성을 사용한다.

종류	설명
border-box	가장 외곽인 테두리까지 적용 (기본값)
padding-box	테두리를 뺀 패딩 범위까지 적용
content-box	내용(콘텐츠) 부분까지 적용

2 배경 이미지 지정하기

웹 요소에 배경 이미지를 넣는 background-image 속성

기본형

background-image : url('이미지 파일 경로')

이미지를 넣을때 background-image를 사용한다.

배경을 넣을 때 요소보다 이미지 크기가 작으면 반복되며 요소의 배경을 가득 채운다.

배경 이미지의 반복 방법을 지정하는 background-repeat 속성

종류	설명
repeat	브라우저 화면에 가득 찰 때까지 가로와 세로로 반복 (기본값)
repeat-x	브라우저 화면 너비에 가득 찰 때까지 가로로 반복
repeat-y	브라우저 화면 높이에 가득 찰 때까지 세로로 반복
no-repeat	한 번만 표시하고 반복 X

배경 이미지의 위치를 조절하는 background-position 속성

기본형

background-position : <수평 위치> | <수직 위치>

<백분율> 배경 이미지의 위치를 백분율로 계산하여 맞춤

(ex. background-position : 30% 60% ; -> 배경 이미지를 왼쪽 모서리부터 가로 30%, 세로 60% 위치)

<길이 값> 배경 이미지의 위치를 직접 지정

(ex. background-position : 30px 20px ; -> 배경 이미지를 왼쪽 상단 모서리부터 가로 30px, 세로 20px 위치)

배경 이미지의 적용 범위를 조절하는 background-origin 속성

박스 모델에서 배경 이미지를 패딩이나 테두리까지 포함해서 표시하려면 background-origin속성을 사용하면 된다.

종류	설명
content-box	박스 모델에서 내용 부분에만 표시 (기본값)
padding-box	박스 모델에서 패딩까지만 표시
border-box	박스 모델에서 테두리까지만 표시

배경 이미지를 고정하는 background-attachment 속성

배경 이미지가 있는 웹 문서를 웹 브라우저에서 스크롤 막대로 조절하면 배경 이미지도 함께 이동할지 말지 정하는 background-attachment 속성이 있다.

종류	설명
scroll	배경 이미지도 스크롤 (기본값)
fixed	배경 이미지는 고정되고 내용만 스크롤

background 속성 하나로 배경 이미지 제어하기

배경 이미지 관련 속성을 background 하나의 속성으로 줄여 사용할 수 있다.

(ex. 배경 이미지 정의하기)

body {
  background-image : url('images/bg4.png');
  background-repeat : no-repeat;
  background-position : center bottom;
  background-attachment : fixed;
}

background : url('images/bg4.png') no-repeat center bottom fixed;

배경 이미지 크기를 조절하는 background-size 속성

배경을 채울 요소 크기에 비해 이미지가 너무 작거나 클 경우 background-size 속성을 사용하여 크기를 조절할 수 있다.

속성값이 하나라면 그 값은 너비로 인식하고 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산한다.

종류	설명
auto	원래 배경 이미지 크기만큼 표시 (기본값)
contain	요소 안에 배경 이미지가 다 들어오도록 이미지를 확대, 축소
cover	배경 이미지로 요소를 모두 덮도록 이미지를 확대, 축소
<크기>	이미지의 너비와 높이 지정
<백분율>	배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정 후 그 크기에 맞도록 배경 이미지를 확대, 축소

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)

728x90

'💠프로그래밍 언어 > CSS' 카테고리의 다른 글

[정리] 3 \| 배경 이미지, 선형 그라데이션, 원형 그라데이션 정리 (0)	2022.05.27
[기본 개념] 3 \| (3.2) 그라데이션 (0)	2022.05.27
[정리] 2 \| 박스 모델, 테두리, 여백, 레이아웃, 위치 지정 속성 정리 (0)	2022.05.13
[기본 개념] 2 \| (2.2) 여백 조절, 레이아웃, 위치 지정 (0)	2022.05.13
[기본 개념] 2 \| CSS 박스 모델 - (2.1) 박스 모델, 테두리 스타일 (0)	2022.05.06