CSS3 - Background Images

CSS3의 뛰어난 배경 제어 능력

CSS3는 배경을 제어하는 부분이 있어서 더 발전되고 폭넓은 툴들을 제공하고 있습니다.

만약 최근에 이 업계로 접어든 개발자라면 선배 웹 개발자들이 겪었던 어려움에 대해 잘 모를테지만 현재의 CSS의 새로운 기능(예를 들어 둥근 모서리, 드롭 쉐도우, 그라디언트와 같은 특징들...) 덕분에 배경 이미지를 다양하게 표현할 수 있게 되었기 때문에 과거의 비효율적이고 불편했던 기억들로 인해 더 이상 몸서리칠 일이 줄어들 것입니다.

아직 보편적으로 사용하기에 시기상조일지 모르지만 현실에 안주하기 보다 창조적이고 실험적인 기능을 다루는데 주저하지 않기를 바랍니다.

background-clip과 background-origin

background-clip

background-clip 속성을 이해하려면 박스 모델의 법칙에 대해 살펴봐야 합니다.

간략하게 박스모델에 대해 알고 싶다면 사양서(http://www.w3c.org/TR/CSS2/box.html)를 살펴보기 바랍니다.

background-clip 속성은 기본적으로 박스 모델에서 어느 부분을 배경이 커버할 것인지를 결정합니다. 

속성으로 사용할 수 있는 값들은 다음과 같습니다.

background-clip 속성값

• border-box : 기본값으로 배경이 보더, 그 안의 패딩^[각주:1] 그리고 요소의 콘텐츠 영역 모두를 커버한다. 그러나 배경은 항상 보더 층의 아래에 오게 된다는 점에 유의하기 바란다. 기본적인 불투명 보더인 경우 배경이 시각적으로 해당 요소의 보더 부분을 침범하지 않는다.
• padding-box : 배경이 패딩과 요소의 콘텐츠 영역만 커버하도록 한다. 그래서 요소의 보더 영역을 침범하지 않는다.
• content-box : 배경이 콘텐츠 영역만 커버하도록 한다. 그러면 패딩 영역은 투명하게 된다.

DEMO VIEW 

background-origin

background-origin 속성은 배경 이미지가 어느 위치에서 시작되어야 하는지를 지정합니다.

즉, background-position에서 top, left의 위치가 정확하게 어디인가를 나타냅니다.

css

#example1 {
    background:url(img_flwr.gif);
    background-repeat: no-repeat;
    padding:35px;
    background-origin: content-box;
}

background-origin 속성값

background-clip과 같은 값을 취합니다. 그리고 초기 값은 padding-box 입니다.

DEMO VIEW

background-clip & background-origin 지원 현황

IE9, IE12	4.0	4.0	3.0	10.5

background-size(배경의 크기)

background-size 속성은 어떤 방식으로든지 배경 이미지들의 크기를 조정할 수 있는 기능을 가지고 있습니다.

이 속성은 길이 값 두 개를 수용하는데 첫 번째 값은 가로 너비를 나타내고, 두 번째는 높이를 나타냅니다.

만약 하나의 길이만 주어진다면 너비로 인식하여 적용됩니다. 이때 높이는 자동으로 산출되는데 이미지의 가로 세로 비율(aspect ratio)을 기준으로 산출됩니다.

길이를 명시할 때는 픽셀 값만으로 한정되지 않고 백분율 또는 그 외 unit 단위로 자유롭게 표현할 수 있어서 상황에 따라 적용할 수 있습니다.

background-size 속성값

• auto
• length
• percentage(%)
• cover : 배경 이미지를 통째로 사용하는 현대의 디자인 트렌드 덕분에 관심을 받게 되었으며 요소 전체를 덮고 싶을 때 이 키워드를 사용하면 그대로 표현할 수 있다. 이때 이미지의 가로 세로 비가 유지되며, 컨테이너의 치수에 따라 auto 100% 혹은 100% auto와 같은 의미이다.
• contain : 배경 이미지를 가능한 크게 만든다. 이미지의 가로 세로 비율을 유지하면서 컨테이너의 안쪽에 잘 들어맞도록 이미지의 너비와 높이를 조정한다. 즉 "항상" 배경 이미지 전체가 보이게 된다.

background-size 지원 현황

IE9, IE12	4.0	4.0	4.1	10.5

• perfix를 이용하여 Chrome 1.0, Safari 3.0 -webkit-, FF 3.6 -moz-, Opera 10.0 -o- 를 이용하여 지원할 수 있다.

DEMO VIEW

배경의 단축 속성 이해하기

background 속성의 단축형에 관한 문법을 알아봅니다.

이 부분에 대해서는 새로 나온 것, 예전에 사용되던 것, 그리고 이를 결합한 것까지 모든 경우의 수를 고려해야 하기 때문에 다소 복잡하게 느껴질 수 있습니다.

배경을 스타일링하는 속성들은 다음과 같습니다.

css

div {
    background-image: url(image.jpg);
    background-position: 0 -100px;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-origin: border-box;
    background-clip: padding-box;
    background-color: #333;
}

위 속성들은 다음 구문을 사용하여 단축 속성으로 표현될 수 있습니다.

css

/*
 * bg-image bg-position / bg-size bg-repeat bg-attachment bg-origin bg-clip
 */

div {
    background: url('image.jpg') 0 -100px / contain no-repeat fixed border-box padding-box #333;
}

위 구문은 스페이스로 구분되는 값들을 가진 비교적 기본적인 것입니다.

그러나 사선(/)은 약간의 설명이 필요할 수 있습니다.

• 사선은 background-position 과 background-size의 값을 분리합니다. background-position과 background-size를 모두 사용할 때 background-size는 단축 구문에 포함될 수 있습니다. 반면 background-position은 단독으로 사용될 수 있습니다. 즉 둘 다 쓰거나 background-position 만 쓰면 됩니다.
• background-origin과 background-clip의 두 box 값들은 만약 값이 하나만 명시될 경우 이 값은 두 속성에 적용되고 두 개의 값이 따로 명시될 경우는 처음 값이 background-origin이고 두 번째 값이 background-clip 입니다.
• 나머지 값들은 순서에 큰 상관이 없고 또 만약 필요하지 않은 경우에는 생략이 가능합니다.
  

참고 링크

1. CSS3 w3c-ref-background

Jaehee's e-room

1. 콘텐츠와 보더 사이의 여백 [본문으로]