본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

background (배경 스타일)

최초 작성일
최종 수정일
이번 시간에는...
CSS를 이용한 HTML 페이지의 배경에 스타일을 줄 수 있는 스타일 속성을 알아봅니다. 배경의 컬러, 배경 이미지, 배경의 반복 유무, 그리고 반복 위치 지정을 살펴보고, 이 배경 스타일이 인라인 형태 또는 블럭 형태의 태그에서 어떻게 보여지는지 비교해 봅니다.

이번에는 요소에 배경을 넣는 background 속성을 알아보도록 하겠습니다. 이 background 속성은 요소의 배경 색 또는 이미지를 넣는 속성으로 웹 사이트를 최적화 하는 데에도 꼭 필요한 속성입니다.

background-color

배경의 색상을 넣는 속성입니다. 속성 값은 rgb() 또는 #으로 시작하는 HEX, 색상 이름 등이 들어 갈 수 있습니다.

background-image

배경의 이미지를 넣는 속성입니다. 이미지의 URL 주소가 들어가게 되며, 다른 주소와 마찬가지로 상대주소, 절대주소 다 가능합니다.

CSS 2.1 까지는 배경으로 들어가는 이미지의 크기를 변경할 수 없고, 이미지도 한 개만 가능합니다.

background-repeat

이 속성은 background-image로 넣은 이미지를 반복을 시킬 것인지 아닌지, 또는 가로나 세로로만 반복을 시킬 지를 결정 합니다.

사용 가능 속성

repeat
이미지가 가로 세로 바둑판 식으로 반복되어 보여줍니다.
repeat-x
이미지가 x 축(가로)로만 반복됩니다.
repeat-y
이미지가 y 축(세로)로만 반복됩니다.
no-repeat
이미지를 한 번만 보여주고 반복하지 않습니다.
inherit
부모 속성을 상속받습니다.

적용 예시

repeat
repeat-x
repeat-y
no-repeat

background-position

background-image로 넣은 이미지의 좌표 값을 정하는 속성입니다. px이나 %등의 속성이 들어 올 수 있습니다. 값은 x 축 y 축으로 두 개를 띄어쓰기로 구분하여 넣습니다.

좌표 값이 양수로 커질 수록 x 축에서는 오른쪽, y 축에서는 아래쪽으로 이동합니다. 반대로 0보다 작은 음수로 내려갈 수록 각각 왼쪽, 위쪽으로 이동하게 됩니다.

또한 단위를 %로 줄 경우, %는 이미지 사이즈를 기준으로 변환됩니다. 때문에 만약 x 축을 100%로 주게 될 경우, 이미지의 가장 오른쪽으로 보여지게 되고, 50%를 줄 경우 가운데 정렬이 됩니다. 이를 'left','center','right'로 표현 할 수 있습니다.

사용 가능 속성

px
맨 위, 왼쪽을 기준으로 px의 절대 값으로 이미지를 이동합니다.
%
이미지의 사이즈를 기준으로 상대 값으로 이미지를 이동합니다.
left, right
x 축에서 쓸 수 있는 값으로 가장 왼쪽으로 보여줄지, 가장 오른쪽으로 보여줄 지를 나타낼 수 있습니다. 각각 0%, 100%와 동일합니다.
top, bottom
y 축에서 쓸 수 있는 속성 값입니다. 가장 위에서 보여줄지, 아래에서 보여줄 지를 나타냅니다. 이 또한 각각 0%와 100%에 동일합니다.
center
x 축 y 축 둘 다 사용할 수 있습니다. 가운데 정렬이며, 50%와 동일합니다.
inherit
부모 속성을 상속받습니다.

background-attachment

이 속성은 배경이미지를 어떻게 고정할지를 정하는 속성입니다.

해당 요소에 스크롤이 있을 경우, 스크롤 하여 내용을 볼 때 배경 이미지가 내용과 같이 움직일지, 또는 배경 이미지는 고정되어 있을지 결정 할 수 있습니다.

또한, background-position의 기준 점을 뷰포트(웹 페이지 화면)로 변경할 수 있습니다.

사용 가능 속성

scroll
기본 값입니다. 요소에 고정되어있습니다.
local
요소 안 내용에 고정됩니다. 요소 안을 스크롤을 할 때, 이미지가 내부의 내용과 같이 움직입니다.
fixed
background-position의 좌표를 뷰포트(웹 페이지 화면)를 기준으로 합니다.
inherit
부모의 속성을 상속받습니다.

적용 예시

이 박스는 기본적인 scoll로 들어가 있습니다.

때문에 이 박스 내에서 스크롤이 일어나더라도, 배경의 이미지는 항상 요소에 고정되어있습니다.

이 값은 배경의 기본 값입니다. 만약 여러분이 특별히 background-attachment 속성을 주지 않는다면, 이러한 모습으로 보여질 것입니다.

이 박스는 local로 들어가 있습니다.

때문에 이 박스 내에서 스크롤이 일어날 경우, 배경 이미지는 내용을 따라 움직입니다.

이러한 동작은 속성 값을 scroll을 주더라도, 스크롤 안에 블록요소를 만들어서 준다면 구현할 수 있습니다. 하지만, 이러한 속성 만으로 쓸데없는 요소를 굳이 안 만들어도 됩니다.

background

예전 서체 속성을 font 속성으로 줄여서 지정할 수 있었습니다. 이 배경 속성 역시 background-로 시작하는 속성 들을 background 속성으로 줄여서 지정할 수 있습니다.

위의 모습과 같이 선언을 하면 됩니다. font와 마찬가지로 꼭 모든 속성들을 선언할 필요는 없지만, 대신 선언하지 않은 속성은 기본 값으로 적용됩니다. 또한, 속성의 순서는 상관 없습니다.

인라인 요소와 블록 요소의 background

여러분들은 인라인 요소와 블록 요소가 각각 어떠한 형태인지 잘 알 것입니다.

이러한 형태에 배경 이미지가 들어갈 경우, 어떻게 보여지는 지 확인해 보면서 이 장을 마무리 하도록 하겠습니다.

먼저 기본적으로 블록요소에 이미지를 주었을 때입니다. 배경 이미지를 주고 모든 방향으로 반복 시켰습니다.
이번에는 여기서부터 인라인 요소에다가 이미지를 주도록 하겠습니다. 보이는 것과 같이 줄 바꿈이 일어나면 그 형태에 따라 이미지가 채워집니다.
요점 정리
  • background-color - 배경 색상
  • background-image - 배경 이미지
  • background-repeat - 배경 이미지의 반복. 세로, 가로 또는 전체 반복
  • background-position - 배경 이미지의 위치 지정.
  • background-attachment - 요소의 스크롤시 배경이 어떻게 동작하는지 지정.

이 글이 유용하셨다면 친구들에게 공유 해주세요.