Chapter 09

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

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

배경색을 지정하기 위해서는 background-color를 사용하면 된다. background-color는 앞에서 사용한 16진수와 같은 값이나 색상 이름을 사용해서 지정한다. 다만, 글꼴이나 글자 크기 등은 <body> 태그 선택자에서 지정하면 문자 전체에 상속되지만, background-color 값은 상속되지 않는다. 기본적으로 모든 웹 문서 요소의 배경은 투명하므로 body 스타일로 지정한 문서 배경이 그대로 비치는 것일 뿐, 웹 요소에 배경색이 상속된 것은 아니다.

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

배경을 넣고 싶은 요소마다 속성을 입력해도 되지만, 박스 모델 관점에서 배경의 적용 범위를 조절할 수도 있다. 즉, 박스 모델의 가장 외곽인 테두리까지 적용할지, 테두리를 빼고 패딩 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택할 수 있다.

종류
설명

border-box

박스 모델의 가장 외곽인 테두리까지 적용한다. 기본값이다.

padding-box

박스 모델에서 테두리를 뺀 태딩 범위까지 적용한다.

content-box

박스 모델에서 내용(콘텐츠) 부분에만 적용한다.

09-2 배경 이미지 지정하기

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

웹 요소에 배경을 넣을 때 가장 기본적으로 알아 둘 속성은 background-image이다. 다음 기본형과 같이 url()에 파일 경로를 넣어서 사용한다.

/*기본형*/ background-image: url('이미지 파일 경로')

이미지 파일은 *.jpg, *.gif, *.png 형식을 사용하며, 파일 경로에는 작은따옴표나(' ')나 큰따옴표(" ")를 붙인다. 파일 경로는 현재 웹 문서를 기준으로 상대 경로를 지정할 수도 있고 http://로 시작하는 절대 경로를 사용할 수도 있다.

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

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

background-repeat 속성을 사용하면 배경 이미지를 가로와 세로 중에서 어떤 방향으로 반복할지 지정하거나, 반복하지 않고 한 번만 나타나게 할 수도 있다.

종류
설명

repeat

브라우저 화면에 가득 찰 때까지 가로와 세로로 반복한다. 기본값이다.

repeat-x

브라우저 화면 너비에 가득 찰 때까지 가로로 반복한다.

repeat-y

브라우저 화면 높이에 가득 찰 때까지 세로로 반복한다.

no-repeat

한 번만 표시하고 반복하지 않는다.

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

background-position 속성을 이용하면 배경 이미지의 수평 위치 또는 수직 위치의 값을 지정할 수 있다.

/*기본형*/
background-position: <수평 위치> <수직 위치>;
<수평 위치> : left | center | right | <백분율> | <길이 값>
<수직 위치> : top | center | bottom | <백분율> | <길이 값>

속성 앖을 지정한다면 첫 번째 값은 수평 위치의 값이 되고, 두 번째 값은 수직 위치의 값이다. 속성값을 하나만 지정한다면 웹 브라우저에서는 지정한 값을 수평 위칫값으로 간주하고, 수직 위칫값은 50%나 center로 간주한다.

배경 이미지의 위치를 지정하는 법

  1. 키워드

  2. 백분율(%)

  3. 크기

키워드

배경 이미지의 위치를 지정할 때 가장 많이 사용하는 속성값은 키워드이다. 수평 위치는 left, center, right 중에서 선택할 수 있고, 수직 위치는 top, bottom, center 중에서 선택한다.

백분율(%)

위치 속성값을 백분율로 표시한다는 것은, 요소가 있는 해당 위치에 배경 이미지의 위치를 백분율로 계산하여 맞춘다는 뜻이다. 예를들어 background-position: 30% 60%;라면 배경 이미지를 넣을 요소의 왼쪽 모서리로부터 가로 30%, 세로 60%의 위치에 배경 이미지의 가로 세로가 각각 30%, 60%인 위치를 맞춘다.

크기

배경 이미지의 위치를 길이로 직접 지정할 수도 있다. 예를 들어 background-position: 30px, 20px;이라고 지정하면 가로 30픽셀, 세로 20픽셀의 위치에 배경 이미지의 왼쪽 상단 모서리를 맞춘다.

