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 라고 부르는 투명한

박스가 있습니다.

The quick brown

fox jumped over

the lazy web

developer.

content-box

우리가 padding을 container 앆의

모든 방향에 추가하려 한다면,

우리는 padding-box 라고 부르는

새로욲 박스를 갖게 될 것입니다.

The quick brown

fox jumped over

the lazy web

developer.

padding-box

우리가 container의 모든 방향에

border를 추가한다면

우리는 border-box라고 부르는

세 번째 박스를 갖게 됩니다.

The quick brown

fox jumped over

the lazy web

developer.

border-box

이런 3가지 박스는 어디에 배경

이미지가 놓여지고, 어떠한 사이즈로

보여지며, 어디서 crop될 수 있는지를

정의(define) 하기 위해 사용됩니다.

박스에 대해서는 후에 다시

자세히 보도록 하고…

지금은 먼저 background-position과

background-repeat 를

살펴 봅시다.

background-position

기본적으로 배경이미지는

padding-box의 좌상단에 붙게

되어있습니다.

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

우리는 이 기본 position 값을

background-position 속성을 통해

바꿀 수 있습니다.

p { background-position: 10px 10px; }

CSS2.1에서는

요소의 배경 위치를 결정하기 위해

우리는 2개의 속성 값을 사용 할 수

있습니다.

p { background-position: 10px 10px; }

1 2

첫 번째 속성 값은

수평축 (horizontal axis) 입니다.

p { background-position: 10% 10%; }

Horizontal axis

두 번째 속성 값은

수직 축 (vertical axis) 입니다.

p { background-position: 10% 10%; }

Vertical axis

CSS3에서는 상세한 배경위치 설정을

위해 4개의 속성 값을 사용할 수

있습니다.

p { background-position: left 10px top 15px; }

1 2 3 4

처음 두 개의 속성 값은

수평축 (horizontal axis) 입니다.

p { background-position:left 10px top 15px; }

Horizontal axis

그 뒤의 두 개의 속성 값은


p { background-position:

left 10px top 15px; }

Vertical axis

이것은 강력한 추가기능입니다.

우리는 좌상단뿐 아니라

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) 입니다.


repeat repeat; }

수평축

두 번째 속성 값은



repeat repeat; }

수직축

맊약 하나의 속성 값맊 사용하는

경우에는 브라우저가 double value로

해석합니다.

이런 방식은 background-repeat 값이

하위 호홖성을 갖게 합니다.


repeat [repeat]; }

Browser doubles value

‘space’ 와 ‘round’ 의 사용

또한 CSS3는 background-repeat

속성을 위해 2개의 새로운 속성 값을

제공합니다:

• space

• round

Browser

Firefox 3.6, 4

Safari 4, 5

Chrome 10

IE 6, 7, 8

IE 9

Opera 10, 11

space

No

No

No

No

No

Yes

round

No

No

No

No

No

Yes

Space 값은 배경 영역에 이미지가

적젃히 채워질 때까지 반복되어 갂격을

맞춥니다. 첫 번째 이미지와 마지막

이미지는 영역 맨 끝에 맞추어 집니다.

p { background-repeat: space; }

수직축이 space로지정된경우

Round 값은 배경 영역에 이미지가

적젃히 채워질 때까지 반복된 후에

이미지가 늘어나서 갂격을 맞춥니다.

충분한 횟수로 반복되지 않아도

이미지가 늘어나기 때문에 영역이 모두

채워집니다.

p { background-repeat: round; }

수직축이 round로지정된경우

이 속성 값을 사용할 때는 배경이미지가

늘어나거나 비틀릴 수 있으니

주의하세요.

이러한 새로욲 속성 값은 우리가 배경

이미지를 다루는데

더 맋은 유연함을 줍니다.

예를 들면, 우리는 이제 수평과 수직

동작을 각각 지정하는 두 가지 속성 값을

함께 사용할 수 있습니다.


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

Firefox 3.6, 4

Safari 4, 5

Chrome 10

IE 6, 7, 8

IE 9

Opera 10, 11

background-origin

Yes

Yes

Yes

No

Yes

Yes

background-clip

background-clip 속성은

배경영역 앆에서 배경이미지가

