박스 모델과 관련된 CSS 속성

Articles

CSS 소개

박스 모델과 관련된 CSS 속성

이 기사에서는 박스 모델과 관련된 CSS 속성에 대해 설명합니다.

너비, 높이, 여백 같은 속성의 용도와 구문에 대해 배울 수 있습니다.

YouTube Video

미리보기를 위한 HTML

css-box.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Box Model Related CSS Properties</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-box.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Model Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Model Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>width and height</h3>
 23            <section>
 24                <header><h4>width: 250px; height: 150px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="width-height-fixed">Fixed size(250px,150px)</div>
 27                </section>
 28            </section>
 29            <section>
 30                <header><h4>width: 50%; height: 50%;</h4></header>
 31                <section class="sample-view">
 32                    <div class="width-height-percent">Percentage size(50%,50%)</div>
 33                </section>
 34            </section>
 35            <section>
 36                <header><h4>width: min-content; height: min-content;</h4></header>
 37                <section class="sample-view">
 38                    <div class="width-height-min-content">This is an example of min-content.</div>
 39                </section>
 40            </section>
 41            <section>
 42                <header><h4>width: max-content; height: max-content;</h4></header>
 43                <section class="sample-view">
 44                    <div class="width-height-max-content">This is an example of max-content.</div>
 45                </section>
 46            </section>
 47            <section>
 48                <header><h4>width: fit-content; max-width: 150px;</h4></header>
 49                <section class="sample-view">
 50                    <div class="width-height-fit-content">This is an example of fit-content.</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>margin and padding</h3>
 56            <section style="height: auto;">
 57                <h4>Margin &amp; padding</h4>
 58                <header><h4>margin: 20px; padding: 15px;</h4></header>
 59                <section class="sample-view">
 60                    <div class="margin-padding">margin & padding</div>
 61                </section>
 62            </section>
 63            <section style="height: auto;">
 64                <h4>Margin only(no padding)</h4>
 65                <header><h4>margin: 20px; padding: 0;</h4></header>
 66                <section class="sample-view">
 67                    <div class="margin-only">margin only</div>
 68                </section>
 69            </section>
 70            <section style="height: auto;">
 71                <h4>No margin &amp; padding example</h4>
 72                <header><h4>margin: 0; padding: 0;</h4></header>
 73                <section class="sample-view">
 74                    <div class="no-margin">no margin & padding</div>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>box-sizing</h3>
 80            <section style="height: auto;">
 81                <header><h4>box-sizing: content-box</h4></header>
 82                <section class="sample-view">
 83                    <div style="width: 300px;">width: 300px</div>
 84                    <div class="content-box">Content Box</div>
 85                    <div style="width: 360px;">width: 360px</div>
 86                </section>
 87            </section>
 88            <section>
 89                <header><h4>box-sizing: border-box</h4></header>
 90                <section class="sample-view">
 91                    <div style="width: 300px;">width: 300px</div>
 92                    <div class="border-box">Border Box</div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>visibility</h3>
 98            <section>
 99                <header><h4>visibility: visible</h4></header>
100                <section class="sample-view">
101                    <div class="visibility-visible">Visible Box</div>
102                </section>
103                <header><h4>visibility: hidden</h4></header>
104                <section class="sample-view">
105                    <div class="visibility-hidden">Hidden Box</div>
106                </section>
107                <header><h4>visibility: collapse</h4></header>
108                <section class="sample-view">
109                    <div class="visibility-collapse">Collapsed Box (Hold layout space)</div>
110                </section>
111                <header><h4>HTML</h4></header>
112                <pre>&lt;div class="visibility-collapse"&gt;Collapsed Box (Hold layout space)&lt;/div&gt;</pre>
113                <header><h4>visibility: collapse</h4></header>
114                <section class="sample-view">
115                    <table style="height: 200px; margin: auto;">
116                        <tr class="visibility-collapse">
117                            <td>Cell 1 (Remove layout space)</td>
118                        </tr>
119                        <tr>
120                            <td>Cell 2</td>
121                        </tr>
122                    </table>
123                </section>
124                <header><h4>HTML</h4></header>
125<pre>
126&lt;table style="height: 200px; margin: auto;"&gt;
127    &lt;tr class="visibility-collapse"&gt;
128        &lt;td&gt;Cell 1 (Remove layout space)&lt;/td&gt;
129    &lt;/tr&gt;
130    &lt;tr&gt;
131        &lt;td&gt;Cell 2&lt;/td&gt;
132    &lt;/tr&gt;
133&lt;/table&gt;
134</pre>
135            </section>
136        </article>
137    </main>
138</body>
139</html>

