박스 모델 속성 part1 - by. UXKM

2024-07-30

요약 설명
박스 모델 속성 part-1 에서는
박스 크기(width, height) 속성,
박스 외부 여백(margin) 속성,
박스 내부 여백(padding) 속성에 대한 내용을 다루고 있습니다.

CSS의 기본 개념 중 하나 인 박스 모델을 설명합니다. 이 모델은 CSS가 내용, 패딩, 경계 및 여백 영역을 포함하여 요소를 배치하는 방법을 정의합니다.
box-sizing속성으로 설정하면 content-box(기본값) 및 요소가 블록 요소의 경우, 콘텐츠 영역의 크기는 명시적으로 정의 할 수 있습니다.
실제 홈페이지의 디자인에 중요한 역할을 하며, 항상 사용되고 가장 중요한 속성들입니다.
width와 height 속성을 비롯한 모든 박스모델 관련 속성(margin, padding, border, box-sizing 등)은 상속되지 않습니다.

**[박스 모델 다이어그램]**

내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.

패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.

테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다.

마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다.

`width : width + right padding + left padding + right border + left border + right margin + left margin`

`height : height + top padding + bottom padding + top border + bottom border + top margin + bottom margin`

`width:200px; height:200px; margin:20px auto; padding:20px; border:10px solid skyblue;`
위와 같이 명시된 경우의 크롬 devTool에서 확인한 boxmodel 예시

content boxmodel — `width:200px; height:200px; margin:20px auto; padding:20px; border:10px solid skyblue;`
위와 같이 명시된 경우의 크롬 devTool에서 확인한 boxmodel 예시

2.9.1. 박스 크기(width, height)를 제어하는 속성

CSS를 이용하면 HTML 요소의 크기를 마음대로 설정할 수 있습니다.
CSS에서 크기 조절을 위해 사용할 수 있는 속성은 다음과 같습니다.

							div {
								width: <length> | <percentage>;
								height: <length> | <percentage>;
								max-width: <length> | <percentage>;
								max-height: <length> | <percentage>;
								min-width: <length> | <percentage>;
								min-height: <length> | <percentage>;
							}

width 속성

이 속성의 기본 설정값은 auto이며, 웹 브라우저가 각 HTML 요소에 맞게 자동으로 너비를 설정해 줍니다.

width: <length> | <percentage>

height 속성

이 속성의 기본 설정값은 auto이며, 웹 브라우저가 각 HTML 요소에 맞게 자동으로 높이를 설정해 줍니다.

height: <length> | <percentage>

min-width 속성

min-width 속성은 해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정합니다.
이 속성의 기본 설정값은 0이며, 해당 HTML 요소의 너비에 제한을 두지 않겠다는 의미입니다.
min-width 속성이 설정된 요소에 width 속성값을 따로 설정하지 않으면 초기 너비(width)는 100%를 가지게 됩니다.
이때 웹 브라우저의 크기가 줄어들면 거기에 맞춰 HTML 요소의 너비도 자동으로 줄어듭니다.
하지만 웹 브라우저가 min-width 속성으로 설정된 너비 이하로 줄어들면, HTML 요소의 너비는 더는 줄어들지 않고 수평 스크롤 바를 생성하게 됩니다.

min-width: <length> | <percentage>

min-height 속성

min-height 속성은 지정된 HTML 요소가 가질 수 있는 최소 높이(height)를 설정합니다.
이 속성의 기본 설정값은 0이며, 해당 HTML 요소의 높이에 제한을 두지 않겠다는 의미입니다.
min-height 속성을 설정하면 해당 HTML 요소의 높이를 설정된 높이 이하로 제한합니다.
즉 height 속성값이 min-height 속성값 이하로 낮아지지 않도록 합니다.
이러한 min-height 속성값은 max-height 속성값과 height 속성값보다 먼저 적용됩니다.

min-height: <length> | <percentage>

max-width 속성

max-width 속성은 해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정합니다.
이 속성의 기본 설정값은 none이며, 해당 HTML 요소의 너비에 제한을 두지 않겠다는 의미입니다.
width 속성으로 너비를 설정하면, 설정된 너비 이하로 브라우저의 크기가 줄어들 때 해당 요소에 스크롤 바를 생성하게 됩니다.
하지만 max-width 속성으로 너비를 설정하면 다음과 같이 좀 더 유연한 결과를 얻을 수 있습니다.
max-width 속성으로 너비를 설정하면 줄어드는 웹 브라우저의 크기에 맞춰 해당 HTML 요소의 너비도 자동으로 줄어듭니다.

max-width: <length> | <percentage>

max-height 속성

max-height 속성은 해당 HTML 요소가 가질 수 있는 최대 높이(height)를 설정합니다.
이 속성의 기본 설정값은 none이며, 해당 HTML 요소의 크기에 따라 높이가 자동으로 설정됩니다.
max-height 속성으로 최대 높이를 설정하면, 해당 HTML 요소의 높이를 설정된 높이 이하로 제한합니다.
만약 해당 요소의 높이가 설정된 최대 높이보다 클 경우에는 수직 스크롤 바를 생성하게 됩니다.