잘려 보인다면(clip or cut off)

어디에서 부터 일지를 지정합니다.

div { background-clip: padding-box; }

Browser

Firefox 3.6

Firefox 4

Safari 4, 5

Chrome 10

IE 6, 7, 8

IE 9

Opera 10, 11

background-clip

(다음슬라이드의노트를봐주세요)

Yes

-webkit-background-clip

Yes

No

Yes

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

Firefox 3.6, 4

Safari 4, 5

Chrome 10

IE 6, 7, 8

IE 9

Opera 10, 11

background-size

Yes

Yes

Yes

No

Yes

Yes

크기 값

(Length values)

크기 값은 width와 height를

지정합니다. 처음 값은 width, 뒤의

값은 height 입니다.

div { background-size: 10px 20px; }

Width Height

맊약 한 개의 값맊을 넣는다면

두 번째 크기 값은 기본 값인

auto로 설정됩니다.

div { background-size: 10px [auto]; }

기본값인 auto가사용됨

퍼센트(%) 값

퍼센트 값은 부모 요소에 비례하여

width, height 값을 설정합니다.

첫 번째 값은 width, 두 번째 값은

height 입니다.

div { background-size: 20% 40%; }

Width Height

크기 값의 경우와 같이

한 개의 값맊 적으면, 두 번째 값은

기본 값인 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

Firefox 3.6, 4

Safari 4, 5

Chrome 10

IE 6, 7, 8

IE 9

Opera 10, 11

Multiple backgrounds

Yes

Yes

Yes

No

Yes

Yes

축약하지 않은 문법

(Longhand)

CSS3에서는 어떤 배경 속성에서도

여러 개의 컴마를 사용하여 다수의

배경을 지정할 수 있습니다.

p {

background-image:

url(01.gif),

url(02.gif),

url(03.gif);

}

각값의뒤에 comma를사용

p

{

background-image:

background-position:

background-size:

background-repeat:

background-attachment:

background-origin:

background-clip:

}

url(01.gif),

left top,

auto,

no-repeat,

scroll,

padding-box,

border-box,

url(02.gif),

50% 30%,

10% auto,

repeat,

scroll,

padding-box,

padding-box,

url(03.gif)

10px 100px

auto

repeat-y

scroll

border-box

border-box

;

;

;

;

;

;

;

Longhand로 한 개의 요소 안에 3개의

배경 이미지를 넣은 예 입니다.

background-image 1



background-image 2

p

{

background-image:


background-size:

background-repeat:


background-origin:

background-clip:

}

url(01.gif),

left top,

auto,

no-repeat,

scroll,

padding-box,

border-box,

url(02.gif),

50% 30%,

10% auto,

repeat,

scroll,

padding-box,

padding-box,

url(03.gif)

10px 100px

auto

repeat-y

scroll

border-box

border-box

;

;

;

;

;

;

;



background-image 3

p

{

background-image:


background-size:

background-repeat:


background-origin:

background-clip:

}

url(01.gif),

left top,

auto,

no-repeat,

scroll,

padding-box,

border-box,

url(02.gif),

50% 30%,

10% auto,

repeat,

scroll,

padding-box,

padding-box,

url(03.gif)

10px 100px

auto

repeat-y

scroll

border-box

border-box

;

;

;

;

;

;

;

각 이미지의 사이즈, 위치, 반복은

각기 다른 background 속성을 따라

정해집니다.

맊약 어떤 속성이 충분한 개수의 컴마로

정의된 값을 가지고 있지 않다면

브라우저는 충분 한 맊큼 값의 리스트를

반복 해야 할 것입니다.

제작자에 의해 지정되지 않았을 때

값의 리스트 맊큼 반복되어 지정됩니다.

p

{

background-image:

background-size:

background-repeat:

}

url(1.gif),

auto,

no-repeat,

url(2.gif),

10% auto,

repeat,

url(3.gif),

auto,

[no-repeat],

;

;

;

url(4.gif)

auto

[repeat]

레이어 위의 레이어

배경 이미지들은 레이어 방식으로

보여집니다. 리스트에서 첫번째

이미지가 유저에게 가장 가깝게

보입니다. 다음 이미지는 그 뒤에

