CSS - Box model

이상원·2022년 3월 14일

CSS groom

CSS

목록 보기

5/7

HTML의 모든 요소들은 다영한 내용을 가지지만 박스 모양으로 포장된다는 공통점을 가지고 있습니다. 이에 대해 알아보겠습니다.

박스(BOX) 모델

HTML의 모든 요소(Element)는 상자(Box)의 형태를 가집니다. 이 말은 브라우저에 출력되는 컨텐츠가 사각형 박스 형태로 출력된다는 것을 말합니다.

보이지는 않지만 컨텐츠를 감싸는 다른 요소들이 있습니다. 이러한 박스 형태 전체를 가리켜 박스 모델(Box Model)이라고 부릅니다.

박스 모델은 내용(Content), 패딩(Padding), 경계선(Border), 마진(Margin)으로 이루어져 있습니다.

내용 (Content) :
이미지나 텍스트와 같이 코드 상에서 태그 사이에 담은 내용, 즉 실제로 담고 있는 부분입니다.
경계선 (Border) :
말 그대로 컨텐츠를 감싸고 있는 테두리입니다.
패딩 (Padding) :
컨탠츠와 경계선 사이의 여백입니다.
마진 (Margin) :
경계선 밖의 여백입니다.

Content

보통 요소의 크기를 정의할 때 width나 height를 많이 사용합니다.
이런 너비와 크기는 box model 중 content의 크기에 해당합니다.

body { background-color: skyblue; }
#inner {
	background-color: pink;
}

보통 요소의 크기를 정의할 때 width , height를 많이 사용합니다. 이런 너비와 크기는 Box Model 중 content의 크기에 해당한다고 볼 수 있습니다.

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

한편 컨텐츠의 영역이 정해져있는 상태에서 컨텐츠의 크기를 늘리면 내용이 컨텐츠 박스를 벗어나게 됩니다. 또한 컨텐츠 박스를 벗어난 상태에서 또다른 내용이 추가될 경우 자동으로 개행이 맞춰질 것 같지만 그렇지 않습니다.

<div id="main">
	<div class="inner">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati labore doloribus quod nulla earum facilis, fugiat culpa, modi accusantium iste ea quidem repellat omnis, quia totam repudiandae atque. Distinctio, quae!
	</div>
	<div class="inner">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati labore doloribus quod nulla earum facilis, fugiat culpa, modi accusantium iste ea quidem repellat omnis, quia totam repudiandae atque. Distinctio, quae!
	</div>
</div>

body { background-color: skyblue; }
.inner {
    background-color: pink;
    width: 200px;
    height: 100px;
}

즉, 컨텐츠 내용이 컨텐츠 박스보다 크더라도 컨텐츠 박스 기준으로 컨텐츠 박스 두 개가 위 아래로 배치되어 있음을 확인할 수 있습니다.(마진, 패딩 등이 없는 경우)

border

이번에는 컨텐츠를 감싸는 border에 대해 알아보겠습니다. 경계선(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

이 중 자주 사용하는 4가지는 실선(solid), 파선(dashed), 점선(dotted), 이중선(double)에 해당합니다.

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와 함께 margin, padding은 border-top-style: solid;같이 방향을 지정하는 프로처티와 함께 사용하지 않는한, 사용하는 개수에 따라 적용되는 스타일의 위치가 달라집니다.

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

border-width와 border-color

border-width와 border-color를 이용하여 선의 두께와 색을 지정할 수 있습니다. 이 두 프로퍼티는 border-style 없이 지정했을 때는 적용되지 않습니다. 또한 사용하는 개수에 따라 적용되는 위치가 달라지고 위치를 지정하여 따로 스타일을 지정할 수 있습니다.

예시)

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

body { background-color: skyblue; }
.inner {
	background-color: pink;
	width: 200px;
	height: 100px;
}
#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로 만든 경계선을 둥글게 표현할 때 사용합니다.

한편 border-raidus는 테두리 존재 여부와 별개로 전체 background에 적용됩니다. 즉, 원을 만들거나 모서리가 둥근 사각형을 만들고 싶다면 border 없이 border-radius를 이용합니다.

예시)

<div id="main">
	<div class="box radius">
		<div class="circle"></div>
	</div>
</div>

body { background-color: skyblue; }
.box {
	background-color: pink;
	width: 100px;
	height: 100px;
}
.radius {
	border-radius: 12px;
}
.circle {
	width: 24px;
	height: 24px;
	background: #00000050;
	border-radius: 24px;
}

border-radius shortcut과 타원형

border-radius 역시 shortcut을 이용 한번에 지정하거나 네 방향으로 나눠 부분적으로 적용할 수 있습니다.

추가로 타원형의 radius는 다음과 같이 적용이 됩니다.

만약 border-radius: 8px 16px 24px 36px;을 적용하면 top-left : 8 px -> top-right : 16px -> bottom-right : 24px -> bottom-left : 36px, 방향으로 적용됩니다.

네 모서리에 모두 적용하고 싶다면 /로 구분하여 차례대로 작성합니다.

.radius {
	border-radius: 8px 16px 24px 36px / 36px 24px 16px 8px;
}

padding 과 margin

border를 기준으로 경계선 내부 여백을 패딩(Padding), 경계선 외부 여백을 마진(Margin)이라고 합니다.

예시)

<div class="box">
	<div class="inner">
		구름EDU
	</div>
</div>

body { background: skyblue;}
.inner {
	background: lemonchiffon;
	width: 100%;
	height: 100%;
}
.box {
	display: inline-block;
	background: pink;
	width: 100px;
	height: 100px;
	border: 8px solid red;
	margin: 40px;
	padding: 20px;
}

마진 상쇄

위아래로 맞닿은 두 요소 사이 마진은 더 큰 쪽을 기준으로 결정됩니다. 즉 두 요소에 가각 마진을 적용하더라도 서로 맞닿아 있다면 마진이 따로 존재하지 않는 다는 것입니다.

box-sizing

우리가 일반적으로 width나 height를 적용하면 항상 content의 크기가 조정된 것을 기억하실겁니다.

이러한 특성으로 인하여 다른 요소들과 배치할 때 종종 크기 값을 어떻게 줘야 할지 고민할 때가 많습니다.
이럴 때 box-sizing 프로처티를 이용할 수 있습니다. 일반적으로 기본 값으로 box-sizing : content-box; 를 사용합니다. 즉, content-box를 기준으로 크기를 정합니다. 이와 달리 border-box는 border 바로 전 padding 까지를 기준으로 정해집니다.