Notice
Recent Posts
Recent Comments
Link
«   2024/02   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29
Archives
Today
Total
관리 메뉴

web sprit

box-sizing 속성 본문

웹5/CSS3

box-sizing 속성

커드만 2016. 4. 6. 07:00

box-sizing 속성은 CSS3 기술로서 

이것을 사용함으로서 여백과 선을 포함시킬것인지 아님 내용만 포함시킬 것인지를 정할 수 있습니다.

우선 지원하는 브라우저를 알아보도록 하겠습니다.


크롬

엣지 

익스플로러 

파폭 

사파리 

오페라 

10.0 ~ 4.0

-webkit- 

12.0 

8.0+ 

29.0 ~ 2.0

-moz- 

5.1 ~ 3.2

-webkit- 

9.5 



box-sizing 속성값

 content-box 

너비와 높이의 사이즈를 입력했을 때 그에 관한 사이즈를 선이나 안의 여백 부분을 포함시키지 않은 순수한 내용 부분만 사이즈가 적용됩니다.

즉 box-sizing 의 값을 지정하지 않았을때와 같습니다. 기본이라는 것이죠.


 border-box 

width값과 height값이 있을경우 여백과 선을 포함시켜 사이즈를 적용 시켜 줍니다. 즉 width가 100px이라면 100px 안에서 padding이나 border값이 적용되어도 더이상 넓이가 늘어나지 않고 정해진 사이즈안에서 적용됩니다.


 padding-box 

border-box 와 비슷하나 border 선을 제외한 여백과 내용부분을 포함하여 사이즈를 적용합니다.



최신기술이므로 접두사를 사용하여 css 작성합니다. 다음순으로 작성하여 적용하면 됩니다.

1
2
3
4
5
6
7
box{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
 
cs






'웹5 > CSS3' 카테고리의 다른 글

transform 속성  (0) 2016.04.14
벤더프리픽스 (Vendor Prefix)  (0) 2016.04.12
input의 placeholder 속성 꾸미기  (0) 2016.04.08
CSS 말줄임, 점처리, 생략처리 방법  (0) 2016.04.07
CSS 초기화 (CSS Reset) 종류 및 방법  (0) 2016.03.16
Comments