?? 솔직히 예를들어 background-position: 30% 60%;라면 배경 이미지를 넣을 요소의 왼쪽 모서리로부터 가로 30%, 세로 60%의 위치에 배경 이미지의 가로 세로가 각각 30%, 60%인 위치를 맞춘다. 라는 말이 이해가 가지 않아서 직접 해봤다. image 위는 09\bg-2.html을 약간 수정한 것이다.

image 책에 나온 형태와 차이가 없다.

+ 추가 답변 정확히 말하면 책에 나온 그대로가 맞다. 배경이미지가 들어갈 요소의 x%, y% 지점에 배경 이미지의 x%, y% 지점을 맞춘다.

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

박스 모델에 패딩이나 테두리가 있따면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수도 있다. 이렇게 배경 이미지를 적용할 범위는 background-origin 속성으로 지정한다.

종류
설명

content-box

박스 모델에서 내용 부분에만 배경 이미지를 표시한다. 기본값이다.

padding-box

박스 모델에서 패딩까지 배경 이미지를 표시한다.

border-box

박스 모델에서 테두리까지 배경 이미지를 표시한다.

배경 이미지를 고정하는 background-attachmenet

배경 이미지가 있는 웹 문서를 웹 브라우저에서 열고 스크롤 막대를 위아래로 조절하면 문서 전체가 움직이므로 배경 이미지도 함께 이동한다. 하지만 background-attachment 속성을 사용하면 배경 이미지를 고정할 수 있다.

종류
설명

scroll

화면을 스크롤하면 배경 이미지도 스크롤된다. 기본값이다.

fixed

화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤된다.

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

background이라는 속성 하나로 배경 이미지 관련 속성을 하나의 속성으로 줄여 사용할 수 있다. 예를 들어 배경 이미지를 다음과 같이 정의했다면, background 속성 하나로 묶어서 쓸 수 있다.

/* example */
body {
	background-image: url('imgs/img.png');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-attachment: fixed;
}

->

body {
	background: url('imgs/img.png') no-repeat center bottom fixed;
}

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

배경을 채울 요소 크기에 비해 이미지가 너무 작거나 클 경우 background-size 속성을 사용하여 배경 이미지의 크기를 조절할 수 있다. 이 속성은 특히 화면에 배경 이미지를 가득 채워야 할 경우에도 유용하다. 속성값이 하나라면 그 값은 너비로 인식하고 놏이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산한다.

종류
설명

auto

원래 배경 이미지 크기만큼 표시한다. 기본값이다.

contain

요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소한다.

cover

배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소한다.

<크기>

이미지의 너비와 높이를 지정한다. 값이 하나만 주어질 경우 너빗값으로 인식하며, 이미지의 너비와 너빗값에 맞춘 높잇값도 자동 계산한다.

<백분율>

배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정하고, 그 크기에 맞도록 배경 이미지를 확대/축소한다.

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

선형 그라데이션

선형 그라데이션이란 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다. 이것을 만들어주는 함수는 linear-gradient인데 색상이 어느 방향으로 바뀌는지, 그리고 어떤 색상으로 바뀌는지 알려 주어야 한다. 선형 그라데이션의 기본형은 다음과 같이 지정한다.

/* 기본형 */
linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>, ... ]);

방향

그라데이션 방향을 지시할 때는 끝 지점을 기준으로 to예약어와 함께 사용된다. to 다음에는 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있다. 이때 예약어는 수평 방향을 나타내는 left와 right, 수직 방향을 나타내는 top과 bottom을 사용한다. 예를 들어 색상이 왼쪽에서 오른쪽으로 변하는 그라데이션이라면 to right로 사용한다. 그리고 왼쪽 아래에서 오른쪽 위로 변하는 그라데이션이라면 to right top 또는 to right top로 사용한다. 선형 그라데이션의 위치나 각도 옵션을 생략하면 to bottom으로 인식한다.

각도

