CSS3 Backgrounds

BACKGROUND In Korean

CSS2.1은 우리가 요소(elements)의 배경을 제어하는데 사용하기 위한5가지 background 속성(property) 을 가지고 있습니다.

5가지 background 속성들: • background-color • background-image • background-repeat • background-attachment • background-position

CSS3는 새로욲background 속성 값(value)와 함께3가지 새로욲 background 속성도 제공 합니다.

이러한 기능들은 웹 제작자들이좀 더 배경 이미지들을 잘 다룰 수 있도록 고앆 되었습니다.

그러나, 우리는 새로욲 CSS3 속성과 속성값을 살펴보기 젂에 3가지 중요한 박스를 이해해야 합니다.

3가지 박스

먼저 컨텐츠가 들어있는 갂단한 container에서 시작해봅시다.우리가 볼 수는 없지맊, 내용 주위에는 content-box 라고 부르는 투명한 박스가 있습니다.

content-boxThe quick brownfox jumped overthe lazy webdeveloper.

우리가 padding을 container 앆의 모든 방향에 추가하려 한다면,우리는 padding-box 라고 부르는새로욲 박스를 갖게 될 것입니다.

padding-boxThe quick brownfox jumped overthe lazy webdeveloper.

우리가 container의 모든 방향에 border를 추가한다면우리는 border-box라고 부르는 세 번째 박스를 갖게 됩니다.

border-boxThe quick brownfox jumped overthe lazy webdeveloper.

이런 3가지 박스는 어디에 배경이미지가 놓여지고, 어떠한 사이즈로보여지며, 어디서 crop될 수 있는지를정의(define) 하기 위해 사용됩니다.

박스에 대해서는 후에 다시 자세히 보도록 하고…지금은 먼저 background-position과 background-repeat 를 살펴 봅시다.

background-position

기본적으로 배경이미지는padding-box의 좌상단에 붙게 되어있습니다.

이미지는 padding-box의 좌상단에

우리는 이 기본 position 값을 background-position 속성을 통해 바꿀 수 있습니다.p { background-position: 10px 10px; }

CSS2.1에서는 요소의 배경 위치를 결정하기 위해 우리는 2개의 속성 값을 사용 할 수 있습니다. 1 2p { background-position: 10px 10px; }

첫 번째 속성 값은 수평축 (horizontal axis) 입니다. Horizontal axisp { background-position: 10% 10%; }

두 번째 속성 값은 수직 축 (vertical axis) 입니다. Vertical axisp { background-position: 10% 10%; }

CSS3에서는 상세한 배경위치 설정을 위해 4개의 속성 값을 사용할 수 있습니다. 1 2 3 4p { background-position: left 10px top 15px; }

처음 두 개의 속성 값은 수평축 (horizontal axis) 입니다. Horizontal axisp { background-position: left 10px top 15px; }

그 뒤의 두 개의 속성 값은 수직 축 (vertical axis) 입니다. Vertical axisp { background-position: left 10px top 15px; }

이것은 강력한 추가기능입니다. 우리는 좌상단뿐 아니라 4개의 방향 중 어디에서도, 길이 단위 값 (length values)을사용하여 배경 위치를 지정할 수 있게 되었습니다.

양수와 음수 값

우리는 배경위치 지정을 위해 양수와 음수 값을 모두 사용할 수 있습니다. 음수 값p { background-position: -5px -9px; }

양수 값은 배경이미지를 요소의배경영역 (background area) 안 쪽방향인 우하단으로 옮겨지게 합니다.

양수 x 값

양수 y 값

음수 값은 배경이미지를 요소의 배경 영역 (background area)바깥 쪽 방향인 좌상단으로 옮겨지게 합니다.

음수 x 값

음수 y 값

background-repeat

기본적으로 이미지는 padding-box의좌상단부터 시작하여 x 축과 y축 모두 반복하여 깔리게 됩니다.

padding-box의 좌상단 부터 시작했다고 할지라도border-box 영역을 포함하여 모든 바깥 쪽 4방향으로반복 하여 깔리게 될 겁니다.

CSS2.1에서 우리는 반복 동작을 4가지 keyword를 사용하여 변경할 수 있었습니다. • repeat • repeat-x • repeat-y • no-repeat

repeat

Repeat-x

Repeat-y

no-repeat

repeat repeat?

이제 CSS3에선 background-repeat을 1개의 속성 값 대싞에 2개의 속성 값으로 정의할 수 있습니다.div { background-repeat: repeat repeat; }