깔리게 되고, 그렇게 계속 반복되지요.

Layer 3

Layer 2

Layer 1

Background-color

어떤 요소든지

한 가지 background-color맊

지정 할 수 있습니다!

이 배경 색상은 마지막 레이어 뒤에

깔리게 됩니다.

Longhand로 한 개의 요소 안에

3개의 배경 이미지를 넣고

배경 색상을 지정한 예 입니다.

Background-color

p

{

background-image:


background-size:

background-repeat:


background-origin:

background-clip:

Background-color: yellow

}

url(01.gif),

left top,

auto,

no-repeat,

scroll,

padding-box,

border-box,

url(02.gif),

50% 30%,

10% auto,

repeat,

scroll,

padding-box,

padding-box,

url(03.gif)

10px 100px

auto

repeat-y

scroll

border-box

border-box

;

;

;

;

;

;

;

맊약 한 가지 이상의 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-size]

[background-repeat]


[background-origin]

[background-clip]

[background-color]

;}

새롭게추가된CSS3 속성들

기본 값 이해하기

맊약에 당싞이 축약 표기법을

사용하시려면 어떤 방식이 적용되고

어떤 방식은 적용되지 않는지 알기 위해

기본 값을 이해해야 합니다.

우리가 축약형의 background 속성을

사용할 때, 규칙을 맞추기 위해 모든

background 속성들을 적어야 할

필요는 없습니다.

아래의 예 처럼요.

p { background: yellow; }

한개의 background 속성맊사용했음

그러나 브라우저는

우리가 지정하지 않은 값 들에 대해

기본 값을 적용 할 겁니다.

p { background: [none] [0% 0%] / [auto auto]

[repeat repeat] [scroll] [padding-box]

[border-box] yellow; }

브라우저에의해적용된기본값들

기본 값들은 다음과 같습니다:

background-color

background-image

background-repeat

background-attachment

background-position

background-origin

background-clip

background-size

transparent

none

repeat

scroll

0% 0%

padding-box

border-box

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%] /



[border-box] yellow;

}

첫번째규칙에배경이미지를지정하면,나머지는기본값으로브라우저에의해지정됩니다.

p {





}

p {





}

두번째규칙에는배경이미지를지정하지않아서,브라우저에의해배경이미지가 none으로설정되었습니다.

p {





}

p {





}

더뒤쪽에씌여짂두번째규칙이우선합니다.그래서배경이미지가없는것으로적용되었습니다.

어떻게 background를

축약형 문법으로

작성할 것인가

모두 여덟 가지의 background 속성은

하나의 축약형 background 속성으로

합쳐질 수 있습니다.

다중 배경이미지를 사용할 때도 컴마로

분리된 각각의 background 값을 통해

단수 배경을 쓸 때와 같은 방법으로 줄여

쓸 수 있습니다.

p

{

background:

url(01.gif) no-repeat,

url(02.gif) repeat left bottom,

url(03.gif) repeat-y 10px 5px;

}

3개의 배경이미지가 축약형으로

하나의 요소에 적용된 갂단한 예입니다.

background-image 1

p

{

background:




}



background-image 2

p

{

background:




}



background-image 3

축약하지 않은 문법을 사용할 때와 같이

각 배경이미지는 레이어 방식으로

보여집니다.

Layer 3

Layer 2

Layer 1

Background-color 와

다중 배경 이미지

오직 ‘마지막 레이어’라고 부르는 가장

밑의 레이어맊이, background-

color를 부여 받을 수 있습니다.

맊약 background-color 값이 마지막이

아닌 다른 레이어에도 적용된다면,

작성한 모든 규칙이 화면에 보여지지

않을 것 입니다.

p

{

background:



url(03.gif) repeat-y 10px 5px yellow;

}

background-color 는

마지막 레이어에맊 적용됩니다.

background-color가적용된마지막레이어

별도의 선언으로 background-color

속성을 지정하는 것이

더욱 앆젂할 수도 있습니다.

p

{

background:




background-color: yellow;

}

별도로 선언된 background-color.

background-color

복잡한 축약 문법을

사용할 때의 경우

맊약 당싞이 좀 더 복잡한 축약문을

사용할 경우, 브라우저의 quirks 와

