박스 모델 속성 part1 - by. UXKM

Publishing
CSS
CSS 초급
박스 모델 속성 part1

요약 설명
박스 모델(Box Model)은 CSS가 모든 HTML 요소를 사각형 박스로 취급하여 배치하는 기본 개념입니다.
각 요소는 내용(content), 내부 여백(padding), 테두리(border), 외부 여백(margin) 영역으로 구성되며, 이 영역들을 조합하여 요소의 최종 크기와 위치를 결정합니다.

박스 모델을 이해하면 요소의 크기(width, height), 여백(margin, padding), 테두리(border) 등을 정확하게 제어할 수 있으며, 레이아웃을 구성하는 데 필수적인 개념입니다.

요약 설명
박스 모델 속성 part-1에서는

박스 크기(width, height) 속성

박스 외부 여백(margin) 속성

박스 내부 여백(padding) 속성

논리적 프로퍼티(Logical Properties)에 대한 내용을 다룹니다.

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

**내용(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 예시

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

HTML 요소의 크기를 설정하는 속성입니다.
width는 가로 크기, height는 세로 크기를 설정합니다.

							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로, 브라우저가 자동으로 너비를 설정합니다.

height 속성

요소의 세로 크기를 설정하는 속성입니다.
기본값은 auto로, 브라우저가 자동으로 높이를 설정합니다.

min-width 속성

요소가 가질 수 있는 최소 가로 크기를 설정하는 속성입니다.
기본값은 0이며, 요소의 너비가 설정한 값 이하로 줄어들지 않습니다.
브라우저 크기가 줄어들어도 요소의 너비는 최소값 이하로 줄어들지 않고 수평 스크롤바가 생성됩니다.

min-height 속성

요소가 가질 수 있는 최소 세로 크기를 설정하는 속성입니다.
기본값은 0이며, 요소의 높이가 설정한 값 이하로 줄어들지 않습니다.

max-width 속성

요소가 가질 수 있는 최대 가로 크기를 설정하는 속성입니다.
기본값은 none이며, 브라우저 크기에 맞춰 자동으로 조정됩니다.
width와 달리 반응형으로 동작하여 브라우저 크기가 줄어들면 요소의 너비도 함께 줄어듭니다.

max-height 속성

요소가 가질 수 있는 최대 세로 크기를 설정하는 속성입니다.
기본값은 none이며, 요소의 높이가 설정한 값보다 클 경우 수직 스크롤바가 생성됩니다.

박스 외부 여백(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 속성을 한 줄에 축약형으로 설정할 수 있습니다.
값이 동일한 경우 4가지 방식으로 사용할 수 있으며, auto로 설정하면 수평 방향 마진이 자동으로 설정되어 요소가 가운데 정렬됩니다.

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; }

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

요소의 내부 여백을 설정하는 속성입니다.
내용과 테두리 사이의 간격을 설정하며, 배경색의 영향을 받습니다.
방향별로 따로 설정할 수 있습니다.

							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 속성을 한 줄에 축약형으로 설정할 수 있습니다.
값이 동일한 경우 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] 순으로 설정합니다.
상/하의 값이 같고, 좌/우의 값이 같으면 하나로 명시하여 지정이 가능합니다.

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; }

논리적 프로퍼티(Logical Properties)

논리적 프로퍼티는 물리적 방향(left, right, top, bottom)이 아닌 문서의 쓰기 모드(writing mode)에 따라 자동으로 적응하는 CSS 속성입니다.
한국어나 영어처럼 좌에서 우로 쓰는 언어(LTR)와 아랍어처럼 우에서 좌로 쓰는 언어(RTL), 또는 일본어처럼 세로로 쓰는 언어에서도 동일한 스타일을 유지할 수 있습니다.

논리적 프로퍼티는 CSS Logical Properties and Values Level 1에 정의되어 있으며, 다국어 웹사이트나 양방향 레이아웃을 구현할 때 필수적입니다.

논리적 방향 개념

논리적 프로퍼티는 다음과 같은 방향 키워드를 사용합니다:

inline-start / inline-end: 텍스트가 시작하는 방향 / 끝나는 방향 (LTR: 좌/우, RTL: 우/좌)
block-start / block-end: 블록이 시작하는 방향 / 끝나는 방향 (LTR: 상/하, 세로 쓰기: 우/좌)

물리적 프로퍼티와 논리적 프로퍼티의 대응 관계:

								/* 물리적 프로퍼티 → 논리적 프로퍼티 (LTR 기준) */

								/* 크기 */
								width → inline-size
								height → block-size

								/* 여백 */
								margin-left → margin-inline-start
								margin-right → margin-inline-end
								margin-top → margin-block-start
								margin-bottom → margin-block-end

								/* 패딩 */
								padding-left → padding-inline-start
								padding-right → padding-inline-end
								padding-top → padding-block-start
								padding-bottom → padding-block-end

								/* 위치 */
								left → inset-inline-start
								right → inset-inline-end
								top → inset-block-start
								bottom → inset-block-end

여백의 논리적 프로퍼티

margin과 padding의 논리적 프로퍼티는 인라인 방향과 블록 방향으로 구분됩니다.

								.box {
									/* 인라인 방향 (가로) */
									margin-inline-start: 20px;  /* margin-left와 동일 (LTR) */
									margin-inline-end: 20px;    /* margin-right와 동일 (LTR) */
									margin-inline: 20px;       /* 양쪽 인라인 여백 */

									/* 블록 방향 (세로) */
									margin-block-start: 10px;   /* margin-top과 동일 */
									margin-block-end: 10px;     /* margin-bottom과 동일 */
									margin-block: 10px;        /* 양쪽 블록 여백 */
								}

								.box {
									/* 인라인 방향 (가로) */
									padding-inline-start: 20px;  /* padding-left와 동일 (LTR) */
									padding-inline-end: 20px;    /* padding-right와 동일 (LTR) */
									padding-inline: 20px;       /* 양쪽 인라인 패딩 */

									/* 블록 방향 (세로) */
									padding-block-start: 10px;   /* padding-top과 동일 */
									padding-block-end: 10px;     /* padding-bottom과 동일 */
									padding-block: 10px;        /* 양쪽 블록 패딩 */
								}

크기의 논리적 프로퍼티

width와 height 대신 inline-size와 block-size를 사용할 수 있습니다.

								.box {
									/* 물리적 프로퍼티 */
									width: 300px;
									height: 200px;

									/* 논리적 프로퍼티 (동일한 결과) */
									inline-size: 300px;  /* width와 동일 */
									block-size: 200px;  /* height와 동일 */
								}

위치의 논리적 프로퍼티

position 속성과 함께 사용하는 top, right, bottom, left 대신 inset 논리적 프로퍼티를 사용할 수 있습니다.

								.box {
									position: absolute;

									/* 물리적 프로퍼티 */
									top: 10px;
									right: 20px;
									bottom: 10px;
									left: 20px;

									/* 논리적 프로퍼티 (동일한 결과) */
									inset-block-start: 10px;   /* top과 동일 */
									inset-inline-end: 20px;    /* right와 동일 (LTR) */
									inset-block-end: 10px;     /* bottom과 동일 */
									inset-inline-start: 20px;  /* left와 동일 (LTR) */

									/* 또는 속기형 */
									inset: 10px 20px;  /* block inline */
								}

논리적 프로퍼티 예제

쓰기 모드에 따라 자동으로 적응하는 카드 레이아웃 예제입니다.