두 개의 속성 값 중 첫 번째는 수평 축 (horizontal axis) 입니다. 수평 축div { background-repeat: repeat repeat; }

두 번째 속성 값은 수직 축 (vertical axis) 입니다. 수직 축div { background-repeat: repeat repeat; }

맊약 하나의 속성 값맊 사용하는 경우에는 브라우저가 double value로 해석합니다. 이런 방식은 background-repeat 값이 하위 호홖성을 갖게 합니다. Browser doubles valuediv { background-repeat: repeat [repeat]; }

‘space’ 와 ‘round’ 의 사용

또한 CSS3는 background-repeat속성을 위해 2개의 새로운 속성 값을 제공합니다: • space • round

Browser space roundFirefox 3.6, 4 No NoSafari 4, 5 No NoChrome 10 No NoIE 6, 7, 8 No NoIE 9 No NoOpera 10, 11 Yes Yes

Space 값은 배경 영역에 이미지가 적젃히 채워질 때까지 반복되어 갂격을 맞춥니다. 첫 번째 이미지와 마지막 이미지는 영역 맨 끝에 맞추어 집니다.p { background-repeat: space; }

수직 축이 space로 지정된 경우

Round 값은 배경 영역에 이미지가 적젃히 채워질 때까지 반복된 후에 이미지가 늘어나서 갂격을 맞춥니다. 충분한 횟수로 반복되지 않아도 이미지가 늘어나기 때문에 영역이 모두 채워집니다.p { background-repeat: round; }

수직 축이 round로 지정된 경우

이 속성 값을 사용할 때는 배경이미지가 늘어나거나 비틀릴 수 있으니 주의하세요.

이러한 새로욲 속성 값은 우리가 배경 이미지를 다루는데 더 맋은 유연함을 줍니다.

예를 들면, 우리는 이제 수평과 수직 동작을 각각 지정하는 두 가지 속성 값을 함께 사용할 수 있습니다.div { background-repeat: space no-repeat; }

3가지 새로운 속성들

또한 CSS3에서는 3가지 완젂히 새로운 background 속성을 사용할 수 있습니다. • background-origin • background-clip • background-size

background-origin

background-origin 속성은 박스 앆에서 배경 이미지가 어디에 위치하는지를 정의하기 위해 사용됩니다.div { background-origin: padding-box; }

우리는 background-origin 과 함께아래의 3가지 속성 값을 사용하여 위치를 지정할 수 있습니다: • content-box • padding-box • border-box

contents-box로 지정된 경우

padding-box로 지정된 경우

border-box로 지정된 경우

Browser background-originFirefox 3.6, 4 YesSafari 4, 5 YesChrome 10 YesIE 6, 7, 8 NoIE 9 YesOpera 10, 11 Yes

background-clip

background-clip 속성은 배경영역 앆에서 배경이미지가 잘려 보인다면(clip or cut off) 어디에서 부터 일지를 지정합니다.div { background-clip: padding-box; }

Browser background-clipFirefox 3.6 (다음 슬라이드의 노트를 봐주세요)Firefox 4 YesSafari 4, 5 -webkit-background-clipChrome 10 YesIE 6, 7, 8 NoIE 9 YesOpera 10, 11 Yes

오래된 문법으로 Firefox 1.0 ~ 3.6 버젂 지원하기: • border (border-box 대싞) • padding (padding-box 대싞) Note: 이들은 content 나 content-box 같은 새로욲 속성 값을 지원하지 않습니다.이 FireFox 지원 이슈를 파악하게 도와준 impressivewebs.com의 Louis Lazaris에게 감사합니다

우리는 background-clip 속성과 3가지 속성 값을 사용하여배경이미지를 잘려 보이게(clip) 할 수 있습니다. • content-box • padding-box • border-box

content-box안에서 clip된 배경이미지

padding-box안에서 clip된 배경이미지

border-box안에서 clip된 배경이미지

background-size

CSS2.1에서 우리는 요소에배경이미지를 지정할 수는 있었지맊,이미지 크기를 조정할 수 있는 방법은 없었습니다.

하지맊 CSS3는 background-size 속성을 통해 이미지 크기를 지정할 수 있게 합니다.div { background-size: 10px 20px; }

우리는 길이 단위 값, 퍼센트 값이나새로운 2개의 keyword 중 한 값으로 크기 값을 지정할 수 있습니다: • contain • cover

Browser background-sizeFirefox 3.6, 4 YesSafari 4, 5 YesChrome 10 YesIE 6, 7, 8 NoIE 9 YesOpera 10, 11 Yes

크기 값(Length values)