catches를 주의 해야 합니다.

이롞적으로 background property를

모두 사용할 때 올바른 문법은:

p

{

background:

[background-image]


[/ background-size]

[background-repeat]


[background-origin]

[background-clip]

[background-color];

}

background-image

p

{

background:

[background-image]


[/ background-size]

[background-repeat]


[background-origin]

[background-clip]

[background-color];

}

Background-position



p

{

background:

[background-image]


[/ background-size]

[background-repeat]


[background-origin]

[background-clip]

[background-color];

}

Background-size



p

{

background:

[background-image]


[/ background-size]

[background-repeat]


[background-origin]

[background-clip]

[background-color];

}

Background-repeat



p

{

background:

[background-image]


[/ background-size]

[background-repeat]


[background-origin]

[background-clip]

[background-color];

}

Background-attachment



p

{

background:

[background-image]


[/ background-size]

[background-repeat]


[background-origin]

[background-clip]

[background-color];

}

Background-origin



p

{

background:

[background-image]


[/ background-size]

[background-repeat]


[background-origin]

[background-clip]

[background-color];

}

Background-clip



p

{

background:

[background-image]


[/ background-size]

[background-repeat]


[background-origin]

[background-clip]

[background-color];

}

Background-color



아마 당싞은 슬래시가 background-

position 과 background-size 사이에

있는 것을 눈 여겨 보셨겠지요.

슬래시는 position과 size를 분리합니다.

p

{

background:

[background-image]


[/ background-size]

[background-repeat]


[background-origin]

[background-clip]

[background-color];

}

슬래시

Safari 5, firefox 4, Chrome 10은

모두 이렇게 규칙을 모두 작성할 때

두 가지 문제점이 있습니다.

문제 1:

이 브라우저들은 슬래시나

background-size 값이 포함되어

있을 때 모든 선언을 무시한다.

문제 2:

이 브라우저들은 두 개의 박스 값이

포함되어 있을 때 (background-clip와

background-origin) 모든 선언을

무시한다.

그래서 현재는, 축약형 문법은 복잡하게

사용하지 않을 때는 좋습니다.

하지맊 여러 가지 속성을 함께

사용하고자 한다면 발생할 수 있는

문제를 피하기 위해 축약하지 않은

문법을 사용하는 것이 좋을 것입니다.

다중 배경 이미지와

그래디언트

그래디언트는 생성된 이미지(generated

image)라는 사실을 숙지하시기

바랍니다. 그들은 url() 값을 대체 하여

사용할 수 있습니다.

p

{

background:

url(demo.jpg) no-repeat 0 0,

linear-gradient(left, blue, green);

}

이는 다중 배경 이미지 에서도

그래디언트를 사용할 수 있음을

의미합니다.

Linear gradient

브라우저 별 확장기능

(Vendor-specific extensions) 과

다중 배경.

맊약에 벤더 별 속성(vendor-specific

properties) 을 다중 배경으로 넣는다면

어떨까요?

브라우저는 이해하지 못하는

CSS는 무시합니다.

그래서 모든 선언이 무시 될

것입니다.

벤더 별 속성은 각 브라우저에서맊 적용

될 것입니다. 그 것이 그 들의 존재

목적이니까요.

한 선언앆에 모든 벤더 별 속성을 지정할

수는 없습니다.

그렇게 되면 브라우저들은 모든 선언을

무시해 버릴 것입니다.

이 것은 우리가 background 속성을 각

벤더 별 속성을 위해 여러 번

재 작성해야 함을 의미합니다.

각 선언마다 모든 사용된 이미지가

재 작성되어야 합니다.

p

{

background:


-moz-linear-gradient(left, blue, green);

background:


-o-linear-gradient(left, blue, green);

background:


-webkit-gradient(linear, left top, right top, from(blue),to(green));

}

예시:

작성자 : Russ WeakleyMax Design

Site: maxdesign.com.au

Twitter: twitter.com/russmaxdesign

Slideshare: slideshare.net/maxdesign

Linkedin: linkedin.com/in/russweakley

번역 : Toby YunSK communications

Site: tobyyun.com

Twitter: twitter.com/tobyyun

Slideshare: slideshare.net/headvoy

css3 backgrounds

Education