레이아웃 관련 CSS 속성
이 글은 레이아웃과 관련된 CSS 속성에 대해 설명합니다.
display와 position 속성의 사용법과 작성 방법을 배울 수 있습니다.
YouTube Video
미리보기를 위한 HTML
css-layout.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>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-layout.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>display: block</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26.block-element {
27 display: block;
28 width: 400px;
29 background-color: lightblue;
30 padding: 10px;
31 margin-bottom: 10px;
32}
33</pre>
34 <header><h4>HTML</h4></header>
35 <pre><div class="block-element">This is a block element.</div></pre>
36 <header><h4>HTML+CSS</h4></header>
37 <section class="sample-view">
38 <div class="block-element">This is a block element.</div>
39 </section>
40 </section>
41 </article>
42 <article>
43 <h3>display: inline</h3>
44 <section>
45 <header><h4>CSS</h4></header>
46<pre class="sample">
47span.inline-element {
48 background-color: lightgray;
49 padding: 10px;
50}
51
52div.inline-element {
53 display: inline;
54 background-color: lightblue;
55 padding: 10px;
56}
57</pre>
58 <header><h4>HTML</h4></header>
59<pre>
60<span class="inline-element">This is an inline element.</span>
61<div class="inline-element">div tag with "display: inline"</div>
62</pre>
63 <header><h4>HTML+CSS</h4></header>
64 <section class="sample-view">
65 <span class="inline-element">This is an inline element.</span>
66 <div class="inline-element">div tag with "display: inline"</div>
67 </section>
68 </section>
69 </article>
70 <article>
71 <h3>display: inline-block</h3>
72 <section>
73 <header><h4>CSS</h4></header>
74<pre class="sample">
75.inline-block-element {
76 display: inline-block;
77 width: 200px;
78 background-color: lightblue;
79 padding: 10px;
80}
81</pre>
82 <header><h4>HTML</h4></header>
83<pre>
84<span class="inline-element">This is an inline element.</span>
85<div class="inline-block-element">This is an inline-block element.</div>
86<span class="inline-element">Another inline element.</span>
87</pre>
88 <header><h4>HTML+CSS</h4></header>
89 <section class="sample-view">
90 <span class="inline-element">This is an inline element.</span>
91 <div class="inline-block-element">This is an inline-block element.</div>
92 <span class="inline-element">Another inline element.</span>
93 </section>
94 </section>
95 </article>
96 <article>
97 <h3>display: none</h3>
98 <section>
99 <header><h4>CSS</h4></header>
100<pre class="sample">
101div.none-element {
102 display: none;
103 background-color: lightblue;
104 padding: 10px;
105}
106</pre>
107 <header><h4>HTML</h4></header>
108 <pre><div class="none-element">This is a none element.</div></pre>
109 <header><h4>HTML+CSS</h4></header>
110 <section class="sample-view">
111 <div class="none-element">This is a none element.</div>
112 </section>
113 </section>
114 </article>
115 <article>
116 <h3>display: flex</h3>
117 <section>
118 <header><h4>CSS</h4></header>
119<pre class="sample">
120.flex-container {
121 display: flex;
122 justify-content: space-between;
123 background-color: lightgray;
124 padding: 10px;
125}
126
127.flex-container div {
128 width: 120px;
129 background-color: lightblue;
130}
131</pre>
132 <header><h4>HTML</h4></header>
133<pre>
134<div class="flex-container">
135 <div>Item 1</div>
136 <div>Item 2</div>
137</div>
138</pre>
139 <header><h4>HTML+CSS</h4></header>
140 <section class="sample-view">
141 <div class="flex-container">
142 <div>Flex item 1</div>
143 <div>Flex item 2</div>
144 </div>
145 </section>
146 </section>
147 </article>
148 <article>
149 <h3>display: inline-flex</h3>
150 <section>
151 <header><h4>CSS</h4></header>
152<pre class="sample">
153.inline-flex-container {
154 display: inline-flex;
155 width: 250px;
156 justify-content: space-between;
157 background-color: lightgray;
158 padding: 10px;
159}
160
161.inline-flex-container div {
162 width: 100px;
163 background-color: lightblue;
164}
165</pre>
166 <header><h4>HTML</h4></header>
167<pre>
168<span class="inline-element">Inline element</span>
169<div class="inline-flex-container">
170 <div>Inline Flex item 1</div>
171 <div>Inline Flex item 2</div>
172</div>
173</pre>
174 <header><h4>HTML+CSS</h4></header>
175 <section class="sample-view">
176 <span class="inline-element">Inline element</span>
177 <div class="inline-flex-container">
178 <div>Inline Flex item 1</div>
179 <div>Inline Flex item 2</div>
180 </div>
181 </section>
182 </section>
183 </article>
184 <article>
185 <h3>display: grid</h3>
186 <section>
187 <header><h4>CSS</h4></header>
188<pre class="sample">
189.grid-container {
190 display: grid;
191 grid-template-columns: repeat(2, 1fr);
192 gap: 10px;
193 background-color: #f3f3f3;
194 padding: 10px;
195 height: 200px;
196}
197.grid-container div {
198 background-color: lightblue;
199 border: 1px solid #aaa;
200 padding: 5px;
201 text-align: center;
202 width: 100px;
203}
204</pre>
205 <header><h4>HTML</h4></header>
206<pre>
207<div class="grid-container">
208 <div>Item 1</div>
209 <div>Item 2</div>
210 <div>Item 3</div>
211 <div>Item 4</div>
212</div>
213</pre>
214 <header><h4>HTML+CSS</h4></header>
215 <section class="sample-view">
216 <div class="grid-container">
217 <div>Item 1</div>
218 <div>Item 2</div>
219 <div>Item 3</div>
220 <div>Item 4</div>
221 </div>
222 </section>
223 </section>
224 </article>
225 <article>
226 <h3>display: inline-grid</h3>
227 <section>
228 <header><h4>CSS</h4></header>
229<pre class="sample">
230.inline-grid-element {
231 display: inline-grid;
232 grid-template-columns: 1fr 1fr;
233 gap: 5px;
234 background-color: lightblue;
235 padding: 5px;
236 width: 200px;
237 height: 150px;
238}
239.inline-grid-element div {
240 background-color: lightskyblue;
241 padding: 5px;
242 text-align: center;
243 border: 1px solid #ccc;
244 width: 80px;
245 height: 25px;
246}
247</pre>
248 <header><h4>HTML</h4></header>
249<pre>
250<span class="inline-element">This is an inline element.</span>
251<div class="inline-grid-element">
252 <div>Item 1</div>
253 <div>Item 2</div>
254 <div>Item 3</div>
255 <div>Item 4</div>
256</div>
257<span class="inline-element">Another inline element.</span>
258</pre>
259 <header><h4>HTML+CSS</h4></header>
260 <section class="sample-view">
261 <span class="inline-element">This is an inline element.</span>
262 <div class="inline-grid-element">
263 <div>Item 1</div>
264 <div>Item 2</div>
265 <div>Item 3</div>
266 <div>Item 4</div>
267 </div>
268 <span class="inline-element">Another inline element.</span>
269 </section>
270 </section>
271 </article>
272 <article>
273 <h3>display: table</h3>
274 <section>
275 <header><h4>CSS</h4></header>
276<pre class="sample">
277.table-container {
278 display: table;
279 border-collapse: collapse;
280 width: 100%;
281 height: 100%;
282}
283
284.table-row {
285 display: table-row;
286}
287
288.table-cell {
289 display: table-cell;
290 border: 1px solid #999;
291 padding: 8px;
292 text-align: center;
293 vertical-align: middle;
294 background-color: lightblue;
295}
296
297.header-row .table-cell {
298 font-weight: bold;
299 background-color: lightskyblue;
300}
301</pre>
302 <header><h4>HTML</h4></header>
303<pre>
304<section>
305 <div class="table-container">
306 <div class="table-row header-row">
307 <div class="table-cell">Header 1</div>
308 <div class="table-cell">Header 2</div>
309 </div>
310 <div class="table-row">
311 <div class="table-cell">Row 1, Cell 1</div>
312 <div class="table-cell">Row 1, Cell 2</div>
313 </div>
314 <div class="table-row">
315 <div class="table-cell">Row 2, Cell 1</div>
316 <div class="table-cell">Row 2, Cell 2</div>
317 </div>
318 </div>
319</section>
320</pre>
321 <header><h4>HTML+CSS</h4></header>
322 <section class="sample-view">
323 <div class="table-container">
324 <div class="table-row header-row">
325 <div class="table-cell">Header 1</div>
326 <div class="table-cell">Header 2</div>
327 </div>
328 <div class="table-row">
329 <div class="table-cell">Row 1, Cell 1</div>
330 <div class="table-cell">Row 1, Cell 2</div>
331 </div>
332 <div class="table-row">
333 <div class="table-cell">Row 2, Cell 1</div>
334 <div class="table-cell">Row 2, Cell 2</div>
335 </div>
336 </div>
337 </section>
338 </section>
339 </article>
340 <article>
341 <h3>display: list-item</h3>
342 <section>
343 <header><h4>CSS</h4></header>
344<pre class="sample">
345.list-item-element {
346 display: list-item;
347 list-style-position: inside;
348 list-style-type: disc;
349 margin-left: 20px;
350 background-color: lightblue;
351 padding: 10px;
352 height: min-content;
353}
354</pre>
355 <header><h4>HTML</h4></header>
356<pre>
357<div class="list-item-element">This is a list item element.</div>
358<div class="list-item-element">Another list item element.</div>
359<div class="list-item-element">Yet another list item element.</div>
360</pre>
361 <header><h4>HTML+CSS</h4></header>
362 <section class="sample-view">
363 <div class="list-item-element">This is a list item element.</div>
364 <div class="list-item-element">Another list item element.</div>
365 <div class="list-item-element">Yet another list item element.</div>
366 </section>
367 </section>
368 </article>
369 <article>
370 <h3>position</h3>
371 <section style="height: auto;">
372 <header><h4>position: static</h4></header>
373 <section class="sample-view">
374 <div class="static-element">This is a static element.</div>
375 </section>
376 <header><h4>position: relative; top: 10px; left: 20px;</h4></header>
377 <section class="sample-view">
378 <div class="relative-element">This is a relative element.</div>
379 </section>
380 <header><h4>position: absolute; top: 10px; left: 20px;</h4></header>
381 <section class="sample-view">
382 <div class="absolute-container">
383 <div class="absolute-element">This is an absolute element.</div>
384 </div>
385 </section>
386 <header><h4>position: fixed; bottom: 10px; right: 10px;</h4></header>
387 <section class="sample-view">
388 <div class="fixed-element">This is a fixed element.</div>
389 </section>
390 <header><h4>position: sticky; top: 0;</h4></header>
391 <section class="sample-view">
392 <div class="sticky-container">
393 <div style="width: 20px; height: 400px; background: linear-gradient(to top, red, blue);"></div>
394 <div class="sticky-element">This is a sticky element. Scroll down!</div>
395 </div>
396 </section>
397 </section>
398 </article>
399 </main>
400</body>
401</html>{^ i18n 配置・レイアウト ^}
display 속성
display 속성은 요소가 어떻게 표시되는지를 정의하는 CSS 속성입니다. 요소가 block, inline, flex, grid, hidden 과 같은 어떤 형식으로 렌더링될지를 결정합니다.
display 속성 값
block
1.block-element {
2 display: block;
3 width: 400px;
4 background-color: lightblue;
5 padding: 10px;
6 margin-bottom: 10px;
7}block을 지정하면 요소가 블록 레벨 요소로 표시됩니다.- 블록 요소는 페이지에서 새 줄에 표시되며 다른 요소를 다음 줄로 이동합니다.
- 일반적인 블록 요소로는
<div>,<p>,<h1>,<section>,<article>등이 있습니다.
inline
1span.inline-element {
2 background-color: lightgray;
3 padding: 10px;
4}
5
6div.inline-element {
7 display: inline;
8 background-color: lightblue;
9 padding: 10px;
10}inline을 지정하면 요소가 인라인 요소로 표시됩니다.- 인라인 요소는 주변 요소와 같은 줄에 표시되며 가로로 정렬됩니다.
- 일반적인 인라인 요소로는
<span>,<a>,<strong>등이 있습니다. - 인라인 요소는 다른 인라인 요소와 같은 줄에 배치되며 블록 요소와 달리 연속적으로 가로로 표시됩니다.
inline-block
1.inline-block-element {
2 display: inline-block;
3 width: 200px;
4 background-color: lightblue;
5 padding: 10px;
6}inline-block을 지정하면 요소가 인라인 요소로 표시되지만, 블록 요소의 특성도 갖습니다.- 인라인 블록 요소는 다른 인라인 요소와 같은 줄에 표시되지만 블록 요소처럼 높이와 너비를 설정할 수 있습니다.
<img>,<button>,<canvas>요소는 기본적으로inline-block처럼 작동합니다.
none
1div.none-element {
2 display: none;
3 background-color: lightblue;
4 padding: 10px;
5}none을 지정하면 요소가 표시되지 않습니다.- 요소는 화면과 레이아웃에서 완전히 보이지 않게 되고 제외됩니다.
flex
1.flex-container {
2 display: flex;
3 justify-content: space-between;
4 background-color: lightgray;
5 padding: 10px;
6}
7
8.flex-container div {
9 width: 120px;
10 background-color: lightblue;
11}flex를 지정하면 요소가 플렉스박스 컨테이너로 표시됩니다.- 플렉스박스는 자식 요소(플렉스 항목)를 유연하게 배치하고 정렬하는 데 사용됩니다.
- 플렉스박스를 사용하면 자식 요소가 인라인으로 표시되며 여백과 정렬이 자동으로 조정됩니다.
inline-flex
1.inline-flex-container {
2 display: inline-flex;
3 width: 250px;
4 justify-content: space-between;
5 background-color: lightgray;
6 padding: 10px;
7}
8
9.inline-flex-container div {
10 width: 100px;
11 background-color: lightblue;
12}inline-flex를 지정하면 요소가 인라인 플렉스박스 컨테이너로 표시됩니다.- 플렉스박스의 특성을 가지면서도 인라인 요소로 취급되어 다른 요소와 같은 줄에 표시됩니다.
grid
1.grid-container {
2 display: grid;
3 grid-template-columns: repeat(2, 1fr);
4 gap: 10px;
5 background-color: #f3f3f3;
6 padding: 10px;
7 height: 200px;
8}
9
10.grid-container div {
11 background-color: lightblue;
12 border: 1px solid #aaa;
13 padding: 5px;
14 text-align: center;
15 width: 100px;
16}grid를 지정하면 요소가 그리드 컨테이너로 표시됩니다.- 그리드 레이아웃은 자식 요소를 행과 열로 정렬하는 데 적용할 수 있습니다.
- 그리드 컨테이너 내의 자식 요소가 열과 행을 따라 깔끔하게 배열됩니다.
inline-grid
1.inline-grid-element {
2 display: inline-grid;
3 grid-template-columns: 1fr 1fr;
4 gap: 5px;
5 background-color: lightblue;
6 padding: 5px;
7 width: 200px;
8 height: 150px;
9}
10.inline-grid-element div {
11 background-color: lightskyblue;
12 padding: 5px;
13 text-align: center;
14 border: 1px solid #ccc;
15 width: 80px;
16 height: 25px;
17}inline-grid를 지정하면 요소가 인라인 그리드 컨테이너로 표시됩니다.- 이 그리드 레이아웃 시스템을 사용하며 인라인 요소로 취급됩니다.
table
1.table-container {
2 display: table;
3 border-collapse: collapse;
4 width: 100%;
5 height: 100%;
6}
7
8.table-row {
9 display: table-row;
10}
11
12.table-cell {
13 display: table-cell;
14 border: 1px solid #999;
15 padding: 8px;
16 text-align: center;
17 vertical-align: middle;
18 background-color: lightblue;
19}
20
21.header-row .table-cell {
22 font-weight: bold;
23 background-color: lightskyblue;
24}table을 지정하면 요소가 테이블로 표시됩니다. HTML<table>과 유사한 레이아웃을 가지며, 자식 요소는 테이블 셀로 취급됩니다.- 이 예시와 같이, 자식 요소들의
display속성을table-row나table-cell로 설정하세요.table-row가 지정되면, 해당 요소는 테이블 행 (<tr>)처럼 작동합니다.table-cell이 지정되면, 해당 요소는 테이블 셀 (<td>)처럼 작동합니다.
list-item
1.list-item-element {
2 display: list-item;
3 list-style-position: inside;
4 list-style-type: disc;
5 margin-left: 20px;
6 background-color: lightblue;
7 padding: 10px;
8 height: min-content;
9}list-item을 지정하면 요소가 리스트 항목으로 표시됩니다.<ul>또는<ol>내에서 사용되는<li>요소에 주로 적용됩니다.
position 속성
1.static-element {
2 position: static;
3 background-color: lightblue;
4 padding: 10px;
5 margin-bottom: 20px;
6}
7
8.relative-element {
9 position: relative;
10 background-color: lightblue;
11 top: 10px;
12 left: 20px;
13 padding: 10px;
14 margin-bottom: 20px;
15}
16
17.absolute-container {
18 position: relative;
19 width: 500px;
20 height: 150px;
21 background-color: lightgray;
22 margin-bottom: 20px;
23}
24
25.absolute-element {
26 position: absolute;
27 top: 10px;
28 left: 20px;
29 background-color: lightblue;
30 padding: 10px;
31}
32
33.fixed-element {
34 position: fixed;
35 bottom: 10px;
36 right: 10px;
37 background-color: lightblue;
38 padding: 10px;
39}
40
41.sticky-container {
42 overflow: scroll;
43 height: 150px;
44 width: 500px;
45}
46
47.sticky-element {
48 position: sticky;
49 top: 0;
50 background-color: lightblue;
51 padding: 10px;
52}position은 요소가 CSS에서 어떻게 위치되는지를 제어하는 속성입니다. 이 속성은 요소를 부모 또는 다른 요소에 상대적 또는 절대적으로 위치시키거나 고정된 위치에 고정하는 데 사용됩니다.
position 속성의 값들
static
1.static-element {
2 position: static;
3}static-element클래스에서는position속성이static으로 지정됩니다. 요소는 일반적인 흐름에 따라 위치됩니다.static은 기본값입니다.position이 지정되지 않은 경우,static이 적용됩니다.- 요소가 일반 문서 흐름에 따라 배치됩니다.
top,right,bottom,left속성을 사용할 수 없습니다.
relative
1.relative-element {
2 position: relative;
3 top: 10px;
4 left: 20px;
5}relative-element클래스에서는position속성이relative로 설정됩니다. 요소는 일반적인 위치를 기준으로 상대적으로 이동합니다. 이 예제에서는 10px 아래로 그리고 20px 오른쪽으로 위치합니다.relative를 지정하면 요소를 상대적으로 배치합니다. 요소는 일반 문서 흐름을 따르며, 원래 위치에서top,right,bottom,left속성으로 지정된 위치로 이동합니다.- 상대적 배치를 설정한 요소는 이동한 후에도 원래 위치에 공간을 남겨둡니다.
- 이 예제에서는 요소가 원래 위치에서 아래로 10픽셀, 오른쪽으로 20픽셀 이동하지만, 문서 흐름은 원래 위치를 기준으로 처리됩니다.
absolute
1.absolute-element {
2 position: absolute;
3 top: 10px;
4 left: 20px;
5}absolute-element클래스에서는position속성이absolute로 설정됩니다. 이 예시에서, 해당 요소는 부모(또는 뷰포트)의 왼쪽 상단 구석에서 아래로 10픽셀, 오른쪽으로 20픽셀 위치에 배치됩니다.absolute가 지정되면, 해당 요소는 부모를 기준으로 절대적으로 배치됩니다. 부모 요소의position이relative,absolute,fixed로 설정된 경우, 요소는 부모를 기준으로top,right,bottom,left속성을 사용하여 이동합니다. 부모 요소를 찾을 수 없는 경우, 전체 페이지(뷰포트)를 기준으로 배치됩니다.- 절대적 배치를 설정한 요소는 일반 문서 흐름에서 제거되며 다른 요소에 영향을 주지 않습니다.
fixed
1.fixed-element {
2 position: fixed;
3 top: 0;
4 right: 0;
5}fixed-element클래스에서는position속성이fixed로 설정됩니다.fixed를 지정하면 요소가 고정된 위치에 배치됩니다. 요소는 뷰포트에 고정되어 스크롤해도 움직이지 않습니다.- 예를 들어, 페이지 헤더나 내비게이션 바를 항상 화면에 표시되게 유지하는 데 사용됩니다.
- 이 예시에서, 해당 요소는 화면의 오른쪽 하단 구석에 고정되며 페이지를 스크롤해도 그 위치를 유지합니다.
sticky
1.sticky-element {
2 position: sticky;
3 top: 0;
4}sticky-element클래스에서는position이sticky로 설정됩니다.sticky가 지정되면 요소가 스크롤에 따라 동적으로 배치됩니다. 일반 문서 흐름을 따르다가 페이지를 스크롤하면 지정된top,right,bottom,left값에 따라 특정 위치에 "고정"됩니다.sticky는 특정 범위 내에서 고정된 요소처럼 동작합니다.- 이 예제에서는 요소가 일반 위치에 표시되지만, 페이지가 지정된
top위치까지 스크롤되면 해당 위치에 고정되어 스크롤을 따릅니다.
top, left, bottom, right 속성
top, left, bottom, right는 CSS에서 요소의 위치를 제어하기 위한 속성입니다. 이 속성들은 position 속성과 함께 사용되어, 요소를 특정 방향으로 얼마나 이동시킬지를 정의합니다.
하지만 이 속성들은 position이 relative, absolute, fixed, sticky로 설정된 경우에만 적용됩니다. 기본값인 static에서는 이 속성들이 아무런 영향을 미치지 않습니다.
top, left, bottom, right의 사용 방법
top
1.relative-element {
2 position: relative;
3 top: 20px; /* Positioned 20px from the top */
4}top속성은 요소가 위쪽에서 얼마나 떨어져 있어야 할지를 지정합니다.- 이 예시에서는 요소가 원래 위치에서 아래로 20px 이동합니다.
left
1.absolute-element {
2 position: absolute;
3 left: 50px; /* Positioned 50px from the left */
4}left속성은 요소가 왼쪽에서 얼마나 떨어져 있어야 할지를 지정합니다.- 이 예시에서는 요소가 왼쪽 기준으로 오른쪽으로 50px 이동합니다.
bottom
1.fixed-element {
2 position: fixed;
3 bottom: 10px; /* Positioned 10px from the bottom */
4}bottom속성은 요소가 아래쪽에서 얼마나 떨어져 있어야 할지를 지정합니다.- 이 예시에서는 요소가 화면 하단에서 10px 위에 고정됩니다. 스크롤을 해도 해당 위치에 고정됩니다.
right
1.sticky-element {
2 position: sticky;
3 right: 20px; /* Positioned 20px from the right */
4}right속성은 요소가 오른쪽에서 얼마나 떨어져 있어야 할지를 지정합니다.- 이 예시에서는 스크롤 중 요소가 오른쪽으로부터 20px 왼쪽으로 이동하여 해당 위치에 고정됩니다.
position 속성과의 관계
relative: 요소를 원래 위치를 기준으로 정의된top,left,bottom,right값만큼 이동시킵니다.absolute: 요소를 가장 가까운relative,absolute, 또는fixed로 설정된 조상 요소를 기준으로 정의된top,left,bottom,right위치로 이동시킵니다.fixed: 요소를 뷰포트(전체 화면)를 기준으로 정의된 위치에 고정합니다. 스크롤을 해도 해당 위치에 고정됩니다.sticky: 요소는 스크롤 중 정의된 위치에 도달할 때까지 원래 위치에 있다가, 이후 해당 위치에 "고정"됩니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.