max-height: <length> | <percentage>

2.9.2. 박스 외부 여백(margin)을 제어하는 속성

margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정합니다.
이러한 마진 영역은 패딩 영역과는 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않습니다.
CSS를 사용하면 마진 영역의 크기를 방향별로 따로 설정할 수 있습니다.
margin 속성값을 음수로 설정하여 해당 요소를 다른 요소의 위에 겹치게 할 수도 있습니다.
margin 속성값을 inherit로 설정하면, 부모(parent) 요소의 margin 속성값을 그대로 물려받습니다.
모든 margin 속성을 이용한 스타일을 한 줄에 설정할 수 있습니다.

							div {
								margin: margin-width | inherit;
							}

margin 속성

margin을 각각 방향별로 설정할 수 있습니다.

								div {
									margin-top: 10px;    /* 윗쪽의 마진(margin) 값을 설정합니다. */
									margin-right: 10px;  /* 오른쪽의 마진(margin) 값을 설정합니다. */
									margin-bottom: 10px; /* 아래쪽의 마진(margin) 값을 설정합니다. */
									margin-left: 10px;   /* 왼쪽의 마진(margin) 값을 설정합니다. */
								}

margin 축약형 속성

모든 margin 속성을 이용한 스타일을 한 줄에 설정할 수 있습니다.
축약형(shorthand) 방식으로 사용할 때 값이 동일한 경우 4가지 방식으로 사용할 수 있습니다.
margin 속성값을 auto로 설정하면, 웹 브라우저가 수평 방향 마진(margin) 값을 자동으로 설정합니다.
즉, 해당 HTML 요소의 왼쪽과 오른쪽 마진을 자동으로 설정하게 됩니다.
그 결과 해당 요소는 그 요소를 포함하고 있는 부모(parent) 요소의 정중앙에 위치하게 됩니다.

4개의 값을 지정할 때 top, right, bottom, left 순(시계방향)으로 설정합니다.
div { margin: 10px 20px 30px 40px; /* 위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다. */ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; }
3개의 값을 지정할 때 top, [right/left], bottom 순으로 설정합니다.
좌/우의 값이 같으면 하나로 명시하여 지정이 가능합니다.

div { margin: 25px 50px 75px; /* 위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다. */ margin-top: 25px; margin-right: 50px; margin-left: 50px; margin-bottom: 75px }
2개의 값을 지정할 때 [top/bottom], [right/left] 순으로 설정합니다.
상/하의 값이 같고, 좌/우의 값이 같으면 하나로 명시하여 지정이 가능합니다.

이 때 좌/우의 값을 auto로 지정하면 가운데로 정렬이 가능합니다.

div { margin: 25px 50px; /* 위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다. */ margin-top: 25px; margin-bottom: 25px; margin-right: 50px; margin-left: 50px; }
1개의 값을 지정하여 설정합니다.
상/우/하/좌의 값이 같으면 하나로 명시하여 지정이 가능합니다.

div { margin: 25px; /* 위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다. */ margin-top: 25px; margin-right: 25px; margin-bottom: 25px; margin-left: 25px; }

2.9.3. 박스 내부 여백(padding)을 제어하는 속성

padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다.
이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다.
CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있습니다.

							div {
								padding: padding-width | inherit;
							}

padding 속성

padding을 각각 방향별로 설정할 수 있습니다.

								div {
									padding-top: 10px;    /* 윗쪽의 패딩(padding) 값을 설정합니다. */
									padding-right: 10px;  /* 오른쪽의 패딩(padding) 값을 설정합니다. */
									padding-bottom: 10px; /* 아래쪽의 패딩(padding) 값을 설정합니다. */
									padding-left: 10px;   /* 왼쪽의 패딩(padding) 값을 설정합니다. */
								}

padding 축약형 속성

모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있습니다.
축약형(shorthand) 방식으로 사용할 때 값이 동일한 경우 4가지 방식으로 사용할 수 있습니다.

4개의 값을 지정할 때 top, right, bottom, left 순(시계방향)으로 설정합니다.
div { padding: 10px 20px 30px 40px; /* 위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다. */ padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; }
3개의 값을 지정할 때 top, [right/left], bottom 순으로 설정합니다.
좌/우의 값이 같으면 하나로 명시하여 지정이 가능합니다.

div { padding: 25px 50px 75px; /* 위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다. */ padding-top: 25px; padding-right: 50px; padding-left: 50px; padding-bottom: 75px; }
2개의 값을 지정할 때 [top/bottom], [right/left] 순으로 설정합니다.
상/하의 값이 같고, 좌/우의 값이 같으면 하나로 명시하여 지정이 가능합니다.

이 때 좌/우의 값을 auto로 지정하면 가운데로 정렬이 가능합니다.

div { padding: 25px 50px; /* 위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다. */ padding-top: 25px; padding-bottom: 25px; padding-right: 50px; padding-left: 50px; }
1개의 값을 지정하여 설정합니다.
상/우/하/좌의 값이 같으면 하나로 명시하여 지정이 가능합니다.

div { padding: 25px; /* 위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다. */ padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px; }