[Web] #4 CSS - box model, box-sizing

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. 

---

모든 html 요소는 box 모양으로 구성되어 있고, 이를 box model이라고 한다. box model은 html 요소를 margin, border, padding, content으로 구분한다. 

 

앞선 포스팅에서 설정한 width, height값은 content 영역의 크기만을 설정한 것이었다. 어떤 영역의 크기를 설정한 것인지는 개발자 도구(단축키 F12)를 통해 확인할 수 있다. box model이 어떻게 동작하는지 알아야 html 요소들을 잘 표현할 수 있다. 

 

padding, border, margin은 상하좌우 개별적으로 값을 지정할 수 있다. 위에서부터 시계 방향으로 값을 한 번에 지정할 수도 있다. top, right, bottom, left 순으로 적으면 된다. 

 

• content: 텍스트 등이 들어있는 실질적인 내용 부분
• padding: content와 border(내용과 테두리) 사이의 간격
• border: content와 padding을 감싸는 테두리
• margin: 다른 box들과의 간격

 

p:nth-child(3) {
	padding : 20px;
	border : 5px solid blue;
	border-top-width : 15px;
    	margin : 5px 10px 20px 30px;
	margin-right : 50px;
}

border는 width, style, color에 개별적으로 값을 줄 수도 있고,  굵기, 종류, 색상 순으로 한 번에 쓸 수도 있다. 굵기는 상하좌우로 설정할 수도 있다. 

 

p:nth-child(3) {
	margin : 10px 20px;
}

속성 값으로 2개만 지정하면, 첫 번째 값은 top, bottom이 되고, 두 번째 값은 right, left가 된다. 

---

위에서 언급한 content에만 width, height가 적용되는 것은 box sizing이 content-box로 기본 설정 값으로 설정되어 있었기 때문이다. css 속성인 box-sizing은 html 요소의 width, height를 계산하는 방법을 지정한다. 

 

속성 값으로는 content box, border box가 있다.

content-box가 기본 값이고 content까지 크기를 갖는다. 

border-box는 border까지의 크기를 갖는다. content, padding, border까지의 크기를 설정하는 것이다. 

 

보통 box-sizing은 border-box 값으로 준다. 기본 값 content-box로 모두 설정되어 있기 때문에 다음과 같은 코드로 html 요소의 box-sizing을 border-box 값으로 주면 편하다.

* {
	box-sizing : border-box;
}