CSS3 Backgrounds

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가지 중요한 박스를
이해해야 합니다.

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

content-box

The quick brown
fox jumped over
the lazy web
developer.

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

padding-box

The quick brown
fox jumped over
the lazy web
developer.

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

border-box

The quick brown
fox jumped over
the lazy web
developer.

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

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

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

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

우리는 이 기본 position 값을
background-position 속성을 통해
바꿀 수 있습니다.

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

CSS2.1에서는
요소의 배경 위치를 결정하기 위해
우리는 2개의 속성 값을 사용 할 수
있습니다.

1 2

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

첫 번째 속성 값은
수평축 (horizontal axis) 입니다.

Horizontal axis

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

두 번째 속성 값은
수직 축 (vertical axis) 입니다.

Vertical axis

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

CSS3에서는 상세한 배경위치 설정을
위해 4개의 속성 값을 사용할 수
있습니다.

1 2 3 4

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

처음 두 개의 속성 값은
수평축 (horizontal axis) 입니다.

Horizontal axis


그 뒤의 두 개의 속성 값은

Vertical axis


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

우리는 배경위치 지정을 위해
양수와 음수 값을 모두 사용할 수
있습니다.

음수 값

p { background-position: -5px -9px; }

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

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

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

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

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

• repeat
• repeat-x
• repeat-y
• no-repeat

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

div { background-repeat:
repeat repeat; }

두 개의 속성 값 중 첫 번째는
수평 축 (horizontal axis) 입니다.

수평 축

repeat repeat; }

두 번째 속성 값은

수직 축

repeat repeat; }

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

repeat [repeat]; }

‘space’ 와 ‘round’ 의 사용

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

• space
• round

Browser space round
Firefox 3.6, 4 No No
Safari 4, 5 No No
Chrome 10 No No
IE 6, 7, 8 No No
IE 9 No No
Opera 10, 11 Yes Yes

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

p { background-repeat: space; }

수직 축이 space로 지정된 경우

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

p { background-repeat: round; }

수직 축이 round로 지정된 경우

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

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

예를 들면, 우리는 이제 수평과 수직
동작을 각각 지정하는 두 가지 속성 값을
함께 사용할 수 있습니다.

space no-repeat; }

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

• background-origin
• background-clip
• background-size

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

div { background-origin:
padding-box; }

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

• content-box
• padding-box
• border-box

contents-box로 지정된 경우

padding-box로 지정된 경우

border-box로 지정된 경우

Browser background-origin
Firefox 3.6, 4 Yes
Safari 4, 5 Yes
Chrome 10 Yes
IE 6, 7, 8 No
IE 9 Yes
Opera 10, 11 Yes

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

div { background-clip: padding-box; }

Browser background-clip
Firefox 3.6 (다음 슬라이드의 노트를 봐주세요)
Firefox 4 Yes
Safari 4, 5 -webkit-background-clip
Chrome 10 Yes
IE 6, 7, 8 No
IE 9 Yes
Opera 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된 배경이미지

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

하지맊 CSS3는 background-size
속성을 통해 이미지 크기를
지정할 수 있게 합니다.

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

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

• contain
• cover

Browser background-size
Firefox 3.6, 4 Yes
Safari 4, 5 Yes
Chrome 10 Yes
IE 6, 7, 8 No
IE 9 Yes
Opera 10, 11 Yes

크기 값은 width와 height를
지정합니다. 처음 값은 width, 뒤의
값은 height 입니다.

Width Height

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

맊약 한 개의 값맊을 넣는다면
두 번째 크기 값은 기본 값인
auto로 설정됩니다.

기본 값인 auto가 사용됨

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

퍼센트 값은 부모 요소에 비례하여
width, height 값을 설정합니다.
첫 번째 값은 width, 두 번째 값은
height 입니다.

Width Height

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

크기 값의 경우와 같이
한 개의 값맊 적으면, 두 번째 값은
기본 값인 auto가 사용됩니다.

기본 값

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

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

div { background-size: contain; }

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

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

div { background-size: cover; }

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

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

다중 배경 이미지
(Multiple backgrounds)

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

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

Browser Multiple backgrounds
Firefox 3.6, 4 Yes
Safari 4, 5 Yes
Chrome 10 Yes
IE 6, 7, 8 No
IE 9 Yes
Opera 10, 11 Yes

축약하지 않은 문법
(Longhand)

CSS3에서는 어떤 배경 속성에서도
여러 개의 컴마를 사용하여 다수의
배경을 지정할 수 있습니다.

p{ 각 값의 뒤에 comma를 사용
background-image:
url(01.gif),
url(02.gif),
url(03.gif);
}

Longhand로 한 개의 요소 안에 3개의
배경 이미지를 넣은 예 입니다.

background-image 1
p
{
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-image 2
p
{
}


background-image 3
p
{
}

각 이미지의 사이즈, 위치, 반복은
각기 다른 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] ;
}

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

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

Longhand로 한 개의 요소 안에
3개의 배경 이미지를 넣고
배경 색상을 지정한 예 입니다.
Background-color
p
{
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-size]
[background-repeat]
[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 transparent
background-image none
background-repeat repeat
background-attachment scroll
background-position 0% 0%
background-origin padding-box
background-clip border-box
background-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%] /
[border-box] yellow;
}

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

p{
}

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

p{
}

어떻게 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;
}


p
background-image 2
{
background:
}


p
{
background: background-image 3
}

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

Background-color 와
다중 배경 이미지

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

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

background-color 는
마지막 레이어에맊 적용됩니다.

p background-color가 적용된 마지막 레이어
{
background:
url(03.gif) repeat-y 10px 5px yellow;
}

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

별도로 선언된 background-color.

p background-color
{
background:
background-color: yellow;
}

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

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

이롞적으로 background property를
모두 사용할 때 올바른 문법은:

p
{
background:
[background-image] background-image
[/ background-size]
[background-repeat]
[background-origin]
[background-clip]
[background-color];


p
{
background:
[background-image]
[background-position] Background-position
[/ background-size]
[background-repeat]
[background-origin]
[background-clip]
[background-color];


p
{
background:
[background-image]
[/ background-size] Background-size
[background-repeat]
[background-origin]
[background-clip]
[background-color];


p
{
background:
[background-image]
[/ background-size]
[background-repeat] Background-repeat
[background-origin]
[background-clip]
[background-color];


p
{
background:
[background-image]
[/ background-size]
[background-repeat]
[background-attachment] Background-attachment
[background-origin]
[background-clip]
[background-color];


p
{
background:
[background-image]
[/ background-size]
[background-repeat]
[background-origin] Background-origin
[background-clip]
[background-color];


p
{
background:
[background-image]
[/ background-size]
[background-repeat]
[background-origin]
[background-clip] Background-clip
[background-color];


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-position] 슬래시
[/ 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() 값을 대체 하여
사용할 수 있습니다.

이는 다중 배경 이미지 에서도
그래디언트를 사용할 수 있음을
의미합니다.

Linear gradient
p
{
background:
url(demo.jpg) no-repeat 0 0,
linear-gradient(left, blue, green);
}

브라우저 별 확장기능
(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 Weakley
Max Design

Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley

번역 : Toby Yun
SK communications

Site: tobyyun.com
Twitter: twitter.com/tobyyun
Slideshare: slideshare.net/headvoy

CSS3 Backgrounds

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

Similar to CSS3 Backgrounds

Similar to CSS3 Backgrounds (14)

More from Toby Yun

More from Toby Yun (8)

CSS3 Backgrounds