원문: http://dev.opera.com/articles/view/31-css-background-images/

31: CSS 배경 이미지

소개

솔직하게 말해보라! 이 과정의 첫 번째 글에서부터, 여러분은 여러분의 사이트를 강렬하고 매력적으로 보이게 만드는 방법을 배우고 싶어 몸이 근질거렸을 것이다. 아마 여러분은 이미 몇 개의 글을 건너 뛰었을지도 모르겠다.

백그라운드 이미지는 여러분의 사이트를 섹시해 보이게 만드는 것이지만, 그것을 만드는 방법이 여러분이 앞에서 이미 배웠던 것에서 크게 벗어나지 않는다는 것을 알게 되면 놀랄지도 모르겠다.

이 과정의 앞 부분에서도 배웠듯이, CSS가 소개됨으로서 바뀌게 된 중요한 한 가지는 표현(보이는 것)과 시맨틱(의미하는 것)을 분리시켰다는 점이다. CSS 백그라운드 이미지는 여러분이 자유롭게 사용할 수 있는 도구 중에서도 가장 중요한 몇 가지 중 하나이다. 왜냐하면 이것은 추가적인 비용 없이 당신의 HTML의 특정 부분을 꾸밀 수 있는 방법을 제공하기 때문이다. 전에는 같은 작업을 하기 위해 저자들(바로 여러분!)이 img 태그를 사용해야만 했다.

CSS와 특히 background 속성은 당신의 HTML을 표현적인 측면에서 자유롭게 해준다. 현대적인 방법으로 만들어진 웹사이트의 경우, 새로운 디자인 및 다른 변화작업들이 훨씬 원활하게 수행될 수 있다. 모든 HTML 페이지를 새로 고쳐쓰는 대신, 스타일시트 하나만 변경함으로써 웹사이트 전체를 업데이트할 수 있다. 여러분의 웹사이트의 사이즈에 따라 이것은 상당한 비용절감을 초래할 수도 있다.

이 글에서는 CSS 백그라운드 이미지가 어떻게 작동하는가에 대한 기본적인 사항과 함께 CSS를 사용하여 백그라운드 이미지를 넣는 법, 정렬하는 법, 가로 혹은 세로로 기울이는 방법, 그리고 사이트의 성능향상을 위해 백그라운드 이미지를 CSS Sprites와 통합하는 법에 대해 소개할 것이다.

이 글의 목차는 다음과 같다:

How does it work? 어떻게 작동하는가?

백그라운드를 위한 CSS는 각기 다른 여러개의 속성으로 나뉘어져 있다. position과

color와 같은 속성들을 사용함으로써 웹페이지의 인상을 관리할 수 있다. 이 글에서는 CSS 백그라운드 이미지에 대해 자세히 알아보고, 예제로 경고 메시지를 단계별로 만들어보도록 하겠다.

먼저, 각기 다른 속성들에 대해서 조금 알아보자.

Background Properties 백그라운드 속성들