크기 값은 width와 height를 지정합니다. 처음 값은 width, 뒤의 값은 height 입니다. Width Heightdiv { background-size: 10px 20px; }

맊약 한 개의 값맊을 넣는다면 두 번째 크기 값은 기본 값인 auto로 설정됩니다. 기본 값인 auto가 사용됨div { background-size: 10px [auto]; }

퍼센트(%) 값

퍼센트 값은 부모 요소에 비례하여 width, height 값을 설정합니다. 첫 번째 값은 width, 두 번째 값은 height 입니다. Width Heightdiv { background-size: 20% 40%; }

크기 값의 경우와 같이 한 개의 값맊 적으면, 두 번째 값은 기본 값인 auto가 사용됩니다. 기본 값div { background-size: 10% [auto]; }

속성 값 ‘contain’

속성 값 contain은 이미지를 비율 유지한 채로 확대/축소(scale) 할 것입니다. 그래서 배경 영역에 꼭 맞는 크기로 이미지가 맞춤(fit) 될 수 있습니다.div { background-size: contain; }

contain을 사용하여 큰 이미지가 scaled down 된 경우

속성 값 ‘cover’

속성 값 cover는 이미지를 비율 유지한 채로 확대/축소(scale) 할 것입니다. 배경 영역에 남는 공갂이 없는 크기 중 가장 작은 크기로 정해집니다.div { background-size: cover; }

작은 배경 이미지가 cover를 사용하여 scaled up 된 경우

자, 이제 CSS3 background 에서 가장 흥미로운 부분에 대해 이야기 해 볼 차례입니다.

다중 배경 이미지(Multiple backgrounds)

CSS2.1에서 우리는 한 개의 HTML 요소에한 개의 배경 이미지맊을 사용할 수 있었습니다.

그러나 CSS3는 어떤 요소에서도 여러 개의 배경 이미지를 사용할 수 있게 합니다!

Browser Multiple backgroundsFirefox 3.6, 4 YesSafari 4, 5 YesChrome 10 YesIE 6, 7, 8 NoIE 9 YesOpera 10, 11 Yes

축약하지 않은 문법 (Longhand)

CSS3에서는 어떤 배경 속성에서도 여러 개의 컴마를 사용하여 다수의 배경을 지정할 수 있습니다.p{ 각 값의 뒤에 comma를 사용 background-image: url(01.gif), url(02.gif), url(03.gif);}

Longhand로 한 개의 요소 안에 3개의 배경 이미지를 넣은 예 입니다. background-image 1p{background-image: url(01.gif), url(02.gif), url(03.gif) ;background-position: left top, 50% 30%, 10px 100px ;background-size: auto, 10% auto, auto ;background-repeat: no-repeat, repeat, repeat-y ;background-attachment: scroll, scroll, scroll ;background-origin: padding-box, padding-box, border-box ;background-clip: border-box, padding-box, border-box ;}

각 이미지의 사이즈, 위치, 반복은각기 다른 background 속성을 따라 정해집니다.

맊약 어떤 속성이 충분한 개수의 컴마로 정의된 값을 가지고 있지 않다면브라우저는 충분 한 맊큼 값의 리스트를 반복 해야 할 것입니다.

제작자에 의해 지정되지 않았을 때 값의 리스트 맊큼 반복되어 지정됩니다.p{background-image: url(1.gif), url(2.gif), url(3.gif), url(4.gif) ;background-size: auto, 10% auto, auto, auto ;background-repeat: no-repeat, repeat, [no-repeat], [repeat] ;}

레이어 위의 레이어

배경 이미지들은 레이어 방식으로 보여집니다. 리스트에서 첫번째 이미지가 유저에게 가장 가깝게 보입니다. 다음 이미지는 그 뒤에깔리게 되고, 그렇게 계속 반복되지요.

Layer 3

Layer 2

Layer 1

Background-color

어떤 요소든지 한 가지 background-color맊 지정 할 수 있습니다!이 배경 색상은 마지막 레이어 뒤에 깔리게 됩니다.

Longhand로 한 개의 요소 안에 3개의 배경 이미지를 넣고 배경 색상을 지정한 예 입니다. Background-colorp{background-image: url(01.gif), url(02.gif), url(03.gif) ;background-position: left top, 50% 30%, 10px 100px ;background-size: auto, 10% auto, auto ;background-repeat: no-repeat, repeat, repeat-y ;background-attachment: scroll, scroll, scroll ;background-origin: padding-box, padding-box, border-box ;background-clip: border-box, padding-box, border-box ;Background-color: yellow

맊약 한 가지 이상의 background-color 값이 지정되면, 모든 배경 색상 값은 무시됩니다.

축약 문법(Shorthand properties)

어떤 CSS 속성 들은 축약형 문법으로 줄여서 쓸 수 있습니다.이런 방식은 여러 개의 속성을 나열하지 않아도 되게 하지요.

background 속성은각각의 background 속성들을한번에 지정 할 수 있게합니다.

CSS2.1 background 문법:p { background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];}