박스 모델 관련

`width` 및 `height` 속성

 1.width-height-fixed {
 2    width: 250px;
 3    height: 150px;
 4    background-color: lightblue;
 5}
 6
 7.width-height-percent {
 8    width: 50%;
 9    height: 50%;
10    background-color: lightblue;
11}
12
13.width-height-min-content {
14    width: min-content;
15    height: min-content;
16    background-color: lightblue;
17}
18
19.width-height-max-content {
20    width: max-content;
21    height: max-content;
22    background-color: lightblue;
23}
24
25.width-height-fit-content {
26    width: fit-content;
27    max-width: 150px;
28    background-color: lightblue;
29}

width 및 height 속성은 요소의 너비와 높이를 지정하는 데 사용되는 CSS 속성입니다. 특히 블록 요소, 이미지, 비디오 등의 크기를 설정할 때 주로 사용됩니다.

width-height-fixed 클래스에서는 너비와 높이에 고정 값을 지정합니다.
width-height-percent 클래스에서는 너비와 높이에 백분율 값을 지정합니다.

지정할 수 있는 값

width 및 height 속성은 다음과 같은 값을 가질 수 있습니다.

auto: 기본 크기. 부모 요소에 상대적으로 크기가 자동으로 조정됩니다.
고정 값: 픽셀, 백분율 또는 상대적 단위로 고정 너비를 지정합니다.(ex: 100px, 50%, 10rem)
- 예를 들어, 250px은 요소 크기를 250픽셀로 설정하고, 50%는 부모 요소 크기의 50%로 설정합니다.
min-content: 콘텐츠의 최소 크기에 맞춥니다.
max-content: 콘텐츠의 최대 크기에 맞춥니다.
fit-content: 콘텐츠의 크기를 기준으로 적절하게 요소 크기를 조정합니다.

최소 및 최대 값 지정

min-width, max-width, min-height, max-height는 요소의 너비와 높이의 크기 제한을 설정하는 데 사용되는 CSS 속성입니다. 이를 사용하면 요소가 특정 크기 범위 내에서 유지되도록 보장할 수 있습니다.

`margin` 및 `padding` 속성

 1.margin-padding {
 2    margin: 20px; /* Margin outside the element */
 3    padding: 15px; /* Padding inside the element */
 4    border: 1px solid #333;
 5    background-color: lightblue;
 6    width: 300px;
 7    height: 40px;
 8}
 9
10.margin-only {
11    margin: 20px; /* Margin outside the element */
12    padding: 0; /* No padding inside the element */
13    border: 1px solid #333;
14    background-color: lightblue;
15    width: 300px;
16    height: 40px;
17}
18
19.no-margin {
20    margin: 0; /* No margin outside the element */
21    padding: 0; /* No padding inside the element */
22    border: 1px solid #333;
23    background-color: lightblue;
24    width: 300px;
25    height: 40px;
26}

Margin과 padding은 CSS에서 박스 모델 내 요소들의 외부와 내부 간격을 제어하기 위해 사용하는 속성입니다. 이 속성들은 요소 간의 간격을 조정하고 깔끔한 외관을 위해 사용됩니다.

margin-padding 클래스에서는 margin과 padding이 모두 지정됩니다. 실선 테두리 외부에는 margin 공간이 있고, 내부에는 padding 공간이 있습니다.
margin-only 클래스에서는 margin만 지정됩니다. 실선 테두리 내부에 padding 공간이 없기 때문에, margin-padding 클래스와 비교했을 때 파란 영역이 더 작습니다.
no-margin 클래스에서는 margin과 padding이 모두 0으로 설정됩니다. 실선 테두리 외부에 margin 공간이 없기 때문에 파란 영역이 왼쪽 끝까지 밀려 있습니다.

이와 같이, margin 속성은 요소의 외부 공간을 설정하며 요소 간의 거리를 조정합니다. 반면에, padding 속성은 요소의 내부 공간을 설정하고 내용물과 테두리 사이의 거리를 조정합니다.

`margin` 속성

