CSS 기초: box-sizing

CSS 기초: box-sizing

매번 CSS 입력할 때 사용하는 문구로 그냥 사용하는 것이 아닌 것은 알지만 이런 기초도 모르고 관행처럼 사용했습니다. 이번에 Box-sizing:border-box를 알고 사용하고자 이렇게 포스트 합니다.

우선 Box-sizing을 알기 위해서는 CSS Box Model을 먼저 이해가 필요한데 이 부분은 링크로 대신하겠습니다. 대신 margin과 padding는 따로 포스팅 할것입니다. 이것 역시 알고 이해해야 할 것 같아서...

매우 널리 사용해서 Nomarlize.css에서 이 부분이 포함될줄 알았는데 없더군요. 대신 hr태그에는 'hr { box-sizing: content-box; /* 1 */'이 있더군요. 널리 사용하는데도 왜 빠졌는지 극도의 최적화로 범용적으로 사용하려는 부분 같은데 몇몇 문구를 봐도 이해가 되지 않더군요. 보통은 전역자('*')나 html부분에 사용하지만 UI의 호환성 부분에서 다양성 때문 일 것도 같아서 빠졌나 봅니다.라고 생각하고 넘어갑니다. 그냥 제가 사용하면 되니...

설명이 길었네요 보통은 밑의 2가지 방법을 많이 사용합니다.

/* 첫번째 방법 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 두번째 방법 */
html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

위의 방법중에 W3C에서도 권장하는 방법으로 위 둘중에 저같은 경우에는 전역선택자 부분인 첫번째 부분을 사용합니다. 

그럼 왜 사용하는가,

설명 : box-sizing 속성 - 박스 너비 기준 정하기

형식 구문

box-sizing : content-box | border-box

box-sizing 의 속성

속성 값	설명
content-box	설정한 width와 height의 값을 margin과 padding을 무시하고 설정함.
border-box	설정한 width 와 height의 값을 margin과 padding 값까지 계산에서 설정함.

말로 적으면 이해가 되지 않아 밑의 그림으로 설명하겠습니다.

예제 : width: 300px; height: 140px; border: 10px solid black; 의 CSS값을 주어 테스트 하겠습니다.

두 박스에 box-test1 은 box-sizing: content-box;을 주었고, box-test2 은 box-sizing: border-box;을 주었습니다.

 

box-test1

box-test1의 결과물은 content를 기준으로 가로 300에 세로 140의 박스가 보여지고 그다음에 테두리 10을 추가하여 결과물은 가로 320에 세로 160이 되었습니다.

즉 ,
box는 가로 10 + 300 + 10 = 320이고,
세로 10 + 140 + 10 = 160입니다.

 

box-test2

box-test2의 결과물은 border를 기준으로 가로 300에 세로 140의 박스가 보여지지만 그다음에 테두리 10이 있어 테두리를 뺀 결과물이 보여집니다. content가 가로 280에 세로 120이 되었습니다.

즉 ,
box는 가로 300에 맞주어야 해서 300 - 10 - 10이고,
세로 140에 맞주어야 해서 140 - 10 - 10입니다.