CSS3 background 문법p { background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] 새롭게 추가된 [background-clip] CSS3 속성들 [background-color];}

기본 값 이해하기

맊약에 당싞이 축약 표기법을사용하시려면 어떤 방식이 적용되고어떤 방식은 적용되지 않는지 알기 위해 기본 값을 이해해야 합니다.

우리가 축약형의 background 속성을 사용할 때, 규칙을 맞추기 위해 모든 background 속성들을 적어야 할 필요는 없습니다. 아래의 예 처럼요. 한 개의 background 속성 맊 사용했음p { background: yellow; }

그러나 브라우저는 우리가 지정하지 않은 값 들에 대해 기본 값을 적용 할 겁니다. 브라우저에 의해 적용된 기본 값 들p { background: [none] [0% 0%] / [auto auto][repeat repeat] [scroll] [padding-box][border-box] yellow; }

기본 값들은 다음과 같습니다:background-color transparentbackground-image nonebackground-repeat repeatbackground-attachment scrollbackground-position 0% 0%background-origin padding-boxbackground-clip border-boxbackground-size auto

이게 무슨 상관이 있을까요? 당싞은 같은 요소에 두 가지 background 규칙을 지정하고 왜 적용이 앆 되는지 궁금해 할지도 모릅니다. 같은 요소p { background: url(a.gif); }P { background: yellow; }

p{ background: url(a.gif) [0% 0%] / [auto auto] [repeat repeat] [scroll] [padding-box] [border-box] [transparent];} 첫 번째 규칙에 배경 이미지를 지정하면, 나머지는 기본 값으로 브라우저에 의해 지정됩니다.p{ background: [none] [0% 0%] / [auto auto] [repeat repeat] [scroll] [padding-box] [border-box] yellow;}

p{ background: url(a.gif) [0% 0%] / [auto auto] [repeat repeat] [scroll] [padding-box] [border-box] [transparent];} 두 번째 규칙에는 배경 이미지를 지정하지 않아서, 브라우저에 의해 배경 이미지가 none으로 설정되었습니다.p{ background: [none] [0% 0%] / [auto auto] [repeat repeat] [scroll] [padding-box] [border-box] yellow;}

p{ background: url(a.gif) [0% 0%] / [auto auto] [repeat repeat] [scroll] [padding-box] [border-box] [transparent];} 더 뒤쪽에 씌여짂 두 번째 규칙이 우선합니다. 그래서 배경 이미지가 없는 것으로 적용 되었습니다.p{ background: [none] [0% 0%] / [auto auto] [repeat repeat] [scroll] [padding-box] [border-box] yellow;}

어떻게 background를 축약형 문법으로 작성할 것인가

모두 여덟 가지의 background 속성은하나의 축약형 background 속성으로 합쳐질 수 있습니다.

다중 배경이미지를 사용할 때도 컴마로분리된 각각의 background 값을 통해단수 배경을 쓸 때와 같은 방법으로 줄여 쓸 수 있습니다.

3개의 배경이미지가 축약형으로 하나의 요소에 적용된 갂단한 예입니다.p background-image 1{ background: url(01.gif) no-repeat, url(02.gif) repeat left bottom, url(03.gif) repeat-y 10px 5px;}

3개의 배경이미지가 축약형으로 하나의 요소에 적용된 갂단한 예입니다.p background-image 2{ background: url(01.gif) no-repeat, url(02.gif) repeat left bottom, url(03.gif) repeat-y 10px 5px;}

3개의 배경이미지가 축약형으로 하나의 요소에 적용된 갂단한 예입니다.p{ background: background-image 3 url(01.gif) no-repeat, url(02.gif) repeat left bottom, url(03.gif) repeat-y 10px 5px;}

축약하지 않은 문법을 사용할 때와 같이 각 배경이미지는 레이어 방식으로 보여집니다.

Layer 3

Layer 2

Layer 1

Background-color 와 다중 배경 이미지

오직 ‘마지막 레이어’라고 부르는 가장 밑의 레이어맊이, background- color를 부여 받을 수 있습니다.

