박스(Box) 모델

HTML의 모든 요소는 상자(Box)의 형태를 갖고 있다. 

태그 내부에 위치해 실제 표시되는 내용을 Content(내용)라고 한다. 보이지 않지만 이러한 컨텐츠를 감싸고 있는 다른 요소들이 있다. 아래 그림과 같이 박스 형태 전체를 가리켜 박스 모델(Box Model)이라고 부른다.

내용(Content)는 이미지나 텍스트와 같이 우리가 코드 상에서 태그 사이에 담는 내용, 즉 실제로 담고 있는 부분이다. 

경계선(Border)은 말 그대로 컨텐츠를 감싸고 있는 테두리이다.

패딩(Padding)은 여백이라는 뜻으로 컨텐츠와 경계선 사이의 여백이다.

마진(Margin)은 경계선 밖의 여백이다.

---

지금부터 박스 모델에 대해 자세히 알아보자.

Content

---

#inner {
	background-color: pink;
	width: 200px;
	height: 100px;
}

Content 영역박스의 바탕색과 너비를 조정하였다. 컨텐츠 영역의 크기가 지정되어 있는 상태에서 컨텐츠의 크기를 늘리면(글자수를 늘리거나 글의 크기를 키우거나) 내용이 컨텐츠 박스를 벗어나게 된다.

 

 

 

 

 

---

border 

---

경계선은 크게 세 프로퍼티(속성)를 이용한다. border-style, border-width, border-color

 

html 소스코드

<div id="main">
	<div class="inner">
		TOP
	</div>
	<div class="inner" id="target">
		DOWN
	</div>
</div>

css 소스코드

body { background-color: skyblue; }
.inner {
    background-color: pink;
    width: 200px;
    height: 100px;
}
#target {
	border-color: black;
	border-style: solid;
	border-width: 8px;
}

실행화면

 border-style

---

 border-style은 말 그대로 선의 스타일로, 선의 종류를 지정하는 프로퍼티이다. 

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit

네 방향의 스타일을 동시에 적용하는 border-style 에서 top, right, bottom, left의 순서로 스타일을 지정한다.

border-style: solid dashed dotted double;
/*위와 아래는 동일한 스타일*/
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;

border-top-style: solid; /* 상 */
border-style: solid; /* 상하좌우 */
border-style: solid dashed; /* 상하/좌우 */
border-style: solid dashed dotted; /* 상/좌우/하 */
border-style: solid dashed dotted double; /* 상/우/하/좌 */

CSS에서는 방향이 상(Top), 우(Right), 하(Bottom), 좌(Left) 순서를 적용된다.

 

border-width, border-color

---

border-width, border-color를 이용하여 선의 두께와 색을 지정할 수 있다. 이 두 프로퍼티는 border-style 없이는 적용되지 않는다.

#target {
	border-style: dotted;
	border-color: black red yellow blue;
	border-width: 8px 4px 16px 24px;
}

 

border의 shortcut

---

border 프로퍼티는 Shortcut을 이용하여 한 번에 지정할 수 있다. 

border: red solid 1px;

만약 한 면에만 선을 지정하고 싶으면 아래와 같이 작성한다. 

border-bottom: red solid 1px;

 

border-radius

---

border-radius라는 프로퍼티는 border로 만든 경계선을 둥글게 표현할 때 사용한다. 

<div id="main">
	<div class="box radius">border-radius</div>
</div>

body { background-color: skyblue; }
.box {
	background-color: pink;
	width: 100px;
	height: 100px;
}
.radius {
	border: 8px solid red;
	border-radius: 12px;
}

border-radius의 값은 아래와 같은 모서리의 반지름의 값이다.

 

border-radius shortcut과 타원형

---

만약 border-radius: 8px 16px 24px 36px; 을 적용하면 top-left -> top-right -> bottom-right -> bottom-left 순서로 적용된다. 

 

---

 

padding과 margin

---

margin: 12px 24px 32px 63px; /* 상 우 하 좌*/

padding: 6px 12px 24px 32px; /* 상 우 하 좌*/

 

 

 

마진 상쇄

---

html 소스코드

<div id="main">
	<div id="top" class="box">
		TOP
	</div>
	<div id="bottom" class="box">
		BOTTOM
	</div>
</div>

css 소스코드

body { background: skyblue;}
.box {
	display: inline-box;
	width: 100px;
	height: 100px;
	padding: 20px;
	margin: 20px;
}
#top{
	background: pink;
}
#bottom {
	background: lemonchiffon;
}

 

위의 소스코드를 보면 서로 다른 Top박스와 Bottom박스가 만들어졌고, Top의 아래의 margin과 Bottom의 위의 margin 20px 생성됬는데 서로 만나니깐 20px+20px=40px이 되는게 아니라 20px로 실행되어 마진이 서로 상쇄된 것이 확인된다. 

HTML에서는 위아래로 맞닿은 두 요소 사이 마진은 더 큰 쪽을 기준으로 결정된다는 사실을 기억하자

 

 

box-sizing

---

html 소스코드

<div id="main">
	<div id="left" class="box">
		LEFT
	</div>
	<div id="right" class="box">
		RIGHT
	</div>
</div>

css 소스코드

#main {
	width: 200px;
}
.box {
	width: 100px;
	height: 100px;
	display: inline-block;
}
#left {
	float: left;
	background: pink;
}
#right {
	background: lemonchiffon;
}

실행화면

이 실행화면에서 #right 박스를 padding과 border로 꾸미려고 아래와 같이 코드를 수정하면 예상한 것과 달리 #left과 #right이 분리되어 버린다. 

#right {
	background: lemonchiffon;
	padding: 24px;
	border: red solid 4px;
}

이런 고민을 해결하기 위해 box-sizing 프로퍼티를 이용할 수 있다. 

속성 값으로는 content-box, border-box가 있다. 전자는 말 그대로 컨텐츠 박스를 기준으로 크기를 정하고, 후자는 border 바로 전 paddin까지를 기준으로 정한다.

#right {
	background: lemonchiffon;
	padding: 24px;
	border: red solid 4px;
	box-sizing: border-box;
}