margin 속성은 요소의 외부 공간(여백)을 설정합니다. 인접한 요소들 간의 간격을 만들기 위해 사용됩니다. 다음과 같은 값을 지정할 수 있습니다:.
고정값: 픽셀, 상대 단위(em, rem), 또는 백분율로 margin 크기를 지정할 수 있습니다.(ex: 10px, 1em, 5%)
auto: 블록 요소를 중앙에 배치하는 데 유용합니다. 너비가 지정되면, 좌우 여백이 자동으로 조정됩니다.
양수 및 음수 값: 양수는 공간을 확장시키고, 음수는 요소를 더 가깝게 만듭니다.

축약 표기법:

 1div.one-value {
 2    margin: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    margin: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    margin: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    margin: 10px 5px 15px 20px;
18}

margin 속성은 1개에서 4개의 값을 가질 수 있습니다.

1개 값: 모든 면에 적용됩니다.
2개 값: 첫 번째 값은 위와 아래에, 두 번째 값은 왼쪽과 오른쪽에 적용됩니다.
3개 값: 위, 왼쪽과 오른쪽, 아래의 순서로 적용됩니다.
네 가지 값: 위, 오른쪽, 아래, 왼쪽 순으로 적용됩니다.

`padding` 속성

기능:

padding 속성은 요소의 내부 공간(패딩)을 설정합니다. 이는 콘텐츠와 요소의 테두리 간 공간을 생성하는 데 사용됩니다. 다음과 같은 값을 지정할 수 있습니다:.
고정 값: 패딩의 크기를 지정합니다.(ex: 10px, 1em, 5%)
음수 값은 사용할 수 없습니다. 패딩 값은 양수로만 지정할 수 있습니다.

축약 표기법:

 1div.one-value {
 2    padding: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    padding: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    padding: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    padding: 10px 5px 15px 20px;
18}

margin처럼 하나에서 네 개의 값을 지정할 수 있습니다.

1개 값: 모든 면에 적용됩니다.
2개 값: 첫 번째 값은 위와 아래에, 두 번째 값은 왼쪽과 오른쪽에 적용됩니다.
3개 값: 위, 왼쪽과 오른쪽, 아래의 순서로 적용됩니다.
네 가지 값: 위, 오른쪽, 아래, 왼쪽 순으로 적용됩니다.

`box-sizing` 속성

 1/* Default content-box : 300px + 2 * 20px + 2 * 10px = 360px */
 2.content-box {
 3    width: 300px;
 4    padding: 20px;
 5    border: 10px solid blue;
 6    box-sizing: content-box;
 7    background-color: lightblue;
 8}
 9
10/* Using border-box */
11.border-box {
12    width: 300px;
13    padding: 20px;
14    border: 10px solid red;
15    box-sizing: border-box;
16    background-color: lightcoral;
17}

box-sizing은 요소의 width와 height가 계산되는 방식을 제어하는 CSS 속성입니다.

content-box 클래스에서는 요소의 너비가 360px입니다. width는 300px이며, 왼쪽과 오른쪽 padding이 총 40px, 왼쪽과 오른쪽 border가 총 20px로, 전체 합계는 360px입니다.
border-box에서는 요소의 너비가 300px입니다. padding과 border가 지정된 width에 포함됩니다.

`box-sizing`의 값들

box-sizing에는 주로 두 가지 값이 있습니다: content-box와 border-box, 기본 값은 content-box입니다.

`content-box`

 1.content-box {
 2    box-sizing: content-box;
 3    width: 200px;
 4    padding: 20px;
 5    border: 10px solid black;
 6}
 7/*
 8260px = 200px(width) +
 920px(padding-left) + 20px(padding-right) +
1010px(border-left) + 10px(border-right)
11*/

content-box가 지정되면, width와 height는 오직 콘텐츠의 너비와 높이만 설정합니다. 여기에 padding과 border가 추가되어 최종 크기가 결정됩니다. 즉, width와 height는 콘텐츠 영역만을 참조합니다.

이 예에서는 지정된 width가 200px이지만, 왼쪽과 오른쪽 padding과 border의 너비를 더해 최종 실제 요소 너비는 260px입니다.

`border-box`

1.border-box {
2    width: 200px;
3    padding: 20px;
4    border: 10px solid black;
5    box-sizing: border-box;
6}

border-box가 지정되면, width와 height는 padding과 border를 포함해 계산됩니다. 즉, 지정된 width와 height는 콘텐츠, padding, border의 총 크기가 됩니다.

이 경우, 지정된 width가 200px이고, padding과 border도 포함되므로 요소의 최종 실제 너비는 200px로 유지됩니다. padding과 border는 그 안에서 조정됩니다.