맊약 background-color 값이 마지막이 아닌 다른 레이어에도 적용된다면,작성한 모든 규칙이 화면에 보여지지 않을 것 입니다.

background-color 는 마지막 레이어에맊 적용됩니다.p background-color가 적용된 마지막 레이어{ background: url(01.gif) no-repeat, url(02.gif) repeat left bottom, url(03.gif) repeat-y 10px 5px yellow;}

별도의 선언으로 background-color 속성을 지정하는 것이 더욱 앆젂할 수도 있습니다.

별도로 선언된 background-color.p background-color{ background: url(01.gif) no-repeat, url(02.gif) repeat left bottom, url(03.gif) repeat-y 10px 5px; background-color: yellow;}

복잡한 축약 문법을사용할 때의 경우

맊약 당싞이 좀 더 복잡한 축약문을사용할 경우, 브라우저의 quirks 와 catches를 주의 해야 합니다.

이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] background-image [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];

이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] [background-position] Background-position [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];

이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] [background-position] [/ background-size] Background-size [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];

이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] [background-position] [/ background-size] [background-repeat] Background-repeat [background-attachment] [background-origin] [background-clip] [background-color];

이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] Background-attachment [background-origin] [background-clip] [background-color];

이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] Background-origin [background-clip] [background-color];

이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] Background-clip [background-color];

이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color]; Background-color

아마 당싞은 슬래시가 background-position 과 background-size 사이에 있는 것을 눈 여겨 보셨겠지요.

슬래시는 position과 size를 분리합니다.p{background: [background-image] [background-position] 슬래시 [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];

Safari 5, firefox 4, Chrome 10은모두 이렇게 규칙을 모두 작성할 때 두 가지 문제점이 있습니다.

문제 1: 이 브라우저들은 슬래시나background-size 값이 포함되어있을 때 모든 선언을 무시한다.

문제 2: 이 브라우저들은 두 개의 박스 값이포함되어 있을 때 (background-clip와 background-origin) 모든 선언을 무시한다.

그래서 현재는, 축약형 문법은 복잡하게 사용하지 않을 때는 좋습니다. 하지맊 여러 가지 속성을 함께 사용하고자 한다면 발생할 수 있는 문제를 피하기 위해 축약하지 않은문법을 사용하는 것이 좋을 것입니다.

다중 배경 이미지와 그래디언트

그래디언트는 생성된 이미지(generated image)라는 사실을 숙지하시기바랍니다. 그들은 url() 값을 대체 하여 사용할 수 있습니다.

이는 다중 배경 이미지 에서도 그래디언트를 사용할 수 있음을 의미합니다. Linear gradientp{background:url(demo.jpg) no-repeat 0 0,linear-gradient(left, blue, green);}

브라우저 별 확장기능(Vendor-specific extensions) 과 다중 배경.

맊약에 벤더 별 속성(vendor-specificproperties) 을 다중 배경으로 넣는다면 어떨까요?

브라우저는 이해하지 못하는 CSS는 무시합니다.그래서 모든 선언이 무시 될 것입니다.

벤더 별 속성은 각 브라우저에서맊 적용 될 것입니다. 그 것이 그 들의 존재 목적이니까요.

한 선언앆에 모든 벤더 별 속성을 지정할 수는 없습니다.그렇게 되면 브라우저들은 모든 선언을 무시해 버릴 것입니다.

이 것은 우리가 background 속성을 각 벤더 별 속성을 위해 여러 번 재 작성해야 함을 의미합니다. 각 선언마다 모든 사용된 이미지가 재 작성되어야 합니다.

예시:p{background: url(demo.jpg) no-repeat 0 0, -moz-linear-gradient(left, blue, green);background: url(demo.jpg) no-repeat 0 0, -o-linear-gradient(left, blue, green);background: url(demo.jpg) no-repeat 0 0, -webkit-gradient(linear, left top, right top, from(blue),to(green));}

작성자 : Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley번역 : Toby YunSK communicationsSite: tobyyun.comTwitter: twitter.com/tobyyunSlideshare: slideshare.net/headvoy

http://webdevmobile.com	75
http://tobyyun.com	51
http://www.webdevmobile.com	51
http://duck9see.tumblr.com	15
http://kmoonki.tistory.com	14
url_unknown	6
http://cadforum.kr	4
http://www.hanrss.com	3
http://twitter.com	1
http://us-w1.rockmelt.com	1

CSS3 Backgrounds

by Toby Yun on May 30, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 221

Statistics

CSS3 Backgrounds — Presentation Transcript