각도는 선형 그라데이션에서 색상이 바뀌는 방향을 알려주는 방법이다. 이때, 각도는 그라데이션이 끝나는 부분이고, 값은 dg로 표기한다. css에서 각도는 맨 윗부분이 0deg이고, 시계 방향으로 회전하면서 90deg, 180deg, 270deg를 거쳐 다시 0deg로 돌아온다.

색상 중지점

2가지 색 이상의 선형 그라데이션을 만들려면 색상이 바뀌는 부분을 지정해주어야한다. 그라데이션에서 바뀌는 색을 색상 중지점color-stop이라고 한다. 색상 중지점을 지정할 때 쉼표(,)로 색상을 구분하는데 색상만 지정할 수도 있고, 색상과 함께 중지점의 위치도 함께 지정할 수 있다.

/* example */
<style>
	.grad {
		background: #06f; /*CSS3를 지원하지 않는 웹 브라우저용*/
		background: linear-gradient(to bottom, #06f, white 30%, #06f);
		/* 위에서부터 30% 위치에 색상 중지점 지정 */
	}
</style>

원형 그라데이션

선형 그라데이션이 직선 형태로 색상이 바뀌는 거라면, 원형 그라데이션은 원 또는 타원의 중심에서부터 동심원을 그리며 바깥 방향으로 색상이 바뀐다. 따라서 원형 그라데이션은 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그라데이션의 모양을 선택한다.

/* 기본형 */
radial-gradient(<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>,])

모양

원형 그라데이션에서 만들어지는 모양은 원형(circle)과 타원형(ellipse)이다. 모양을 따로 지정하지 않으면 타원형으로 인식한다.

크기

원형 그라데이션을 지정할 때 원의 크기도 정할 수 있다. 원의 모양(circle 또는 ellipse)과 크기를 나타내는 키워드 값을 함께 쓰면 되는데, 크기에서 사용할 수 있는 값은 다음과 같다.

속성값
설명

closest-side

원형이라면 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 측면에 닿을 때까지 그린다. 타원형이라면 그라데이션 중심에서 가장 가까운 요소의 가로측면이나 세로 측면에 닿을 때까지 그린다.

closest-corner

그라데이션 가장자리가 중심에서 가장 가까운 요소의 코너에 닿도록 그린다.

farthest-side

원형이라면 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어져 있는 측면에 닿을 때까지 그린다. 타원형이라면 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어져 있는 가로 또는 세로 측면과 만나도록 한다.

farthest-corner

그라데이션의 가장자리가 그라데이션의 중심에서 가장 멀리 떨어져 있는 코너에 닿도록 한다. 기본값이다.

위치

at 키워드와 함께 지정하면 그라데이션이 시작하는 원의 중심을 다르게 나타낼 수 있다. 사용할 수 있는 위치 속성값은 키워드(left, center, right 중 하나 또는 top, center, bottom 중 하나) 또는 30%, 20% 같은 백분율이다. 속성값을 생략하면 가로와 세로 모두 중앙인 center로 인식한다.

/* example */
.grad {
	background: blue;
	background: radial-gradient(circle at 20% 20%, white, blue);
}

색상 중지점

선형 그라데이션처럼 원형 그라데이션에서도 색상이 바뀌는 부분을 색상 중지점이라고 한다. 그라데이션의 색상과 어느 부분에서 색상을 바꿀지 위치도 함께 지정할 수 있다.

그라데이션을 사용한 패턴 만들기

선형 그라데이션과 원형 그라데이션은 반복해서 패턴을 만들 수 있다. 선형 그라데이션을 반복할 때는 repeating-linear-gradient를 사용하고, 원형 그라데이션을 반복할 때는 repeating-radial-gradient을 사용한다.

그라데이션을 반복해서 패턴을 만들 때는 각 색상 중지점의 위치를 적절하게 조절해야한다. 선형 그라데이션을 반복할 때는 시작 색상과 끝 색상을 명확히 구분해 줘야 중간에 섞이지 않는다. 원형 그라데이션의 경우에도 같은 방법으로 반복하는 패턴을 만들 수 있다.

/* example */
.grad1 {
background: red;
background: repeating-linear-gradient(yellow, yellow 20%, red 20px, red 40px);
}
PreviousChapter 08NextChapter 10

Last updated