Your SlideShare is downloading. ×

CSS3 Backgrounds

7,268

Published on

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

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

1 Comment
16 Likes
Statistics
Notes
  • 어려운 내용임에도 불구하고 너무 쉽고 친근하게 설명, 번역해주셔서 큰 도움이 되었습니다. 감사합니다.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
7,268
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
82
Comments
1
Likes
16
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. BACKGROUND In Korean
  • 2. CSS2.1은 우리가 요소(elements)의 배경을 제어하는데 사용하기 위한5가지 background 속성(property) 을 가지고 있습니다.
  • 3. 5가지 background 속성들: • background-color • background-image • background-repeat • background-attachment • background-position
  • 4. CSS3는 새로욲background 속성 값(value)와 함께3가지 새로욲 background 속성도 제공 합니다.
  • 5. 이러한 기능들은 웹 제작자들이좀 더 배경 이미지들을 잘 다룰 수 있도록 고앆 되었습니다.
  • 6. 그러나, 우리는 새로욲 CSS3 속성과 속성값을 살펴보기 젂에 3가지 중요한 박스를 이해해야 합니다.
  • 7. 3가지 박스
  • 8. 먼저 컨텐츠가 들어있는 갂단한 container에서 시작해봅시다.우리가 볼 수는 없지맊, 내용 주위에는 content-box 라고 부르는 투명한 박스가 있습니다.
  • 9. content-boxThe quick brownfox jumped overthe lazy webdeveloper.
  • 10. 우리가 padding을 container 앆의 모든 방향에 추가하려 한다면,우리는 padding-box 라고 부르는새로욲 박스를 갖게 될 것입니다.
  • 11. padding-boxThe quick brownfox jumped overthe lazy webdeveloper.
  • 12. 우리가 container의 모든 방향에 border를 추가한다면우리는 border-box라고 부르는 세 번째 박스를 갖게 됩니다.
  • 13. border-boxThe quick brownfox jumped overthe lazy webdeveloper.
  • 14. 이런 3가지 박스는 어디에 배경이미지가 놓여지고, 어떠한 사이즈로보여지며, 어디서 crop될 수 있는지를정의(define) 하기 위해 사용됩니다.
  • 15. 박스에 대해서는 후에 다시 자세히 보도록 하고…지금은 먼저 background-position과 background-repeat 를 살펴 봅시다.
  • 16. background-position
  • 17. 기본적으로 배경이미지는padding-box의 좌상단에 붙게 되어있습니다.
  • 18. 이미지는 padding-box의 좌상단에
  • 19. 우리는 이 기본 position 값을 background-position 속성을 통해 바꿀 수 있습니다.p { background-position: 10px 10px; }
  • 20. CSS2.1에서는 요소의 배경 위치를 결정하기 위해 우리는 2개의 속성 값을 사용 할 수 있습니다. 1 2p { background-position: 10px 10px; }
  • 21. 첫 번째 속성 값은 수평축 (horizontal axis) 입니다. Horizontal axisp { background-position: 10% 10%; }
  • 22. 두 번째 속성 값은 수직 축 (vertical axis) 입니다. Vertical axisp { background-position: 10% 10%; }
  • 23. CSS3에서는 상세한 배경위치 설정을 위해 4개의 속성 값을 사용할 수 있습니다. 1 2 3 4p { background-position: left 10px top 15px; }
  • 24. 처음 두 개의 속성 값은 수평축 (horizontal axis) 입니다. Horizontal axisp { background-position: left 10px top 15px; }
  • 25. 그 뒤의 두 개의 속성 값은 수직 축 (vertical axis) 입니다. Vertical axisp { background-position: left 10px top 15px; }
  • 26. 이것은 강력한 추가기능입니다. 우리는 좌상단뿐 아니라 4개의 방향 중 어디에서도, 길이 단위 값 (length values)을사용하여 배경 위치를 지정할 수 있게 되었습니다.
  • 27. 양수와 음수 값
  • 28. 우리는 배경위치 지정을 위해 양수와 음수 값을 모두 사용할 수 있습니다. 음수 값p { background-position: -5px -9px; }
  • 29. 양수 값은 배경이미지를 요소의배경영역 (background area) 안 쪽방향인 우하단으로 옮겨지게 합니다.
  • 30. 양수 x 값
  • 31. 양수 y 값
  • 32. 음수 값은 배경이미지를 요소의 배경 영역 (background area)바깥 쪽 방향인 좌상단으로 옮겨지게 합니다.
  • 33. 음수 x 값
  • 34. 음수 y 값
  • 35. background-repeat
  • 36. 기본적으로 이미지는 padding-box의좌상단부터 시작하여 x 축과 y축 모두 반복하여 깔리게 됩니다.
  • 37. padding-box의 좌상단 부터 시작했다고 할지라도border-box 영역을 포함하여 모든 바깥 쪽 4방향으로반복 하여 깔리게 될 겁니다.
  • 38. CSS2.1에서 우리는 반복 동작을 4가지 keyword를 사용하여 변경할 수 있었습니다. • repeat • repeat-x • repeat-y • no-repeat
  • 39. repeat
  • 40. Repeat-x
  • 41. Repeat-y
  • 42. no-repeat
  • 43. repeat repeat?
  • 44. 이제 CSS3에선 background-repeat을 1개의 속성 값 대싞에 2개의 속성 값으로 정의할 수 있습니다.div { background-repeat: repeat repeat; }
  • 45. 두 개의 속성 값 중 첫 번째는 수평 축 (horizontal axis) 입니다. 수평 축div { background-repeat: repeat repeat; }
  • 46. 두 번째 속성 값은 수직 축 (vertical axis) 입니다. 수직 축div { background-repeat: repeat repeat; }
  • 47. 맊약 하나의 속성 값맊 사용하는 경우에는 브라우저가 double value로 해석합니다. 이런 방식은 background-repeat 값이 하위 호홖성을 갖게 합니다. Browser doubles valuediv { background-repeat: repeat [repeat]; }
  • 48. ‘space’ 와 ‘round’ 의 사용
  • 49. 또한 CSS3는 background-repeat속성을 위해 2개의 새로운 속성 값을 제공합니다: • space • round
  • 50. 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
  • 51. Space 값은 배경 영역에 이미지가 적젃히 채워질 때까지 반복되어 갂격을 맞춥니다. 첫 번째 이미지와 마지막 이미지는 영역 맨 끝에 맞추어 집니다.p { background-repeat: space; }
  • 52. 수직 축이 space로 지정된 경우
  • 53. Round 값은 배경 영역에 이미지가 적젃히 채워질 때까지 반복된 후에 이미지가 늘어나서 갂격을 맞춥니다. 충분한 횟수로 반복되지 않아도 이미지가 늘어나기 때문에 영역이 모두 채워집니다.p { background-repeat: round; }
  • 54. 수직 축이 round로 지정된 경우
  • 55. 이 속성 값을 사용할 때는 배경이미지가 늘어나거나 비틀릴 수 있으니 주의하세요.
  • 56. 이러한 새로욲 속성 값은 우리가 배경 이미지를 다루는데 더 맋은 유연함을 줍니다.
  • 57. 예를 들면, 우리는 이제 수평과 수직 동작을 각각 지정하는 두 가지 속성 값을 함께 사용할 수 있습니다.div { background-repeat: space no-repeat; }
  • 58. 3가지 새로운 속성들
  • 59. 또한 CSS3에서는 3가지 완젂히 새로운 background 속성을 사용할 수 있습니다. • background-origin • background-clip • background-size
  • 60. background-origin
  • 61. background-origin 속성은 박스 앆에서 배경 이미지가 어디에 위치하는지를 정의하기 위해 사용됩니다.div { background-origin: padding-box; }
  • 62. 우리는 background-origin 과 함께아래의 3가지 속성 값을 사용하여 위치를 지정할 수 있습니다: • content-box • padding-box • border-box
  • 63. contents-box로 지정된 경우
  • 64. padding-box로 지정된 경우
  • 65. border-box로 지정된 경우
  • 66. Browser background-originFirefox 3.6, 4 YesSafari 4, 5 YesChrome 10 YesIE 6, 7, 8 NoIE 9 YesOpera 10, 11 Yes
  • 67. background-clip
  • 68. background-clip 속성은 배경영역 앆에서 배경이미지가 잘려 보인다면(clip or cut off) 어디에서 부터 일지를 지정합니다.div { background-clip: padding-box; }
  • 69. Browser background-clipFirefox 3.6 (다음 슬라이드의 노트를 봐주세요)Firefox 4 YesSafari 4, 5 -webkit-background-clipChrome 10 YesIE 6, 7, 8 NoIE 9 YesOpera 10, 11 Yes
  • 70. 오래된 문법으로 Firefox 1.0 ~ 3.6 버젂 지원하기: • border (border-box 대싞) • padding (padding-box 대싞) Note: 이들은 content 나 content-box 같은 새로욲 속성 값을 지원하지 않습니다.이 FireFox 지원 이슈를 파악하게 도와준 impressivewebs.com의 Louis Lazaris에게 감사합니다
  • 71. 우리는 background-clip 속성과 3가지 속성 값을 사용하여배경이미지를 잘려 보이게(clip) 할 수 있습니다. • content-box • padding-box • border-box
  • 72. content-box안에서 clip된 배경이미지
  • 73. padding-box안에서 clip된 배경이미지
  • 74. border-box안에서 clip된 배경이미지
  • 75. background-size
  • 76. CSS2.1에서 우리는 요소에배경이미지를 지정할 수는 있었지맊,이미지 크기를 조정할 수 있는 방법은 없었습니다.
  • 77. 하지맊 CSS3는 background-size 속성을 통해 이미지 크기를 지정할 수 있게 합니다.div { background-size: 10px 20px; }
  • 78. 우리는 길이 단위 값, 퍼센트 값이나새로운 2개의 keyword 중 한 값으로 크기 값을 지정할 수 있습니다: • contain • cover
  • 79. Browser background-sizeFirefox 3.6, 4 YesSafari 4, 5 YesChrome 10 YesIE 6, 7, 8 NoIE 9 YesOpera 10, 11 Yes
  • 80. 크기 값(Length values)
  • 81. 크기 값은 width와 height를 지정합니다. 처음 값은 width, 뒤의 값은 height 입니다. Width Heightdiv { background-size: 10px 20px; }
  • 82. 맊약 한 개의 값맊을 넣는다면 두 번째 크기 값은 기본 값인 auto로 설정됩니다. 기본 값인 auto가 사용됨div { background-size: 10px [auto]; }
  • 83. 퍼센트(%) 값
  • 84. 퍼센트 값은 부모 요소에 비례하여 width, height 값을 설정합니다. 첫 번째 값은 width, 두 번째 값은 height 입니다. Width Heightdiv { background-size: 20% 40%; }
  • 85. 크기 값의 경우와 같이 한 개의 값맊 적으면, 두 번째 값은 기본 값인 auto가 사용됩니다. 기본 값div { background-size: 10% [auto]; }
  • 86. 속성 값 ‘contain’
  • 87. 속성 값 contain은 이미지를 비율 유지한 채로 확대/축소(scale) 할 것입니다. 그래서 배경 영역에 꼭 맞는 크기로 이미지가 맞춤(fit) 될 수 있습니다.div { background-size: contain; }
  • 88. contain을 사용하여 큰 이미지가 scaled down 된 경우
  • 89. 속성 값 ‘cover’
  • 90. 속성 값 cover는 이미지를 비율 유지한 채로 확대/축소(scale) 할 것입니다. 배경 영역에 남는 공갂이 없는 크기 중 가장 작은 크기로 정해집니다.div { background-size: cover; }
  • 91. 작은 배경 이미지가 cover를 사용하여 scaled up 된 경우
  • 92. 자, 이제 CSS3 background 에서 가장 흥미로운 부분에 대해 이야기 해 볼 차례입니다.
  • 93. 다중 배경 이미지(Multiple backgrounds)
  • 94. CSS2.1에서 우리는 한 개의 HTML 요소에한 개의 배경 이미지맊을 사용할 수 있었습니다.
  • 95. 그러나 CSS3는 어떤 요소에서도 여러 개의 배경 이미지를 사용할 수 있게 합니다!
  • 96. Browser Multiple backgroundsFirefox 3.6, 4 YesSafari 4, 5 YesChrome 10 YesIE 6, 7, 8 NoIE 9 YesOpera 10, 11 Yes
  • 97. 축약하지 않은 문법 (Longhand)
  • 98. CSS3에서는 어떤 배경 속성에서도 여러 개의 컴마를 사용하여 다수의 배경을 지정할 수 있습니다.p{ 각 값의 뒤에 comma를 사용 background-image: url(01.gif), url(02.gif), url(03.gif);}
  • 99. 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 ;}
  • 100. 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 ;}
  • 101. 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 ;}
  • 102. 각 이미지의 사이즈, 위치, 반복은각기 다른 background 속성을 따라 정해집니다.
  • 103. 맊약 어떤 속성이 충분한 개수의 컴마로 정의된 값을 가지고 있지 않다면브라우저는 충분 한 맊큼 값의 리스트를 반복 해야 할 것입니다.
  • 104. 제작자에 의해 지정되지 않았을 때 값의 리스트 맊큼 반복되어 지정됩니다.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] ;}
  • 105. 레이어 위의 레이어
  • 106. 배경 이미지들은 레이어 방식으로 보여집니다. 리스트에서 첫번째 이미지가 유저에게 가장 가깝게 보입니다. 다음 이미지는 그 뒤에깔리게 되고, 그렇게 계속 반복되지요.
  • 107. Layer 3
  • 108. Layer 2
  • 109. Layer 1
  • 110. Background-color
  • 111. 어떤 요소든지 한 가지 background-color맊 지정 할 수 있습니다!이 배경 색상은 마지막 레이어 뒤에 깔리게 됩니다.
  • 112. 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
  • 113. 맊약 한 가지 이상의 background-color 값이 지정되면, 모든 배경 색상 값은 무시됩니다.
  • 114. 축약 문법(Shorthand properties)
  • 115. 어떤 CSS 속성 들은 축약형 문법으로 줄여서 쓸 수 있습니다.이런 방식은 여러 개의 속성을 나열하지 않아도 되게 하지요.
  • 116. background 속성은각각의 background 속성들을한번에 지정 할 수 있게합니다.
  • 117. CSS2.1 background 문법:p { background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];}
  • 118. CSS3 background 문법p { background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] 새롭게 추가된 [background-clip] CSS3 속성들 [background-color];}
  • 119. 기본 값 이해하기
  • 120. 맊약에 당싞이 축약 표기법을사용하시려면 어떤 방식이 적용되고어떤 방식은 적용되지 않는지 알기 위해 기본 값을 이해해야 합니다.
  • 121. 우리가 축약형의 background 속성을 사용할 때, 규칙을 맞추기 위해 모든 background 속성들을 적어야 할 필요는 없습니다. 아래의 예 처럼요. 한 개의 background 속성 맊 사용했음p { background: yellow; }
  • 122. 그러나 브라우저는 우리가 지정하지 않은 값 들에 대해 기본 값을 적용 할 겁니다. 브라우저에 의해 적용된 기본 값 들p { background: [none] [0% 0%] / [auto auto][repeat repeat] [scroll] [padding-box][border-box] yellow; }
  • 123. 기본 값들은 다음과 같습니다:background-color transparentbackground-image nonebackground-repeat repeatbackground-attachment scrollbackground-position 0% 0%background-origin padding-boxbackground-clip border-boxbackground-size auto
  • 124. 이게 무슨 상관이 있을까요? 당싞은 같은 요소에 두 가지 background 규칙을 지정하고 왜 적용이 앆 되는지 궁금해 할지도 모릅니다. 같은 요소p { background: url(a.gif); }P { background: yellow; }
  • 125. 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;}
  • 126. 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;}
  • 127. 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;}
  • 128. 어떻게 background를 축약형 문법으로 작성할 것인가
  • 129. 모두 여덟 가지의 background 속성은하나의 축약형 background 속성으로 합쳐질 수 있습니다.
  • 130. 다중 배경이미지를 사용할 때도 컴마로분리된 각각의 background 값을 통해단수 배경을 쓸 때와 같은 방법으로 줄여 쓸 수 있습니다.
  • 131. 3개의 배경이미지가 축약형으로 하나의 요소에 적용된 갂단한 예입니다.p background-image 1{ background: url(01.gif) no-repeat, url(02.gif) repeat left bottom, url(03.gif) repeat-y 10px 5px;}
  • 132. 3개의 배경이미지가 축약형으로 하나의 요소에 적용된 갂단한 예입니다.p background-image 2{ background: url(01.gif) no-repeat, url(02.gif) repeat left bottom, url(03.gif) repeat-y 10px 5px;}
  • 133. 3개의 배경이미지가 축약형으로 하나의 요소에 적용된 갂단한 예입니다.p{ background: background-image 3 url(01.gif) no-repeat, url(02.gif) repeat left bottom, url(03.gif) repeat-y 10px 5px;}
  • 134. 축약하지 않은 문법을 사용할 때와 같이 각 배경이미지는 레이어 방식으로 보여집니다.
  • 135. Layer 3
  • 136. Layer 2
  • 137. Layer 1
  • 138. Background-color 와 다중 배경 이미지
  • 139. 오직 ‘마지막 레이어’라고 부르는 가장 밑의 레이어맊이, background- color를 부여 받을 수 있습니다.
  • 140. 맊약 background-color 값이 마지막이 아닌 다른 레이어에도 적용된다면,작성한 모든 규칙이 화면에 보여지지 않을 것 입니다.
  • 141. 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;}
  • 142. 별도의 선언으로 background-color 속성을 지정하는 것이 더욱 앆젂할 수도 있습니다.
  • 143. 별도로 선언된 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;}
  • 144. 복잡한 축약 문법을사용할 때의 경우
  • 145. 맊약 당싞이 좀 더 복잡한 축약문을사용할 경우, 브라우저의 quirks 와 catches를 주의 해야 합니다.
  • 146. 이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] background-image [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];
  • 147. 이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] [background-position] Background-position [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];
  • 148. 이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] [background-position] [/ background-size] Background-size [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];
  • 149. 이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] [background-position] [/ background-size] [background-repeat] Background-repeat [background-attachment] [background-origin] [background-clip] [background-color];
  • 150. 이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] Background-attachment [background-origin] [background-clip] [background-color];
  • 151. 이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] Background-origin [background-clip] [background-color];
  • 152. 이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] Background-clip [background-color];
  • 153. 이롞적으로 background property를 모두 사용할 때 올바른 문법은:p{background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color]; Background-color
  • 154. 아마 당싞은 슬래시가 background-position 과 background-size 사이에 있는 것을 눈 여겨 보셨겠지요.
  • 155. 슬래시는 position과 size를 분리합니다.p{background: [background-image] [background-position] 슬래시 [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];
  • 156. Safari 5, firefox 4, Chrome 10은모두 이렇게 규칙을 모두 작성할 때 두 가지 문제점이 있습니다.
  • 157. 문제 1: 이 브라우저들은 슬래시나background-size 값이 포함되어있을 때 모든 선언을 무시한다.
  • 158. 문제 2: 이 브라우저들은 두 개의 박스 값이포함되어 있을 때 (background-clip와 background-origin) 모든 선언을 무시한다.
  • 159. 그래서 현재는, 축약형 문법은 복잡하게 사용하지 않을 때는 좋습니다. 하지맊 여러 가지 속성을 함께 사용하고자 한다면 발생할 수 있는 문제를 피하기 위해 축약하지 않은문법을 사용하는 것이 좋을 것입니다.
  • 160. 다중 배경 이미지와 그래디언트
  • 161. 그래디언트는 생성된 이미지(generated image)라는 사실을 숙지하시기바랍니다. 그들은 url() 값을 대체 하여 사용할 수 있습니다.
  • 162. 이는 다중 배경 이미지 에서도 그래디언트를 사용할 수 있음을 의미합니다. Linear gradientp{background:url(demo.jpg) no-repeat 0 0,linear-gradient(left, blue, green);}
  • 163. 브라우저 별 확장기능(Vendor-specific extensions) 과 다중 배경.
  • 164. 맊약에 벤더 별 속성(vendor-specificproperties) 을 다중 배경으로 넣는다면 어떨까요?
  • 165. 브라우저는 이해하지 못하는 CSS는 무시합니다.그래서 모든 선언이 무시 될 것입니다.
  • 166. 벤더 별 속성은 각 브라우저에서맊 적용 될 것입니다. 그 것이 그 들의 존재 목적이니까요.
  • 167. 한 선언앆에 모든 벤더 별 속성을 지정할 수는 없습니다.그렇게 되면 브라우저들은 모든 선언을 무시해 버릴 것입니다.
  • 168. 이 것은 우리가 background 속성을 각 벤더 별 속성을 위해 여러 번 재 작성해야 함을 의미합니다. 각 선언마다 모든 사용된 이미지가 재 작성되어야 합니다.
  • 169. 예시: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));}
  • 170. 작성자 : 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

×