[CSS] 박스의 크기
CSS에서 박스라 함은 `
`, `
~`등 문단을 이루는 요소를 말합니다. 문단을 구성하는 요소들은 크기와 여백을 지정할 수 있는데 이와 관련된 CSS 속성들을 박스모델이라고 합니다. Posted 
By 23 min read [CSS] 박스의 크기 [CSS] 박스의 크기
#01. 박스의 크기
CSS에서 다루는 박스는 HTML 태그를 CSS 관점에서 분류하는 것에서부터 시작합니다. HTML 태그는 크게 Block Level 요소와 Inline Level 요소로 나뉩니다.
분류 설명 예시 Block Level 요소 문단을 구성하는 형태. 같은 태그를 연속해서 사용할 경우 문단을 구성하므로 줄바꿈되어 표시된다. <p>, <div>, <h1>~<h6>, <ol>, <ul>, <li> 등Inline Level 요소 문장을 구성하는 형태. 같은 태그를 연속해서 사용할 경우 문장을 구성하기 때문에 줄 바꿈 없이 표시된다. <span>, <font>, <strong>, <b>, <u>, <i>, <address> 등대체요소 이미지, 입력요소 등 텍스트가 아닌 다른 형태로 표시되는 요소로서 Inline Level에 속한다. <img>,<input>,<select>,<textarea> 등
이 강의에서 다루는 박스(Box)는 주로 block-level 요소를 의미하며, 가장 대표적인 예로 <div> 태그가 있습니다.
1. 박스의 기본 크기가 구성되는 원리
Block-level 요소는 웹 페이지의 구조에서 문단을 구성하는 형태로, 연속해서 사용할 경우 줄바꿈되어 표시됩니다.
박스의 크기는 내용(content), 안쪽 여백(padding), 테두리(border), 바깥 여백(margin)으로 구성되는 CSS 박스 모델을 따릅니다.
가장 기본적인 박스의 크기 특성은 다음과 같습니다.
width (넓이): 특별히 지정하지 않으면, 부모 요소의 가로폭을 가득 채웁니다.height (높이): 특별히 지정하지 않으면, 자신이 포함하고 있는 내용(content)의 높이만큼만 차지합니다. 내용이 없으면 높이는 0이 됩니다.
아래 실습은 세 개의 <div> 박스를 통해 이러한 기본 동작을 보여줍니다.
#box1과 #box3는 내부에 텍스트 내용이 있으므로 해당 내용의 높이만큼 크기가 설정됩니다.#box2는 내용이 없기 때문에 화면에 높이가 없는 상태로 렌더링되어 보이지 않습니다.
실습: /12-CSS-박스의 크기/01-박스의기본크기.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-박스의기본크기</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
/* [박스의 기본 크기 특성]
넓이= 부모를 가득 채움
높이= 자신이 포함하고 있는 내용만큼만 차지 */
#box1 {
background-color: red;
}
#box2 {
background-color: green;
}
#box3 {
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">빨강 박스</div>
<!-- 포함하고 있는 내용이 없기 때문에 높이가 형셩되지 않는다. -->
<div id="box2"></div>
<div id="box3">파랑 박스</div>
</body>
</html>
2. 박스의 크기를 결정하는 요소
박스의 전체 크기는 내용(content)의 크기인 width와 height 뿐만 아니라, padding과 border 값에 의해 영향을 받습니다. 각 속성의 역할은 다음과 같습니다.
속성 설명 값 width 내용 영역의 가로 폭 px단위, %단위 height 내용 영역의 세로 높이 px단위, %단위 border 박스의 테두리 굵기 종류 색상 padding 테두리와 내용영역 사이의 여백 여백 사이즈에 대한 px단위
기본적으로 박스의 전체 가로 넓이는 border-left + padding-left + width + padding-right + border-right의 총합으로 계산됩니다. 세로 높이도 동일한 원리로 계산됩니다.
구분 구성 가로넓이 border-left + padding-left + width + padding-right + border-right 세로높이 border-top + padding-top + height + padding-bottom + border-bottom
이로 인해, 동일한 width와 height를 가진 박스라도 padding이나 border 값이 다르면 최종적으로 화면에 표시되는 크기가 달라집니다.
이 문제를 해결하고 width, height가 최종 크기를 결정하도록 하려면 box-sizing: border-box; 속성을 사용할 수 있습니다. 이 속성은 padding과 border를 width, height 영역 안으로 포함시켜 크기 계산을 직관적으로 만들어줍니다.
아래 실습 코드에서 .box2, .box3, .box4는 .box1과 동일하게 width: 400px, height: 250px로 설정되었지만, 각각 border와 padding이 추가되면서 전체 크기가 더 커진 것을 확인할 수 있습니다.
실습: /12-CSS-박스의 크기/02-박스크기를_결정하는_요소.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02-박스크기를_결정하는_요소</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
/* 모든 div에 대한처리 */
div {
width: 400px;
height: 250px;
}
.box1 {
background-color: #ff0000;
}
.box2 {
background-color: #00ff00;
border: 20px solid #000000;
}
.box3 {
background-color: #0000ff;
padding: 25px;
}
.box4 {
background-color: #ff00ff;
border: 20px solid #000000;
padding: 25px;
}
</style>
</head>
<body>
<div class="box1">박스1</div>
<br />
<div class="box2">박스2</div>
<br />
<div class="box3">박스3</div>
<br />
<div class="box4">박스4</div>
<br />
</body>
</html>
3. 중첩된 박스의 크기
박스가 다른 박스 안에 중첩되어 있을 때, 자식 요소의 크기는 부모 요소의 크기에 영향을 받습니다.
- 자식 요소의 크기 총합은 부모 요소의
width, height를 벗어날 수 없습니다. - 자식 요소의
width, height를 % 단위로 설정할 경우, 부모 요소의 width, height를 기준으로 계산됩니다.
따라서 자식 요소에 width: 100%를 설정한 상태에서 padding이나 border를 추가하면, 자식 요소의 전체 크기가 부모 요소보다 커져 부모 영역을 벗어나는 문제가 발생합니다.
이러한 현상은 아래의 실습 예제들을 통해 확인할 수 있습니다.
실습: /12-CSS-박스의 크기/03-중첩된_박스의_크기(1).html
이 예제는 자식 요소(.child)의 width와 height를 부모와 동일한 고정 px 값으로 설정하고 padding과 border를 추가한 경우입니다. 자식 요소의 실제 크기는 width + padding + border가 되어 부모 요소(.parent)를 벗어납니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-중첩된_박스의_크기(1)</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
.parent {
/** 시각적인 확인을 위한 처리 */
background-color: #ff00ff;
border: 10px dotted #0000ff;
/** 크기를 지정합시다. --> 고정사이즈 */
width: 500px;
height: 300px;
}
.child {
/** 시각적인 확인을 위한 처리 */
background-color: #00ff00;
width: 500px;
height: 300px;
/** 부모의 크기를 벗어난다. 벗어난 영역은 주변 요소를 침범하게 된다. */
padding: 10px 20px;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">HTML & CSS</div>
</div>
Hello World
</body>
</html>
실습: /12-CSS-박스의 크기/04-중첩된_박스의_크기(2).html
이 예제는 자식 요소(.child)의 width와 height를 100%로 설정하여 부모 요소를 기준으로 크기를 맞춘 경우입니다. 여기에 padding과 border가 추가되면서 자식 요소의 전체 크기가 부모보다 커져, 결국 부모 영역을 벗어나게 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04-중첩된_박스의_크기(2)</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
.parent {
/** 시각적인 확인을 위한 처리 */
background-color: #ff00ff;
border: 10px dotted #0000ff;
/** 크기를 지정합시다. --> 고정사이즈 */
width: 500px;
height: 300px;
}
.child {
/** 시각적인 확인을 위한 처리 */
background-color: #00ff00;
/** 백분율 값은 부모 요소의 width,height를 기준으로 한다. */
width: 100%;
height: 100%;
/** 부모 크기에 여백과 테두리의 크기를 더하므로, 부모보다 커진다. */
padding: 10px 20px;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">HTML & CSS</div>
</div>
</body>
</html>
실습: /12-CSS-박스의 크기/05-중첩된_박스의_크기(3).html
이 문제를 해결하기 위해 자식 요소에 box-sizing: border-box; 속성을 적용할 수 있습니다. 이 속성은 padding과 border를 width와 height에 포함시켜 계산하므로, width: 100%로 설정해도 부모 요소를 벗어나지 않습니다.
값 설명 content-boxborder와 padding이 width/height 영역 밖에 설정된다. border-boxborder와 padding이 width/height 영역 안에 설정된다. (권장)
웹 페이지 레이아웃을 만들 때 매우 유용하며, 보통 모든 요소에 * { box-sizing: border-box; }와 같이 전역으로 설정하는 것을 권장합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05-중첩된_박스의_크기(3)</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
.parent {
/** 시각적인 확인을 위한 처리 */
background-color: #ff00ff;
border: 10px dotted #0000ff;
/** 크기를 지정합시다. --> 고정사이즈 */
width: 500px;
height: 300px;
}
.child {
/** 시각적인 확인을 위한 처리 */
background-color: #00ff00;
/** 백분율 값은 부모 요소의 width,height를 기준으로 한다. */
width: 100%;
height: 100%;
padding: 10px 20px;
border: 5px solid red;
/** border, padding이 width/height 영역 안에서 설정되도록 함 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">HTML & CSS</div>
</div>
Hello World
</body>
</html>
#02. 그 밖의 크기 관련 속성
1. auto 값을 사용해서 박스의 크기 설정하기
width와 height 속성에 auto 값을 사용하면 박스의 크기를 유연하게 조절할 수 있습니다.
width: auto;: 부모 요소의 width에서 현재 요소의 padding과 border 크기를 제외한 나머지 공간을 자동으로 계산하여 가로폭으로 설정합니다. 이는 실질적으로 width: 100%와 box-sizing: border-box를 함께 사용한 것과 같은 효과를 냅니다.height: auto;: 자신이 포함하고 있는 내용만큼의 높이를 갖습니다. 이는 height 속성을 지정하지 않았을 때의 기본 동작과 동일합니다.
아래 실습에서 자식 요소(.child)는 width: auto;를 통해 부모 요소(.parent)의 width: 90% 내에서 자신의 padding과 border를 제외한 나머지 공간을 모두 차지하게 됩니다.
실습: /12-CSS-박스의 크기/06-auto.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06-auto</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
.parent {
background-color: #ff0000;
width: 90%;
height: 100%;
border: 5px solid #0000ff;
}
.child {
background-color: #00ff00;
padding: 10px;
border: 5px solid #ff00ff;
/* 부모의 width에서 자신의 padding과 border값을 제외한 나머지를 자동으로 계산한다. */
width: auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">HTML & CSS</div>
</div>
</body>
</html>
2. 최대/최소 크기 설정하기
반응형 웹 디자인과 같이 유동적인 레이아웃을 만들 때, 박스의 크기가 특정 범위를 벗어나지 않도록 제한해야 할 경우가 있습니다. 이때 최대/최소 크기 속성을 사용합니다.
속성 설명 min-width 최소 넓이 지정. 내용이 없더라도 이 속성이 지정한 만큼 넓이가 보장된다. max-width 최대 넓이 지정. 이 속성의 값 이상 커지지 않는다. min-height 최소 높이 지정. max-height 최대 높이 지정
아래 실습에서는 .min-h 박스에 min-height: 200px; 를 설정했습니다. 이로 인해 박스 안의 내용이 적더라도 최소 200px의 높이를 유지하며, 내용이 많아지면 그에 따라 높이가 자동으로 늘어납니다. 만약 height: 200px;로 고정했다면 내용이 많아질 경우 부모 요소를 벗어나게 될 것입니다.
실습: /12-CSS-박스의 크기/07-min-max.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07-min_max</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
.min-h {
background-color: #d5d5d5;
width: 450px;
/*height: 200px;*/
/** 최소 200px 보장, 최대값 지정 안됨 --> min-width
반대 특성 --> max-height, max-width */
min-height: 200px;
}
</style>
</head>
<body>
<div class="min-h">
<p>
한국 양궁이 사상 첫 올림픽 금메달 5개 싹쓸이의 대업을 달성했다.
</p>
<p>
김우진(청주시청)은 4일 프랑스 파리에서 열린
2024 파리 올림픽 양궁 남자 개인전 결승에서 미국의 브레이디 엘리슨을 슛오프 접전 끝에
6-5(27-29 28-24 27-29 29-27 30-30 <10+-10>)로 물리치고 금메달을 수확했다.
</p>
<p>
앞서 남녀 단체전과 혼성 단체전(혼성전), 여자 개인전에서 금메달을 따낸 한국 양궁은
이로써 사상 처음으로 올림픽 양궁에 걸린 금메달 5개를 모두 쓸어 담았다.
</p>
</div>
<h1>Hello World</h1>
</body>
</html>
#03. 자식 요소가 부모를 벗어나는 경우의 처리 방법
자식 요소의 내용이나 크기가 부모 요소의 범위를 벗어날 때, 이를 어떻게 처리할지 overflow 속성으로 제어할 수 있습니다.
속성 설명 visible 기본값. 벗어나는 내용이 부모 요소를 벗어나도록 그대로 둔다. scroll 벗어나는 내용에 대하여 스크롤 처리한다. 이 속성이 부여되면 부모 요소는 항상 스크롤바의 트랙을 표시한다. hidden 벗어나는 내용에 대하여 화면에 표시되지 않도록 잘라낸다. auto 내용이 벗어나지 않을 경우에는 박스의 기본 모양대로 표시되지만, 내용이 벗어날 경우에는 scroll처리 된다.
overflow-x와 overflow-y 속성을 사용하면 가로 또는 세로 방향으로만 개별적으로 제어할 수도 있습니다.
아래 실습은 각 overflow 속성값이 어떻게 동작하는지 보여줍니다. 모든 박스는 동일한 크기와 내용을 가지고 있지만, overflow 설정에 따라 내용이 잘리거나, 스크롤이 생기는 등 다르게 표시됩니다.
실습: /12-CSS-박스의 크기/08-overflow.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08-Overflow</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
/** class 속성은 재사용을 위한 CSS 처리 */
.parent {
background-color: #ff00ff;
width: 450px;
height: 200px;
border: 5px dotted #000000;
.child {
background-color: #00ff00;
width: 100%;
height: 100%;
/** 테두리와 여백만큼 벗어난다. */
border: 10px solid #0000ff;
padding: 30px 30px;
}
}
/** 그냥 둔다. (기본값) */
.box1 {
overflow: visible;
}
/** 스크롤 처리 한다. 윈도우에서는 스크롤 트랙이 항상 보인다. */
.box2 {
overflow: scroll;
}
/** 벗어나는 영역은 잘라버린다. */
.box3 {
overflow: hidden;
}
/** 작을 경우는 그냥 두고, 벗어날 경우에만 스크롤 처리 */
.box4 {
overflow: auto;
}
</style>
</head>
<body>
<div class="parent box1">
<div class="child">visible</div>
</div>
<br /><br />
<div class="parent box2">
<div class="child">scroll</div>
</div>
<br /><br />
<div class="parent box3">
<div class="child">hidden</div>
</div>
<br /><br />
<div class="parent box4">
<div class="child">auto</div>
</div>
<br /><br />
</body>
</html>
[CSS] 박스의 크기
#01. 박스의 크기
CSS에서 다루는 박스는 HTML 태그를 CSS 관점에서 분류하는 것에서부터 시작합니다. HTML 태그는 크게 Block Level 요소와 Inline Level 요소로 나뉩니다.
| 분류 | 설명 | 예시 |
|---|---|---|
| Block Level 요소 | 문단을 구성하는 형태. 같은 태그를 연속해서 사용할 경우 문단을 구성하므로 줄바꿈되어 표시된다. | <p>, <div>, <h1>~<h6>, <ol>, <ul>, <li> 등 |
| Inline Level 요소 | 문장을 구성하는 형태. 같은 태그를 연속해서 사용할 경우 문장을 구성하기 때문에 줄 바꿈 없이 표시된다. | <span>, <font>, <strong>, <b>, <u>, <i>, <address> 등 |
| 대체요소 | 이미지, 입력요소 등 텍스트가 아닌 다른 형태로 표시되는 요소로서 Inline Level에 속한다. | <img>,<input>,<select>,<textarea> 등 |
이 강의에서 다루는 박스(Box)는 주로 block-level 요소를 의미하며, 가장 대표적인 예로 <div> 태그가 있습니다.
1. 박스의 기본 크기가 구성되는 원리
Block-level 요소는 웹 페이지의 구조에서 문단을 구성하는 형태로, 연속해서 사용할 경우 줄바꿈되어 표시됩니다.
박스의 크기는 내용(content), 안쪽 여백(padding), 테두리(border), 바깥 여백(margin)으로 구성되는 CSS 박스 모델을 따릅니다.
가장 기본적인 박스의 크기 특성은 다음과 같습니다.
width(넓이): 특별히 지정하지 않으면, 부모 요소의 가로폭을 가득 채웁니다.height(높이): 특별히 지정하지 않으면, 자신이 포함하고 있는 내용(content)의 높이만큼만 차지합니다. 내용이 없으면 높이는 0이 됩니다.
아래 실습은 세 개의 <div> 박스를 통해 이러한 기본 동작을 보여줍니다.
#box1과#box3는 내부에 텍스트 내용이 있으므로 해당 내용의 높이만큼 크기가 설정됩니다.#box2는 내용이 없기 때문에 화면에 높이가 없는 상태로 렌더링되어 보이지 않습니다.
실습: /12-CSS-박스의 크기/01-박스의기본크기.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-박스의기본크기</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
/* [박스의 기본 크기 특성]
넓이= 부모를 가득 채움
높이= 자신이 포함하고 있는 내용만큼만 차지 */
#box1 {
background-color: red;
}
#box2 {
background-color: green;
}
#box3 {
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">빨강 박스</div>
<!-- 포함하고 있는 내용이 없기 때문에 높이가 형셩되지 않는다. -->
<div id="box2"></div>
<div id="box3">파랑 박스</div>
</body>
</html>
2. 박스의 크기를 결정하는 요소
박스의 전체 크기는 내용(content)의 크기인 width와 height 뿐만 아니라, padding과 border 값에 의해 영향을 받습니다. 각 속성의 역할은 다음과 같습니다.
| 속성 | 설명 | 값 |
|---|---|---|
| width | 내용 영역의 가로 폭 | px단위, %단위 |
| height | 내용 영역의 세로 높이 | px단위, %단위 |
| border | 박스의 테두리 | 굵기 종류 색상 |
| padding | 테두리와 내용영역 사이의 여백 | 여백 사이즈에 대한 px단위 |
기본적으로 박스의 전체 가로 넓이는 border-left + padding-left + width + padding-right + border-right의 총합으로 계산됩니다. 세로 높이도 동일한 원리로 계산됩니다.
| 구분 | 구성 |
|---|---|
| 가로넓이 | border-left + padding-left + width + padding-right + border-right |
| 세로높이 | border-top + padding-top + height + padding-bottom + border-bottom |
이로 인해, 동일한 width와 height를 가진 박스라도 padding이나 border 값이 다르면 최종적으로 화면에 표시되는 크기가 달라집니다.
이 문제를 해결하고 width, height가 최종 크기를 결정하도록 하려면 box-sizing: border-box; 속성을 사용할 수 있습니다. 이 속성은 padding과 border를 width, height 영역 안으로 포함시켜 크기 계산을 직관적으로 만들어줍니다.
아래 실습 코드에서 .box2, .box3, .box4는 .box1과 동일하게 width: 400px, height: 250px로 설정되었지만, 각각 border와 padding이 추가되면서 전체 크기가 더 커진 것을 확인할 수 있습니다.
실습: /12-CSS-박스의 크기/02-박스크기를_결정하는_요소.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02-박스크기를_결정하는_요소</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
/* 모든 div에 대한처리 */
div {
width: 400px;
height: 250px;
}
.box1 {
background-color: #ff0000;
}
.box2 {
background-color: #00ff00;
border: 20px solid #000000;
}
.box3 {
background-color: #0000ff;
padding: 25px;
}
.box4 {
background-color: #ff00ff;
border: 20px solid #000000;
padding: 25px;
}
</style>
</head>
<body>
<div class="box1">박스1</div>
<br />
<div class="box2">박스2</div>
<br />
<div class="box3">박스3</div>
<br />
<div class="box4">박스4</div>
<br />
</body>
</html>
3. 중첩된 박스의 크기
박스가 다른 박스 안에 중첩되어 있을 때, 자식 요소의 크기는 부모 요소의 크기에 영향을 받습니다.
- 자식 요소의 크기 총합은 부모 요소의
width,height를 벗어날 수 없습니다. - 자식 요소의
width,height를%단위로 설정할 경우, 부모 요소의width,height를 기준으로 계산됩니다.
따라서 자식 요소에 width: 100%를 설정한 상태에서 padding이나 border를 추가하면, 자식 요소의 전체 크기가 부모 요소보다 커져 부모 영역을 벗어나는 문제가 발생합니다.
이러한 현상은 아래의 실습 예제들을 통해 확인할 수 있습니다.
실습: /12-CSS-박스의 크기/03-중첩된_박스의_크기(1).html
이 예제는 자식 요소(.child)의 width와 height를 부모와 동일한 고정 px 값으로 설정하고 padding과 border를 추가한 경우입니다. 자식 요소의 실제 크기는 width + padding + border가 되어 부모 요소(.parent)를 벗어납니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-중첩된_박스의_크기(1)</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
.parent {
/** 시각적인 확인을 위한 처리 */
background-color: #ff00ff;
border: 10px dotted #0000ff;
/** 크기를 지정합시다. --> 고정사이즈 */
width: 500px;
height: 300px;
}
.child {
/** 시각적인 확인을 위한 처리 */
background-color: #00ff00;
width: 500px;
height: 300px;
/** 부모의 크기를 벗어난다. 벗어난 영역은 주변 요소를 침범하게 된다. */
padding: 10px 20px;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">HTML & CSS</div>
</div>
Hello World
</body>
</html>
실습: /12-CSS-박스의 크기/04-중첩된_박스의_크기(2).html
이 예제는 자식 요소(.child)의 width와 height를 100%로 설정하여 부모 요소를 기준으로 크기를 맞춘 경우입니다. 여기에 padding과 border가 추가되면서 자식 요소의 전체 크기가 부모보다 커져, 결국 부모 영역을 벗어나게 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04-중첩된_박스의_크기(2)</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
.parent {
/** 시각적인 확인을 위한 처리 */
background-color: #ff00ff;
border: 10px dotted #0000ff;
/** 크기를 지정합시다. --> 고정사이즈 */
width: 500px;
height: 300px;
}
.child {
/** 시각적인 확인을 위한 처리 */
background-color: #00ff00;
/** 백분율 값은 부모 요소의 width,height를 기준으로 한다. */
width: 100%;
height: 100%;
/** 부모 크기에 여백과 테두리의 크기를 더하므로, 부모보다 커진다. */
padding: 10px 20px;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">HTML & CSS</div>
</div>
</body>
</html>
실습: /12-CSS-박스의 크기/05-중첩된_박스의_크기(3).html
이 문제를 해결하기 위해 자식 요소에 box-sizing: border-box; 속성을 적용할 수 있습니다. 이 속성은 padding과 border를 width와 height에 포함시켜 계산하므로, width: 100%로 설정해도 부모 요소를 벗어나지 않습니다.
| 값 | 설명 |
|---|---|
content-box | border와 padding이 width/height 영역 밖에 설정된다. |
border-box | border와 padding이 width/height 영역 안에 설정된다. (권장) |
웹 페이지 레이아웃을 만들 때 매우 유용하며, 보통 모든 요소에 * { box-sizing: border-box; }와 같이 전역으로 설정하는 것을 권장합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05-중첩된_박스의_크기(3)</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
.parent {
/** 시각적인 확인을 위한 처리 */
background-color: #ff00ff;
border: 10px dotted #0000ff;
/** 크기를 지정합시다. --> 고정사이즈 */
width: 500px;
height: 300px;
}
.child {
/** 시각적인 확인을 위한 처리 */
background-color: #00ff00;
/** 백분율 값은 부모 요소의 width,height를 기준으로 한다. */
width: 100%;
height: 100%;
padding: 10px 20px;
border: 5px solid red;
/** border, padding이 width/height 영역 안에서 설정되도록 함 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">HTML & CSS</div>
</div>
Hello World
</body>
</html>
#02. 그 밖의 크기 관련 속성
1. auto 값을 사용해서 박스의 크기 설정하기
width와 height 속성에 auto 값을 사용하면 박스의 크기를 유연하게 조절할 수 있습니다.
width: auto;: 부모 요소의width에서 현재 요소의padding과border크기를 제외한 나머지 공간을 자동으로 계산하여 가로폭으로 설정합니다. 이는 실질적으로width: 100%와box-sizing: border-box를 함께 사용한 것과 같은 효과를 냅니다.height: auto;: 자신이 포함하고 있는 내용만큼의 높이를 갖습니다. 이는height속성을 지정하지 않았을 때의 기본 동작과 동일합니다.
아래 실습에서 자식 요소(.child)는 width: auto;를 통해 부모 요소(.parent)의 width: 90% 내에서 자신의 padding과 border를 제외한 나머지 공간을 모두 차지하게 됩니다.
실습: /12-CSS-박스의 크기/06-auto.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06-auto</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
.parent {
background-color: #ff0000;
width: 90%;
height: 100%;
border: 5px solid #0000ff;
}
.child {
background-color: #00ff00;
padding: 10px;
border: 5px solid #ff00ff;
/* 부모의 width에서 자신의 padding과 border값을 제외한 나머지를 자동으로 계산한다. */
width: auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">HTML & CSS</div>
</div>
</body>
</html>
2. 최대/최소 크기 설정하기
반응형 웹 디자인과 같이 유동적인 레이아웃을 만들 때, 박스의 크기가 특정 범위를 벗어나지 않도록 제한해야 할 경우가 있습니다. 이때 최대/최소 크기 속성을 사용합니다.
| 속성 | 설명 |
|---|---|
| min-width | 최소 넓이 지정. 내용이 없더라도 이 속성이 지정한 만큼 넓이가 보장된다. |
| max-width | 최대 넓이 지정. 이 속성의 값 이상 커지지 않는다. |
| min-height | 최소 높이 지정. |
| max-height | 최대 높이 지정 |
아래 실습에서는 .min-h 박스에 min-height: 200px; 를 설정했습니다. 이로 인해 박스 안의 내용이 적더라도 최소 200px의 높이를 유지하며, 내용이 많아지면 그에 따라 높이가 자동으로 늘어납니다. 만약 height: 200px;로 고정했다면 내용이 많아질 경우 부모 요소를 벗어나게 될 것입니다.
실습: /12-CSS-박스의 크기/07-min-max.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07-min_max</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
.min-h {
background-color: #d5d5d5;
width: 450px;
/*height: 200px;*/
/** 최소 200px 보장, 최대값 지정 안됨 --> min-width
반대 특성 --> max-height, max-width */
min-height: 200px;
}
</style>
</head>
<body>
<div class="min-h">
<p>
한국 양궁이 사상 첫 올림픽 금메달 5개 싹쓸이의 대업을 달성했다.
</p>
<p>
김우진(청주시청)은 4일 프랑스 파리에서 열린
2024 파리 올림픽 양궁 남자 개인전 결승에서 미국의 브레이디 엘리슨을 슛오프 접전 끝에
6-5(27-29 28-24 27-29 29-27 30-30 <10+-10>)로 물리치고 금메달을 수확했다.
</p>
<p>
앞서 남녀 단체전과 혼성 단체전(혼성전), 여자 개인전에서 금메달을 따낸 한국 양궁은
이로써 사상 처음으로 올림픽 양궁에 걸린 금메달 5개를 모두 쓸어 담았다.
</p>
</div>
<h1>Hello World</h1>
</body>
</html>
#03. 자식 요소가 부모를 벗어나는 경우의 처리 방법
자식 요소의 내용이나 크기가 부모 요소의 범위를 벗어날 때, 이를 어떻게 처리할지 overflow 속성으로 제어할 수 있습니다.
| 속성 | 설명 |
|---|---|
| visible | 기본값. 벗어나는 내용이 부모 요소를 벗어나도록 그대로 둔다. |
| scroll | 벗어나는 내용에 대하여 스크롤 처리한다. 이 속성이 부여되면 부모 요소는 항상 스크롤바의 트랙을 표시한다. |
| hidden | 벗어나는 내용에 대하여 화면에 표시되지 않도록 잘라낸다. |
| auto | 내용이 벗어나지 않을 경우에는 박스의 기본 모양대로 표시되지만, 내용이 벗어날 경우에는 scroll처리 된다. |
overflow-x와 overflow-y 속성을 사용하면 가로 또는 세로 방향으로만 개별적으로 제어할 수도 있습니다.
아래 실습은 각 overflow 속성값이 어떻게 동작하는지 보여줍니다. 모든 박스는 동일한 크기와 내용을 가지고 있지만, overflow 설정에 따라 내용이 잘리거나, 스크롤이 생기는 등 다르게 표시됩니다.
실습: /12-CSS-박스의 크기/08-overflow.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08-Overflow</title>
<style type="text/css">
body {
font-size: 24px;
line-height: 150%;
font-weight: bold;
}
/** class 속성은 재사용을 위한 CSS 처리 */
.parent {
background-color: #ff00ff;
width: 450px;
height: 200px;
border: 5px dotted #000000;
.child {
background-color: #00ff00;
width: 100%;
height: 100%;
/** 테두리와 여백만큼 벗어난다. */
border: 10px solid #0000ff;
padding: 30px 30px;
}
}
/** 그냥 둔다. (기본값) */
.box1 {
overflow: visible;
}
/** 스크롤 처리 한다. 윈도우에서는 스크롤 트랙이 항상 보인다. */
.box2 {
overflow: scroll;
}
/** 벗어나는 영역은 잘라버린다. */
.box3 {
overflow: hidden;
}
/** 작을 경우는 그냥 두고, 벗어날 경우에만 스크롤 처리 */
.box4 {
overflow: auto;
}
</style>
</head>
<body>
<div class="parent box1">
<div class="child">visible</div>
</div>
<br /><br />
<div class="parent box2">
<div class="child">scroll</div>
</div>
<br /><br />
<div class="parent box3">
<div class="child">hidden</div>
</div>
<br /><br />
<div class="parent box4">
<div class="child">auto</div>
</div>
<br /><br />
</body>
</html>