• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS3 Backgrounds
 

CSS3 Backgrounds

on

  • 6,800 views

한글로 번역한 Russ Weakley의 CSS3 연재

한글로 번역한 Russ Weakley의 CSS3 연재

Statistics

Views

Total Views
6,800
Views on SlideShare
6,310
Embed Views
490

Actions

Likes
14
Downloads
71
Comments
1

15 Embeds 490

http://kmoonki.tistory.com 153
http://www.webdevmobile.com 90
http://webdevmobile.com 75
http://duck9see.tumblr.com 53
http://tobyyun.com 51
http://www.xpressengine.com 39
http://mobilewebs.co.kr 8
url_unknown 6
http://cadforum.kr 4
http://pinterest.com 3
http://www.hanrss.com 3
https://twitter.com 2
http://us-w1.rockmelt.com 1
http://twitter.com 1
http://www.linkedin.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 어려운 내용임에도 불구하고 너무 쉽고 친근하게 설명, 번역해주셔서 큰 도움이 되었습니다. 감사합니다.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS3 Backgrounds CSS3 Backgrounds Presentation Transcript

    • 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 ;}
    • Longhand로 한 개의 요소 안에 3개의 배경 이미지를 넣은 예 입니다. background-image 2p{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 ;}
    • Longhand로 한 개의 요소 안에 3개의 배경 이미지를 넣은 예 입니다. background-image 3p{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