[CSS3] 엘리먼트의 사이즈 정의 (box-sizing)
-
관리자 /
2011.12.07 01:45 /
hit 3,779 추천
0
엘리먼트의 사이즈를 어디까지 포함시킬 것인지 지정할 수 있습니다. 예를 들어 엘리먼트 사이즈를 입력했을 때 입력한 값을 안의 여백과 선을 포함시킬 것인지 아니면 내용만 포함시킬 것인지 지정할 수 있습니다.
5개의 대표 브라우저에서 사이즈 정의 속성을 지원합니다. 단 Firefox같은 경우에는 브라우저의 특성을 꼭 입력해야 합니다. 브라우저의 특성 입력 방법을 모르신다면 CSS3 가이드북 페이지의 브라우저의 특성 링크를 클릭하세요.
box-sizing 속성은 아까도 말했듯이 사이즈를 입력했을 때 입력한 사이즈를 어디까지 포함시킬 것인지 지정할 수 있습니다. 속성에 관한 값에는 content-box와 border-box가 있습니다. content-box는 너비와 높이의 사이즈를 입력했을 때 그에 관한 사이즈를 선이나 안의 여백 부분을 포함시키지 않은 순수한 내용 부분만 사이즈가 적용됩니다. 즉 content-box 값은 모든 엘리먼트에다가 box-sizing 속성을 입력하지 않았을 때와 같습니다. border-box는 내용 부분만 사이즈가 적용되는 content-box와 달리 안의 여백과 선을 포함시켜 사이즈를 적용시켜줍니다. 추가로 padding-box가 있는데 선을 제외한 안의 여백까지 사이즈를 적용시켜줍니다.
box-sizing의 값을 border-box로 입력하였을 때 사이즈는 안의 여백과 선까지 적용시켜 조절해주므로 안의 여백이나 선의 두께가 제각각이여서 사이즈를 계산하기 복잡한 엘리먼트에 유용하게 쓰일 수 있습니다.
5개의 대표 브라우저에서 사이즈 정의 속성을 지원합니다. 단 Firefox같은 경우에는 브라우저의 특성을 꼭 입력해야 합니다. 브라우저의 특성 입력 방법을 모르신다면 CSS3 가이드북 페이지의 브라우저의 특성 링크를 클릭하세요.
box-sizing 속성은 아까도 말했듯이 사이즈를 입력했을 때 입력한 사이즈를 어디까지 포함시킬 것인지 지정할 수 있습니다. 속성에 관한 값에는 content-box와 border-box가 있습니다. content-box는 너비와 높이의 사이즈를 입력했을 때 그에 관한 사이즈를 선이나 안의 여백 부분을 포함시키지 않은 순수한 내용 부분만 사이즈가 적용됩니다. 즉 content-box 값은 모든 엘리먼트에다가 box-sizing 속성을 입력하지 않았을 때와 같습니다. border-box는 내용 부분만 사이즈가 적용되는 content-box와 달리 안의 여백과 선을 포함시켜 사이즈를 적용시켜줍니다. 추가로 padding-box가 있는데 선을 제외한 안의 여백까지 사이즈를 적용시켜줍니다.
.example-div {
width: 650px;
height: 120px;
color: #FFF;
font: 24px 'Myriad Pro';
background: #999;
padding: 16px 30px 3px 50px;
border: 2px solid #696969;
border-right-width: 90px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}height: 120px;
color: #FFF;
font: 24px 'Myriad Pro';
background: #999;
padding: 16px 30px 3px 50px;
border: 2px solid #696969;
border-right-width: 90px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
box-sizing의 값을 border-box로 입력하였을 때 사이즈는 안의 여백과 선까지 적용시켜 조절해주므로 안의 여백이나 선의 두께가 제각각이여서 사이즈를 계산하기 복잡한 엘리먼트에 유용하게 쓰일 수 있습니다.
담아가겠습니다.