css3 backgrounds
Post on 25-Dec-2014
6.966 Views
Preview:
DESCRIPTION
TRANSCRIPT
5가지 background 속성들:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
CSS3에서는 상세한 배경위치 설정을
위해 4개의 속성 값을 사용할 수
있습니다.
p { background-position: left 10px top 15px; }
1 2 3 4
처음 두 개의 속성 값은
수평축 (horizontal axis) 입니다.
p { background-position:left 10px top 15px; }
Horizontal axis
그 뒤의 두 개의 속성 값은
수직 축 (vertical axis) 입니다.
p { background-position:
left 10px top 15px; }
Vertical axis
이제 CSS3에선 background-repeat을
1개의 속성 값 대싞에
2개의 속성 값으로 정의할 수 있습니다.
div { background-repeat:
repeat repeat; }
맊약 하나의 속성 값맊 사용하는
경우에는 브라우저가 double value로
해석합니다.
이런 방식은 background-repeat 값이
하위 호홖성을 갖게 합니다.
div { background-repeat:
repeat [repeat]; }
Browser doubles value
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; }
Round 값은 배경 영역에 이미지가
적젃히 채워질 때까지 반복된 후에
이미지가 늘어나서 갂격을 맞춥니다.
충분한 횟수로 반복되지 않아도
이미지가 늘어나기 때문에 영역이 모두
채워집니다.
p { background-repeat: round; }
예를 들면, 우리는 이제 수평과 수직
동작을 각각 지정하는 두 가지 속성 값을
함께 사용할 수 있습니다.
div { background-repeat:
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
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 속성은
배경영역 앆에서 배경이미지가
잘려 보인다면(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
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
크기 값은 width와 height를
지정합니다. 처음 값은 width, 뒤의
값은 height 입니다.
div { background-size: 10px 20px; }
Width Height
퍼센트 값은 부모 요소에 비례하여
width, height 값을 설정합니다.
첫 번째 값은 width, 두 번째 값은
height 입니다.
div { background-size: 20% 40%; }
Width Height
속성 값 contain은
이미지를 비율 유지한 채로
확대/축소(scale) 할 것입니다.
그래서 배경 영역에 꼭 맞는 크기로
이미지가 맞춤(fit) 될 수 있습니다.
div { background-size: contain; }
속성 값 cover는
이미지를 비율 유지한 채로
확대/축소(scale) 할 것입니다.
배경 영역에 남는 공갂이 없는 크기 중
가장 작은 크기로 정해집니다.
div { background-size: cover; }
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
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
Longhand로 한 개의 요소 안에 3개의
배경 이미지를 넣은 예 입니다.
background-image 2
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 3
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
;
;
;
;
;
;
;
제작자에 의해 지정되지 않았을 때
값의 리스트 맊큼 반복되어 지정됩니다.
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]
Longhand로 한 개의 요소 안에
3개의 배경 이미지를 넣고
배경 색상을 지정한 예 입니다.
Background-color
p
{
background-image:
background-position:
background-size:
background-repeat:
background-attachment:
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
;
;
;
;
;
;
;
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]
[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%] /
[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;
}
두번째규칙에는배경이미지를지정하지않아서,브라우저에의해배경이미지가 none으로설정되었습니다.
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(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px;
}
3개의 배경이미지가 축약형으로
하나의 요소에 적용된 갂단한 예입니다.
background-image 1
p
{
background:
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px;
}
3개의 배경이미지가 축약형으로
하나의 요소에 적용된 갂단한 예입니다.
background-image 2
p
{
background:
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px;
}
3개의 배경이미지가 축약형으로
하나의 요소에 적용된 갂단한 예입니다.
background-image 3
p
{
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:
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px;
background-color: yellow;
}
별도로 선언된 background-color.
background-color
이롞적으로 background property를
모두 사용할 때 올바른 문법은:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
}
background-image
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
}
Background-position
이롞적으로 background property를
모두 사용할 때 올바른 문법은:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
}
Background-size
이롞적으로 background property를
모두 사용할 때 올바른 문법은:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
}
Background-repeat
이롞적으로 background property를
모두 사용할 때 올바른 문법은:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
}
Background-attachment
이롞적으로 background property를
모두 사용할 때 올바른 문법은:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
}
Background-origin
이롞적으로 background property를
모두 사용할 때 올바른 문법은:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
}
Background-clip
이롞적으로 background property를
모두 사용할 때 올바른 문법은:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
}
Background-color
이롞적으로 background property를
모두 사용할 때 올바른 문법은:
슬래시는 position과 size를 분리합니다.
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
}
슬래시
그래서 현재는, 축약형 문법은 복잡하게
사용하지 않을 때는 좋습니다.
하지맊 여러 가지 속성을 함께
사용하고자 한다면 발생할 수 있는
문제를 피하기 위해 축약하지 않은
문법을 사용하는 것이 좋을 것입니다.
p
{
background:
url(demo.jpg) no-repeat 0 0,
linear-gradient(left, blue, green);
}
이는 다중 배경 이미지 에서도
그래디언트를 사용할 수 있음을
의미합니다.
Linear gradient
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));
}
예시:
top related