Property	Definition	Description
`background-color`	HTML 요소의 배경색을 설정	`background-color를 설정하는 방법에는 RGB값과 키워드를 포함한 여러가지가 있다.` 대부분의 사람들은 파운드/해시 기호(#)와 6개의 문자로 이루어지는 16진법을 사용한다. 처음 두 개의 문자는 빨강색의 정도를, 그 다음 두 개는 초록색 그리고 마지막 두 개는 파랑색의 정도를 각각 의미한다 —`#RRGGBB.` 많은 색상 선택 도구들은 주어진 색상의 16진법을 찾을 수 있게 도와준다. 예를 들어, 순수한 빨강색은 16진법으로 #FF0000 이다. 색상값, `transparent`, 혹은 `inherit가 유효한 값으로 사용될 수 있다.`
`image`	배경 이미지의 경로 혹은 URL을 지정	background-image는 URL을 이용하여 브라우저에게 이미지의 경로를 알려주는 것이다. 예를 들어자면; ; `url(alert.png)와 같다`. 경로는 키워드 `url` 로 시작하며, 괄호로 둘러싸여있다. 이 문법은 브라우저에게 여러분이 위치값을 알려주고 있다는 것을 이해시켜 주기 때문에 중요하다. 유효한 값으로는 `URL`, `none`, `inherit이 있다`
`repeat`	배경 이미지가 어느 방향으로 반복되는지를 나타냄.	HTML 엘리먼트의 전체 너비 혹은 높이만큼 채우기 위해, 배경 이미지는 수평 방향, 수직 방향, 혹은 양방향으로 반복되어 보여질 수 있다. 브라우저에게 배경 이미지의 반복에 대에 알려주기 위해 `background-repeat` 속성을 사용한다. 유효한 값으로는 `repeat`, `repeat-x`, `repeat-y`, `no-repeat이` 있다.
`attachment`	사용자가 스크롤 할 때 배경 이미지가 화면에 어떻게 나타나야 할 지를 설정	이미지는 컨텐츠와 함께 스크롤 될 수도, 혹은 보여지는 화면의 한 곳에 고정되어 있을수도 있다. 유효한 값으로는 `scroll`, `fixed`, `inherit이` 있다.
`position`	브라우저에게 배경 이미지의 위치를 알려줌	이미지는 해당 HTML 엘리먼트의 테두리 내에서라면 어디든지 위치할 수 있다. 시각적인 효과와 레이어링을 위해 `background-position를 이용하여 이미지를 정확한 위치에 넣을 수 있다.` 배경 이미지의 위치를 설정하는데에는 키워드와 숫자값을 사용하는 다양한 방법들이 있다. `top,` `bottom` 과 같은 키워드는 상당히 유용하면서 읽기도 쉽다. 픽셀값들은 매우 정확하지만, 변화하는 높이와 너비값에 대해서는 그렇지 못하다. 음수의 픽셀값은 이 글의 후반부에 나오는 CSS sprites를 사용할 때 유용하다. 퍼센티지와 픽셀은 이미지의 위치 설정에 있어 작동하는 방식은 서로 다르지만, 두 단위의 원점은 항상 HTML 엘리먼트의 상단 왼쪽 코너이다. 픽셀은 항상 포함되는 박스 안에서 픽셀 수 만큼 아래쪽/오른쪽을 향하여 이동시키는데 (픽셀이 음수일 경우엔 윗쪽/왼쪽 방향으로 이동시킨다), 이 때 이미지의 크기와 포함하는 박스의 크기와는 상관없이 이동시킨다. 반면에 퍼센티지는 이미지 크기와 이미지를 포함하는 박스 크기의 비율의 차이만큼 이미지를 이동시킨다. 만약 이미지와 이미지를 포함하는 박스의 크기가 같다면 퍼센티지 단위는 이미지를 이동시키지 않을 것이다. 유효한 값으로는 `length` (주로 픽셀 단위로 표기됨), `percentage` (엘리먼트의 너비에 관한 퍼센티지), 그리고 `top`, `right`, `bottom`, `left`, `center` 와 같은 키워드들이 있다. 한 가지 알아둬야 할 점은, center는 수직/수평 방향을 기준으로 한 중심을 의미하는 것이다. 또한 규칙을 작성할 때 퍼센티지와 픽셀은 섞어서 사용할 수 있지만, 키워드와 픽셀 혹은 키워드와 퍼센티지는 함께 섞어서 사용할 수 없다.
`background`	모든 속성들을 한 줄로 줄여서 표시할 수 있게 하는 축약형 속성	축약형 속성들은 정말이지 멋있다. 대부분의 개발자들은 CSS를 가능한 한 간결하게 하고 관련된 속성들을 묶기 위해 축약형을 사용한다. 여러분은 일반적인 규칙을 축약형을 사용하여 작성할 수 있고, 필요에 따라 특정 속성들을 오버라이드(override) 할 수 있다. 브라우저의 쉬운 해석을 돕기 위해, 속성들은 항상 다음의 정해진 순서대로 나열되어야 한다: `color` `url` `repeat` `attachment (very rarely used; may be omitted)` `horizontal-position` `vertical-position` 모든 속성들이 사용된 축약형의 예제(attachment는 제외)는 다음과 같다: `background: green url(logo.gif) no-repeat left top;`

Building an Alert message 경고 메시지 만들기

기본적인 문법과 관련된 사항들을 훑어보았으니, 이제 여러분이 경고 박스를 예제로 만들어 볼 차례이다. 이 예제로 배경 이미지에 대한 모든 것들을 연습할 수 있을 것이다.

The design 디자인

여러분이 만들고 싶어하는 경고 메시지의 시각적인 모형을 그래픽 디자이너가 만들어 주었다고 하자. 경고 메시지는 연한 주황색을 배경으로 사용하여 주변의 단락보다 더 돋보이는 효과를 주고 있다. 또한 왼쪽 상단으로부터 10픽셀 떨어진 곳에는 경고 아이콘을 삽입하였다.

한 가지 알아둘 점은, 모형에는 한 줄의 텍스트 밖에 없지만, 나중에 텍스트가 더 추가될 수도 있다는 점이다. 웹 개발자의 능력 중에서 가장 중요한 것 중 하나는, 디자인이 어떻게 변화 될 것인지를 내다보는 안목이다. 사이트의 예술적인 비전을 존중하는 방법 중 하나는 사이트의 런치에서부터 재디자인에 이르기까지의 일관성에 대해 생각하는 것이다. 따라서 경고 메시지는 한 줄 이상의 텍스트, 혹은 여러 단락이나 리스트, HTML 요소들로 이루어질 수도 있다. 여러분은 다양한 가능성을 염두에 두도록 노력해야한다. 이것은 코드의 재사용성을 높이고, 사이트가 가능한 한 빠르고 효율적으로 작동할 수 있게 한다. 모형은 Figure 1과 같다.

Figure 1: 그래픽 디자이너가 만든 경고 박스의 모형.

디자이너는 우리 예제를 위해 Figure 2와 같은 아이콘도 제공해주었다.

Figure 2: 경고 아이콘.

The code 코드

지금 여러분은 아마 이 글의 처음 부분에서 배운 CSS 백그라운드에 대한 지식을 바탕으로 이 경고 메시지를 어떻게 만들지에 대해 생각하고 있을지도 모르겠다. 나는 여러분이 지금 한 번 시도를 해보고, 그리고 나서 여러분이 한 것을 나의 예제와 비교해 보았으면 좋겠다.

좋다—시도해보았는가? 이제 단계별로 살펴보도록 하겠다. 각각의 스크린샷은 코드 예제와 연결되어 있어, 매 단계에서 소스 코드를 체크할 수 있다. 코드를 가지고 값을 늘리거나 줄이거나 혹은 다른 값을 넣어보는 등의 실험을 해보라. Opera Dragonfly나 Firebug와 같은 도구를 사용해서 코드를 작성하면 매 단계의 결과를 즉시 볼 수 있다.

Creating the CSS hook, or selector.

제일 먼저 경고 메시지를 위한 CSS를 넣을 alert 클래스를 만들어야 한다. 먼저, 새로운 CSS와 HTML을 개략적으로 만든 다음, CSS를 HTML 파일에 연결시킨다. 그리고 나서 다음과 같은 코드를 삽입하라:

The CSS:

.alert { ... }

The HTML:

Alert! The text of our alert message goes here.

여기에서는 alert 스타일링을 위해 id가 아닌 class를 사용하는데, 이는 페이지에 하나 이상의 경고 메시지가 추가될 수도 있기 때문이다(예를 들어, 여러개의 에러 메시지를 가진 form 요소가 있을 수 있다). HTML을 작성할 때에는 CSS를 가능한 한 유연하게 만들고 디자인에 맞추어 작성해 나가는 것이 좋다.

자, 뼈대를 잡았지만 아직까지는 그저 평범한 단락처럼 보이는데, 이것은 우리가 아직 스타일을 넣지 않았기 때문이다. 다음에서 스타일을 더해보도록 하자.

Note: 여기에서는 의도적으로 alert 클래스를 단락에만 제한하도록 하지 않았다. 즉, 경고 메시지 박스에 다른 요소들도 쉽게 추가할 수 있도록 하였다. 여러분은 CSS에 가능한 한 최대의 유연성을 주도록 해야한다.

Adding the background colour 배경색 더하기

여러분은 이미 29장 CSS로 텍스트 스타일 적용하기 강좌에서 텍스트 스타일링에 배경색을 사용하는 방법을 배웠다. HTML 요소들에 대해서도 같은 방식으로 접근할 수 있고, 시각적인 효과를 위해 배경 이미지도 함께 사용될 수 있다. 만약 배경색이 정해지거나 상속되지 않으면, 기본적으로 투명색(transparent)을 배경색으로 가진다.

주변의 텍스트보다 돋보이게 하기 위해, 경고 박스에 연한 주황색을 배경색으로 더하자. 이 때 너무 진한색은 사용하지 않는데, 왜냐하면 텍스트 색상과 배경색 사이의 대비가 일정 수준 이상이 되어야 하기 때문이다. CSS 규칙에 다음과 같은 속성을 추가하라.

.alert{background-color: #FFFFCC;}

이제 경고 박스는 Figure 3과 비슷하게 보일 것이다.

Figure 3: 배경색이 더해진 경고 박스.

Applying the background image 배경 이미지 더하기

이제 경고 메시지에 이미지를 추가하자. 아래 코드에서 볼 수 있듯이, 배경 이미지의 경로는 url() 안에 들어가야 한다. 강조된 라인을 CSS 규칙에 추가하라.

.alert{
  background-color: #FFFFCC;
  background-image: url(alert.png);
}

경고 박스는 이제 Figure 4 처럼 보일 것이다.

Figure 4: 배경 이미지가 삽입 되었지만, 반복되는 이미지는 보기에 좋지 않다.

각각의 배경 속성은 기본값을 가지고 있다는 사실을 기억하라 — 만약 여러분이 값을 지정하지 않는다면, 기본값이 적용될 것이다. 물론 여러분은 이미지가 마치 부엌 바닥의 모자이크 타일처럼 경고 박스 영역 전체에서 반복되어 보여지고 있다는 것을 알아차렸을 것이다. 무얼 없애야 할까? 배경 이미지는 기본적으로 수평/수직 방향으로 반복되게끔 되어 있다. 배경을 반복하는 것은 그래디언트와 패턴과 같이 화면이나 특정 HTML 엘리먼트를 가득 채우는 경우에는 유용하다. 하지만 이 경우에는 그렇지 않다.

Controlling background repeat 배경 반복을 다루기

Figure 5: 우리의 배경 이미지처럼, 이 타일들도 수평/수직 양 방향으로 반복된다.

스펙을 읽는 일은 분명 쉬운 일이 아니다. 하지만 스펙은 여러분들이 무수한 브라우저간의 차이들에 직접 부딪치기 이전에, CSS가 동작하는 방식에 대해서 알 수 있는 정말 좋은 것이다. W3C 스펙의 색상 및 배경 부분을 열어서 읽어보고, 배경 이미지가 반복되지 않게 하려면 어떤 키워드를 사용해야 하는지 찾아보라. 우리는 아래 예제에서 그 키워드를 사용할 것이다.

찾았는가? 배경 속성을 설명해놓은 부분을 살펴 보면 background-repeat이 있다. Value 아래에 보면 다음과 같은 모든 유효한 값들을 볼 수 있을 것이다: repeat, repeat-x,repeat-y, no-repeat, inherit. 기본적으로 (initial) 배경 이미지는 repeat(반복)으로 설정이 되어 있다. 방향에 대해서는 언급이 없는데, 이는 이미지가 수평/수직 방향으로 반복됨을 의미한다. 여러분은 아마 이미지를 수평/수직 중 어느 방향으로도 반복되지 않게 하려면 no-repeat을 사용해야 한다고 생각했었을 것이다. 다음의 강조된 라인을 CSS 규칙에 추가하라.

.alert{
  background-color: #FFFFCC;
  background-image: url(alert.png);
  background-repeat: no-repeat;
}

경고 박스는 Figure 6 처럼 보일 것이다.

Figure 6: 하나의 배경 이미지만 삽입 된 경고 박스(반복 없음)

추가적으로, 여러분은 양쪽 방향으로 반복(부엌 타일처럼)시키거나 혹은 반복시키지 않을 수 있다. 그래디언트는 종종 수평 혹은 수직 방향으로 반복한다 (Figure 7을 보라). HTML 엘리먼트의 크기를 알 필요는 없고, 다만 사용하고자 하는 그래디언트를 잘라서 그것을 여러분이 원하는 방향(수평방향의 x나 수직방향의 y)으로 반복되게 설정해주기만 하면 된다. 패턴은 주로 양방향으로 반복하고, 아이콘은 대게 반복하지 않는다. 뒤에 나오는 예제에서 background-repeat에 대해 좀 더 알아보겠다.

Figure 7: 연두색 타일이 수평 방향으로만 반복하고 있다.

저자의 웹사이트에서 가져온 실례를 살펴보도록 하자 — Figure 8를 보라.

A tiny image is tiled horizontally to create a three colour design across the top of my website.

Figure 8: 저자의 웹사이트에서 볼 수 있는 반복에 대한 예제

이 장식효과를 주기 위해 저자가 사용한 CSS는 비교적 간단하다. 저자는 repeat-x를 사용하여 배경이 수평 방향으로 반복되게 하였다:

body{background-repeat: repeat-x}

Attachment 추가

attachment 는 유저가 페이지를 스크롤 다운할 때 백그라운드가 어떻게 작동할 것인가를 지정하기 위한 속성이다. 기본값은 scroll으로, 이는 배경 이미지가 컨텐츠와 함께 스크롤하게 한다.

반대로 background-attachment를 fixed 로 설정하면 배경 이미지가 브라우저 윈도우에 붙게 되어 엘리먼트 안에 있는 컨텐츠가 스크롤이 되어도 이미지는 브라우저 내에서 계속 같은 위치에 보이게 된다. 이 같은 특성은 몇 가지 특이한 효과를 만드는데, 스크롤을 할 때 HTML 엘리먼트에 붙어 있는 것을 뚜렷히 볼 수 있다. W3C는 그들의 명세의 상태를 표시하기 위해 이 기능을 사용하는데, 예를 들면 화면 왼쪽 상단에 위치한 "W3C Candidate Recommendation" 이미지가 그러하다. 페이지를 하단으로 스크롤링해도, 이미지는 계속 왼쪽 상단에 나타나고 있음을 확인할 수 있다. 이 이미지는 body 엘리먼트에 붙어 있는 것처럼 보여지게 된다.

브라우저는 기본적으로 배경 이미지가 스크롤 되도록 설정하기 때문에, 이 단계에서 하는 설정이 시각적으로 큰 차이를 보이지는 않을 것이다. 하지만 그래도 새로운 코드를 삽입해서 이 속성이 어떻게 사용되는지 살펴보도록 하자. 강조된 라인을 CSS 규칙에 추가하라:

.alert{
  background-color: #FFFFCC;
  background-image: url(alert.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
}

Figure 9에서 볼 수 있듯이, 경고 박스는 시각적으로 앞의 예제와 큰 차이를 보이지 않고 있다.

Figure 9: 큰 차이를 볼 수 없음.

Positioning the image 이미지의 위치 정하기

위치를 정하는 일은 배경 이미지를 HTML 엘리먼트 내에서 당신이 원하는 위치—수직/수평 방향으로—에 정확히 두는 미세한 조정 작업을 말한다. 이 속성은 top, center, right, 100%, -10%, 50px, -30em와 같은 키워드와 숫자값을 사용한다.

Figure 10은 여러분이 배경 이미지의 위치를 정할 때 사용할 수 있는 여러가지 위치값들을 보여주고 있다.

Examples of possible background positions

Figure 10: 키워드, 퍼센티지, 픽셀을 사용해서 나타낸 배경 위치의 다양한 예

자, 배경이미지의 위치를 정해보자. 이미지가 왼쪽 상단 모퉁이에 위치하되 가장자리에 붙지 않게 하기 위해서, 상단과 왼쪽으로부터 각각 10 픽셀만큼의 오프셋(간격)을 줄 필요가 있다 — 이 문제는 다음의 강조된 라인을 CSS 규칙에 추가함으로써 해결될 수 있다. 지금 당장 실시하라.

.alert{
  background-color: #FFFFCC;
  background-image: url(alert.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 10px 10px;
}

첫 번째 값은 수평간격을, 두 번째 값은 수직간격을 의미한다. 이 경우에 두 값은 같다. 우리의 경고 박스는 이제 Figure 11처럼 보일 것이다.

Figure 11: 배경 이미지의 위치를 정하기 위해 background-position을 사용함.

Tip: 키워드나 숫자값 중 한 가지만 사용하는 습관을 들여라—한 곳에 두 가지를 섞어쓸 때, 구 버전의 브라우저의 경우 여러분의 선언을 무시할 수도 있다. right 와 bottom 를 사용하는 것은 각각 수평/수직 방향으로 100% 를 사용하는 것과 같은 것이다.

Using shorthand to pull the whole thing together like a pro 전문가처럼 축약형으로 규칙 표현하기

이미 보았던 것처럼, 어떤 CSS 속성들은 함께 묶어서 표현될 수 있다. 배경과 배경 관련 다른 모든 하위속성들 또한 그런 속성들 중 하나이다. 지금까지 우리가 사용했던 CSS 코드는 다음과 같이 축약형으로 재작성될 수 있다:

.alert{background: #FFFFCC url(alert.png) no-repeat scroll 10px 10px;}

팁: background의 하위속성들을 함께 묶을 때에는, 속성들을 항상 다음과 같은 순서대로 적도록 하라—이는 크로스 브라우저 호완성과 스타일시트 구성 및 관리에 있어 상당히 중요하다:

color
image
repeat
attachment
horizontal 위치
vertical 위치

이전 단계에서 작성했던 CSS를 위의 축약형으로 교체하라. 예제의 결과가 이전과 정확히 똑같아야 한다—Figure 12를 보라.

Figure 12: 축약형은 감쪽같이 잘 작동한다!

Experimenting with the code 코드 실험

CSS에 대한 모든 미묘한 차이들을 기억하는 가장 좋은 방법은 스스로 여러 옵션들을 가지고 바꿔가며 직접 해보는 것이다—예제에서 몇 가지 속성들을 변경해보고, 결과가 어떻게 바뀌는지 관찰해보라. background-position을 100% 100%로 설정하고, 그 결과가 right and bottom 키워드를 사용했을 때와 같음을 확인하라. 만약에 -5px 0값을 주면 어떻게 될까? 왜 이미지의 일부가 보이지 않게 되는걸까?

Testing for quality 품질을 위한 테스트

좋은 사용자 경험을 제공하기 위해, 테스트는 굉장히 중요하다. 여러분의 컴퓨터 상에서 사이트가 훌륭하게 보인다고 해서, 모든 사람들의 컴퓨터에서도 제대로 보이는 것은 아니다. 여러분의 경고 박스를 테스트 할 때, 다음의 기본적인 최소한의 단계는 거쳐야 한다.

경고 메시지의 텍스트 양을 늘리거나 줄여본다.
여러분의 브라우저에서 텍스트 크기를 기본적으로 2단계 이상 늘려본다. 이미지의 위치를 정하는 데에 em 단위를 사용하는 것이 더 나았었나? 이 경우에 텍스트 크기를 늘렸을 때 어떤 일이 일어나는가?
alert 클래스를 div, p, ul, strong, 또는 em과 같은 다른 엘리먼트들에도 적용시켜보라. 클래스가 좀 더 범용적으로 사용될 수 있게 하기 위해서는 어떤 점을 고쳐야 하는가?
alert div 안에 여러개의 문단과 리스트를 넣어보라—코드가 잘 작동하는가?
1 등급 브라우저들(A-등급이라고도 함) 상에서 경고 메시지가 시각적으로 잘 나타나는지 검증하라. 괜찮은 브라우저를 대상으로 코드를 작성하고, 코드가 제대로 작동하면 그 다음에 인터넷 익스플로러에서도 잘 작동하게끔 수정하기를 조언한다.

엄격한 테스팅은 CSS 작성을 배우는 과정 중 하나이다. 조금 더 신중한 자세로 배울수록, 빨리 배울 수 있을 것이다.

Sprites

사용자들은 모든 것을 원한다. 사용자들은 여러분의 사이트가 매력적이고, 쌍방향적이며, 심지어 빨랐으면 하지만, CSS 배경 이미지를 많이 사용하는 것은 상당한 속도 저하를 초래할 수 있다 — HTTP 요청을 많이 할 수록, 사이트는 더 느려질 것이다 (HTTP 요청은 여러분의 컴퓨터가 웹사이트에 접근해서 서버에게 CSS 파일이나 이미지와 같은 웹사이트를 이루는 요소들을 보내라고 요청하는 것을 말한다. 각각의 추가 요청은 사이트의 로딩 시간이 늘어남을 의미한다.) 이러한 한계를 극복하기 위해서 우리는 서로 관련있는 아이콘들을 하나의 이미지로 합치는, 이른바 CSS Sprites를 사용할 수 있다. background-position 속성은 이미지를 적당한 곳에 위치시키게 하여, 아이콘들이 CSS Spirites가 적용된 HTML 엘리먼트의 윈도우를 통해 보이도록 한다. 예를 들어 Figure 13에서, 지구 모양의 아이콘을 HTML 윈도우를 통해서 보게 하기 위해서 left top을 사용하여 이미지를 위치 시킴을 알 수 있다. 이미지의 위치를 옮겨 경고 아이콘이 나타나게 하기 위해서, 배경 위치값을 -80px 0로 변경시킬 필요가 있다. 음수의 수평값은 이미지를 왼쪽으로 이동시킨다.

Figure 13: HTTP 요청을 줄이기 위해 CSS Sprites 사용하기.
[역자 주] 왼쪽 그림: Sprite이 3개의 배경 이미지를 함께 포함하여 하나의 이미지로 만들었다. / 오른쪽 그림: 이미지의 일부분(지구 아이콘)만 HTML 엘리먼트 내에서 보여진다. 따라서 이미지를 왼쪽으로 -80px만큼 수평으로 움직인다면 경고 아이콘이 HTML 엘리먼트 내에서 윈도우(굵은 선으로 그려진 정사각형 영역)를 통해 화면에 보여질 것이다.

Note: 만약 배경 위치값으로 음수값을 사용하면, 사파리 브라우저는 해당 이미지를 반복하여 나타낼 것이다. 여러분이 no-repeat 이라고 설정해도 말이다. 이와 같은 점은 여러분이 좀 더 복잡한 레이아웃을 만들기 위해 배경 이미지를 사용하려고 할 때 꼭 기억하고 있어야 할 점이다.

A complex sprite and background image example 복잡한 sprite와 배경 이미지의 예

CSS sprite이 어떻게 효과적으로 사용될 수 있는지 살펴보도록 하자. 우리의 친절한 디자이너가 새로운 디자인 모형을 보냈다고 가정하자. 이것은 블로그의 첫 페이지에 들어갈 링크 목록에 대한 디자인으로, 이 리스트는 블로거의 링크드인 프로필, RSS 피드, 플리커 사진, 북마크에 대한 링크들을 포함하고 있다. 각각의 링크를 보고 난 후에 우리는 각각의 이미지가 중앙의 흰색에서 시작해서 상/하단의 회색에 이르기까지 그래디언트가 적용되었음을 알 수 있었고, 이 상태에서 디자이너의 추가적인 요구는 방문자가 마우스를 특정 링크 위에 올리면 이미지의 배경을 단순한 하얀색으로 바꿀 수 있냐는 것이었다—Figure 14를 보라.

List mockup

Figure 14: 새로운 디자인 모형.

로고는 마크업의 img 엘리먼트를 사용해서 추가할 수 있지만, CSS sprites를 사용하는 것이 훨씬 더 낫다. sprites는 하나의 이미지(4개의 이미지 대신)만 불러오면 되기 때문에 훨씬 빠르고, 필요한 마크업의 양을 줄임으로서 여러분의 HTML 코드를 보다 깔끔하게 만들 수 있다.

Creating the Sprite Sprite 제작하기

첫 번째 단계는 Figure 15에서 처럼, 네 가지의 로고를 잘라서 sprite 세트를 만드는 것이다.

Figure 15: sprite 세트.

또한 1 픽셀 너비의 그래디언트 조각도 잘라야 한다. 여기에선 여러분이 좀 더 잘 볼 수 있도록 하기 위해 꽤 큰 조각을 잘랐지만, 실제로는 1픽셀 너비 정도만 자르면 된다—Figure 16을 보라.

Figure 16: 그래디언트 배경을 위한 조각.

리스트를 위한 HTML은 순서없이 나열된 링크들의 리스트이다. 여기서 링크 내의 빈 span 엘리먼트를 주목하라. 여기서 텍스트가 들어가는 엘리먼트에 대해 정해진 높이와 너비값이 없다는 사실이 중요하다(나중에 큰 규모의 텍스트가 더 추가될 수도 있을지는 아무도 모르는 일이다. 혹은, 만약 사이트가 독일어로 번역된다면 어떻게 될까?) 여러분은 로고를 표시하기 위해 추가로 span 엘리먼트를 사용할 수도 있다. 또 다른 한편으로, 여러분은 HTML 안에 의미없는 마크업을 추가하고 싶지 않을 수 있다. 이 경우에 여러분은 보다 큰 사이즈의 sprite 을 사용하고 아이콘들 사이에 빈 공간을 주어야 한다. 한 가지 기억해야 할 점은 모바일 폰과 같이 저속의 접속 환경을 가진 유저들에게 이것은 보다 느린 로딩 속도를 제공한다는 것이다. 리스트를 위한 코드는 다음과 같다—이것을 HTML 템플릿에 추가하라:

     Resume   

     RSS Feed   
     Photos   
     Links

CSS 는 두 가지의 배경 이미지를 사용한다. 먼저 그래디언트 배경 이미지를 살펴보자. 이에 대해 살펴 볼 세 가지의 흥미로운 점들이 있다:

첫 번째는 이미지를 수평 방향으로 반복하게 한다(repeat-x)는 점이다. 이것은 작은 이미지 조각을 이용해서 리스트의 배경 이미지를 만드는 방법이다.
두 번째는 이미지가 수직 중앙 정렬이 되어 있다는 점이다. 여러분은 이미지가 리스트의 중앙에 자리잡길 바랄 것이다. 따라서 배경 위치(background position)를 left center라고 설정해야 한다.
마지막은, 배경 색상을 그래디언트 이미지에서 사용된 회색으로 지정한다는 점이다. 이렇게 해야, 만약 엘리먼트의 크기가 커져도 이미지가 깨져 보이지 않는다. 이런 종류의 테크닉에 대해 더 알고 싶다면 Dan Cederholm가 쓴 Bulletproof Web Design라는 책을 읽어보길 추천한다.

다음의 CSS를 새로운 CSS 파일에 추가하고, 이를 HTML 파일에 연결하라:

.navigation, .navigation li {
  margin:0; 
  padding:0;
}

.navigation li {
  border-top: 1px solid white;
  list-style-type:none;
}

.navigation li a {
  background: #E2E2E2 url(sprite_gradient_bkg.jpg) repeat-x left center; 
  padding:20px; 
  display:block ;
  font-family: Arial, Helvetica, sans-serif;
  color:#333; 
  font-size:18px; 
  text-decoration:none;
}

/* hover effects */

.navigation li a:hover, .navigation li a:focus {
  background: transparent none;
}

마지막 줄은, 사용자가 엘리먼트 위에 마우스 포인트를 올리거나 키보드 포커스를 주었을 때 아무런 배경 색상이나 이미지를 주지 않음을 뜻한다. 여기서 몇몇 분들은 내가 왜 리스트 아이템이 아닌 링크에 배경 속성을 지정했는지 궁금해 하실 것이다. 대답은, 인터넷 익스플로러 6나 이전 버전의 경우 링크 이외의 엘리먼트에 대해선 hover 와 같은 가상 클래스(pseudo classes)를 지원하지 않기 때문이다. 이와 같은 제약을 해결하기 위해서 저자는 코드를 약간 조정한 것이다.

다음으로 작은 로고들을 위한 CSS를 만든다. 늘 그랬던 것처럼, 우리의 네비게이션 모듈의 모든 span 엘리먼트에 대한 전반적인 경우에 대해 정의해나가기 시작한다. 여기에서는 모든 span 에서 사용될 이미지, 반복 여부, 배경 위치(각각이 다르므로, 여기에선 첫번째 값을 사용한다)에 대해서 설정한다. 그리고 여러분은 이를 축약형으로 나타낼 수 있다. 저자는 코드 내의 각각의 섹션들을 의미있는 덩어리로 나누기 위해서 CSS 주석을 이용한다는 점을 유념하라. 다음의 코드를 CSS 파일의 맨 끝부분에 추가하라:

/* general case */

.navigation span {
  background:url (sprite_logo.gif) no-repeat left top;
  height:15px;
  width: 15px; 
  margin-right:20px;
  display:-moz-inline-box; 
  display:inline--block;
  vertical-align: middle;
}

전반적인 경우에 대한 처리를 했으니, 예외적인 경우(혹은 각 로고가 가진 차이점)에 대해 정의 할 차례이다. 이 예제의 경우에, 변경할 것은 background-position 속성 뿐이다. 각각의 리스트 아이템은 15 픽셀씩 왼쪽으로 이동했을 때에 보이는 이미지를 갖게 되는데, 이는 각 로고의 너비가 15픽셀이기 때문이다. 다음의 코드를 CSS 파일에 추가하라:

/* exceptions */

#rss span {
  background-position: -15px 0;
}

#photos span {
  background-position: -30px 0;
}

#links span {
  background-position: -45px 0;
}

이 예제가 처음에는 어렵게 느껴질 것이다. 배경 이미지에만 포커스를 맞추도록 하라. 여기서 저자는 음수의 픽셀값을 사용했는데, 이는 배경 이미지를 왼쪽으로 끌어와 이미지의 상대적인 어떤 한 부분이 화면에 보여지도록 하기 위해서였다. 양수 값은 배경 이미지를 아래/오른쪽 방향으로 이동시키고, 음수 값은 위/왼쪽 방향으로 이동시킨다.

sprite의 위치 조정에 대해 조금 더 잘 이해하기 위해, 완성된 예제를 가지고 배경 위치를 조절해가며 실험을 해보기 바란다.

Summary 요약

이제 여러분은 CSS 배경 이미지에 대해서 이해하고, 더 나아가서 스펙을 읽는 것에도 좀 더 편해졌을 것이고, 따라서 어떤 속성에 대해 의문이 생기면 어떻게 찾아봐야 하는지에 대해서도 알게 되었을 것이다. 이 글에서 우리는 배경의 색상, 이미지, 반복, 첨부, 그리고 위치 설정에 대해 알아보았다. 또 왜 개발자들이 CSS Sprites를 사용하는지, 이러한 고급 기술을 어떻게 사용하는지에 대해서도 살펴보았다.

이미지 출처

The Tiles, by DimsumDarren
little glass tiles, by emdot

Exercise Questions 연습문제

문단의 크기는 가로 40px, 세로 180px 이고, 배경 이미지의 크기는 가로 60px, 세로 200px이다. 이미지의 전체를 모두 보게 되는가? 아니면 일부분만 보게 되는가? 이유는 무엇인가?
blockquote 요소의 하단 왼쪽에 이미지를 넣고 싶다 — 올바른 값을 다음 빈칸에 넣어라.
```
blockquote{background: yellow url(quote.png) no-repeat scroll ____ ____ ;}
```
문서 내에서 "question"이란 클래스가 적용된 각각의 h2 엘리먼트에 대해 그래디언트 패턴을 적용하고 싶다고 하자. 여러분은 아래와 같은 예제를 만들기 위해 repeat-x, repeat-y, no-repeat, 혹은 repeat 속성을 사용하겠는가? 이유는 무엇인가?
3번 문제의 예제에서 배경 위치(background position)값은 무엇일까? 배경 크기가 변화하는 경우에도 깨져 보이지 않게 하기 위해 여러분은 어떤 창의적인 방법으로 배경 색을 지정할 것인가? 이것이 왜 중요한가?
모든 배경 속성을 없애기 위해 어떤 축약형이 사용될 수 있는가?
CSS sprites을 사용하는 이유가 무엇인가?

About the author

Picture of the article author Nicole Sullivan

Nicole Sullivan은 CSS 성능 전문가로, 캘리포니아에 살고 있다. 2000년도부터 경력을 쌓기 시작했는데, 그 당시 (W3C 직원이기도 했던) 미래의 남편이 그녀에게 웹사이트가 검증되지 않으면 밤에 잠을 잘 수 없었다고 말한것이 계기가 되었다. 그녀는 이 "검증" 일이 무엇인지 알아내는 편이 좋겠다고 생각했고, 표준에 대한 애정이 싹텄다.

그녀는 능력을 인정 받았고, 대형 웹사이트가 점차 많아짐에 따라 그녀는 온라인 마케팅 비지니스 분야에서 계속 일을 했다. SFR, Club Med, SNCF, La Poste, FNAC, Accor Hotels, Renault 와 같은 유명한 수 많은 유럽 및 세계적인 브랜드를 위해 CSS 프레임워크 솔루션을 제작해주었다.

Nicole은 현재 야후!의 Exceptional Performance 그룹에서 일하고 있다. 이 그룹에서 그녀는 연구를 하고, 성능 우수 사례들을 전파하는 역할을 맡고 있으며, 다른 프론트-엔드 엔지니어(F2E)들이 보다 나은 사이트를 제작할 수 있게 도와주는 YSlow와 같은 툴도 제작한다. www.stubbornella.org에 가면 표준, 그녀의 강아지 그리고 객체지향 CSS를 위한 그녀의 생각을 적은 글들을 볼 수 있다.

Pongdang Pongdang

Wednesday, July 13, 2011

오페라 웹표준 강좌 번역 -- 31: CSS 배경 이미지