`box-sizing` 차이점 요약

속성	계산 방법	실제 너비 계산
`content-box` (기본값)	`width`는 콘텐츠만을 참조합니다. `padding`과 `border`가 추가됩니다.	`width` + `padding` + `border`
`border-box`	`width`는 모든 것을 포함 (내용, `padding`, `border`)	지정된 `width`가 그대로 사용됩니다.

`box-sizing`의 장점

border-box를 사용하면 레이아웃이 안정화됩니다. padding이나 border를 추가해도 지정된 크기가 변하지 않아 계산이 간단해집니다.
유연한 레이아웃을 만들 때 유용합니다. 반응형 디자인이나 복잡한 레이아웃에서는 예상치 못한 크기 변동을 피하기 위해 border-box가 자주 사용됩니다.

`border-box`를 전역적으로 적용하는 방법

1*,
2*::before,
3*::after {
4    box-sizing: border-box;
5}

CSS를 이렇게 설정하면, 예상치 못한 크기 변경을 방지하기 위해 모든 요소에 border-box를 적용할 수 있습니다.

요약

box-sizing은 요소의 width와 height에 padding과 border를 포함할지 여부를 제어합니다.
border-box를 사용하면 크기 계산이 더 쉬워지며, 반응형 디자인에 적합합니다.

`visibility` 속성

 1.visibility-visible {
 2    visibility: visible;
 3}
 4
 5.visibility-hidden {
 6    visibility: hidden;
 7}
 8
 9.visibility-collapse {
10    visibility: collapse;
11}

visibility 속성은 요소를 표시하거나 숨기는 데 사용되지만, display 속성과는 달리 요소가 숨겨져 있어도 레이아웃에 영향을 미칩니다. 이 속성은 요소를 숨기기만 하며, 다른 요소들의 레이아웃에 영향을 주지 않고 원래 위치와 크기를 유지합니다.

기본 구문

1element {
2    visibility: value;
3}

value: 요소의 가시성을 지정하는 값.

값 유형

visibility 속성은 다음 값들로 설정할 수 있습니다:.

`visible`

visible을 지정하면 요소가 표시됩니다. 이 값은 기본값입니다.

`hidden`

hidden을 지정하면 요소는 숨겨지지만 레이아웃 공간은 유지됩니다.

`collapse`

collapse는 주로 표의 행(row) 또는 열(column)에 사용됩니다. 요소가 보이지 않게 되며 공간도 무시됩니다. 표의 행(row) 또는 열(column)에 적용되면 숨겨진 행이나 열은 레이아웃에서 완전히 제거됩니다.
하지만 표 요소를 제외한 일반 블록 또는 인라인 요소에 사용하면 hidden처럼 동작하여 레이아웃 공간이 유지됩니다.

`inherit`

inherit를 지정하면 상위 요소로부터 visibility 속성 값을 상속받습니다.

`visibility`와 `display`의 차이점

visibility와 display에는 다음과 같은 차이점이 있습니다.

visibility: hidden은 요소를 숨기지만 그 공간과 레이아웃은 유지합니다.
display: none은 요소를 레이아웃에서 완전히 제거하여 다른 요소가 그 공간을 차지할 수 있도록 합니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

코드 표시 및 인용을 위한 CSS 속성 배경 관련 CSS 속성

박스 모델과 관련된 CSS 속성

YouTube Video

미리보기를 위한 HTML

박스 모델 관련

width 및 height 속성

지정할 수 있는 값

최소 및 최대 값 지정

margin 및 padding 속성

margin 속성

축약 표기법:

padding 속성

기능:

축약 표기법:

box-sizing 속성

box-sizing의 값들

content-box

border-box

box-sizing 차이점 요약

box-sizing의 장점

border-box를 전역적으로 적용하는 방법

요약

visibility 속성

기본 구문

값 유형

visible

hidden

collapse

inherit

visibility와 display의 차이점

YouTube Video

`width` 및 `height` 속성

`margin` 및 `padding` 속성

`margin` 속성

`padding` 속성

`box-sizing` 속성

`box-sizing`의 값들

`content-box`

`border-box`

`box-sizing` 차이점 요약

`box-sizing`의 장점

`border-box`를 전역적으로 적용하는 방법

`visibility` 속성

`visible`

`hidden`

`collapse`

`inherit`

`visibility`와 `display`의 차이점