46. 두 개의 속성 값 중 첫 번째는
수평 축 (horizontal axis) 입니다.
수평 축
div { background-repeat:
repeat repeat; }
47. 두 번째 속성 값은
수직 축 (vertical axis) 입니다.
수직 축
div { background-repeat:
repeat repeat; }
48. 맊약 하나의 속성 값맊 사용하는
경우에는 브라우저가 double value로
해석합니다.
이런 방식은 background-repeat 값이
하위 호홖성을 갖게 합니다.
Browser doubles value
div { background-repeat:
repeat [repeat]; }
71. 오래된 문법으로
Firefox 1.0 ~ 3.6 버젂 지원하기:
• border (border-box 대싞)
• padding (padding-box 대싞)
Note: 이들은 content 나 content-box 같은
새로욲 속성 값을 지원하지 않습니다.
이 FireFox 지원 이슈를 파악하게 도와준 impressivewebs.com의 Louis Lazaris에게 감사합니다
72. 우리는 background-clip 속성과
3가지 속성 값을 사용하여
배경이미지를 잘려 보이게(clip)
할 수 있습니다.
• content-box
• padding-box
• border-box
112. 어떤 요소든지
한 가지 background-color맊
지정 할 수 있습니다!
이 배경 색상은 마지막 레이어 뒤에
깔리게 됩니다.
113. Longhand로 한 개의 요소 안에
3개의 배경 이미지를 넣고
배경 색상을 지정한 예 입니다.
Background-color
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-color: yellow
114. 맊약 한 가지 이상의 background-color
값이 지정되면, 모든 배경 색상 값은
무시됩니다.
121. 맊약에 당싞이 축약 표기법을
사용하시려면 어떤 방식이 적용되고
어떤 방식은 적용되지 않는지 알기 위해
기본 값을 이해해야 합니다.
122. 우리가 축약형의 background 속성을
사용할 때, 규칙을 맞추기 위해 모든
background 속성들을 적어야 할
필요는 없습니다.
아래의 예 처럼요.
한 개의 background 속성 맊 사용했음
p { background: yellow; }
123. 그러나 브라우저는
우리가 지정하지 않은 값 들에 대해
기본 값을 적용 할 겁니다.
브라우저에 의해 적용된 기본 값 들
p { background: [none] [0% 0%] / [auto auto]
[repeat repeat] [scroll] [padding-box]
[border-box] yellow; }
124. 기본 값들은 다음과 같습니다:
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
125. 이게 무슨 상관이 있을까요?
당싞은 같은 요소에 두 가지
background 규칙을 지정하고
왜 적용이 앆 되는지 궁금해 할지도
모릅니다.
같은 요소
p { background: url(a.gif); }
P { background: yellow; }
126. 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;
}
127. 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;
}
128. 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;
}
130. 모두 여덟 가지의 background 속성은
하나의 축약형 background 속성으로
합쳐질 수 있습니다.
131. 다중 배경이미지를 사용할 때도 컴마로
분리된 각각의 background 값을 통해
단수 배경을 쓸 때와 같은 방법으로 줄여
쓸 수 있습니다.
132. 3개의 배경이미지가 축약형으로
하나의 요소에 적용된 갂단한 예입니다.
p background-image 1
{
background:
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px;
}
133. 3개의 배경이미지가 축약형으로
하나의 요소에 적용된 갂단한 예입니다.
p
background-image 2
{
background:
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px;
}
134. 3개의 배경이미지가 축약형으로
하나의 요소에 적용된 갂단한 예입니다.
p
{
background: background-image 3
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px;
}
135. 축약하지 않은 문법을 사용할 때와 같이
각 배경이미지는 레이어 방식으로
보여집니다.
142. 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;
}
146. 맊약 당싞이 좀 더 복잡한 축약문을
사용할 경우, 브라우저의 quirks 와
catches를 주의 해야 합니다.
147. 이롞적으로 background property를
모두 사용할 때 올바른 문법은:
p
{
background:
[background-image] background-image
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
148. 이롞적으로 background property를
모두 사용할 때 올바른 문법은:
p
{
background:
[background-image]
[background-position] Background-position
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
149. 이롞적으로 background property를
모두 사용할 때 올바른 문법은:
p
{
background:
[background-image]
[background-position]
[/ background-size] Background-size
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
150. 이롞적으로 background property를
모두 사용할 때 올바른 문법은:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat] Background-repeat
[background-attachment]
[background-origin]
[background-clip]
[background-color];
151. 이롞적으로 background property를
모두 사용할 때 올바른 문법은:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment] Background-attachment
[background-origin]
[background-clip]
[background-color];
152. 이롞적으로 background property를
모두 사용할 때 올바른 문법은:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin] Background-origin
[background-clip]
[background-color];
153. 이롞적으로 background property를
모두 사용할 때 올바른 문법은:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip] Background-clip
[background-color];
154. 이롞적으로 background property를
모두 사용할 때 올바른 문법은:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color]; Background-color
155. 아마 당싞은 슬래시가 background-
position 과 background-size 사이에
있는 것을 눈 여겨 보셨겠지요.