flexbox.html

Download
html 310 lines 10.5 KB 
  1<!DOCTYPE html>
  2<html lang="ko">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Flexbox ๋ ˆ์ด์•„์›ƒ ์˜ˆ์ œ</title>
  7    <link rel="stylesheet" href="style.css">
  8</head>
  9<body>
 10    <h1>Flexbox ๋ ˆ์ด์•„์›ƒ ์˜ˆ์ œ</h1>
 11
 12    <!-- 1. ๊ธฐ๋ณธ Flex ์ปจํ…Œ์ด๋„ˆ -->
 13    <section class="section">
 14        <h2>1. ๊ธฐ๋ณธ Flex ์ปจํ…Œ์ด๋„ˆ</h2>
 15        <p><code>display: flex</code>๋ฅผ ์ ์šฉํ•˜๋ฉด ์ž์‹ ์š”์†Œ๋“ค์ด ๊ฐ€๋กœ๋กœ ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค.</p>
 16
 17        <div class="flex-container basic">
 18            <div class="flex-item">1</div>
 19            <div class="flex-item">2</div>
 20            <div class="flex-item">3</div>
 21        </div>
 22    </section>
 23
 24    <!-- 2. flex-direction -->
 25    <section class="section">
 26        <h2>2. flex-direction</h2>
 27
 28        <h3>row (๊ธฐ๋ณธ๊ฐ’)</h3>
 29        <div class="flex-container direction-row">
 30            <div class="flex-item">1</div>
 31            <div class="flex-item">2</div>
 32            <div class="flex-item">3</div>
 33        </div>
 34
 35        <h3>row-reverse</h3>
 36        <div class="flex-container direction-row-reverse">
 37            <div class="flex-item">1</div>
 38            <div class="flex-item">2</div>
 39            <div class="flex-item">3</div>
 40        </div>
 41
 42        <h3>column</h3>
 43        <div class="flex-container direction-column">
 44            <div class="flex-item">1</div>
 45            <div class="flex-item">2</div>
 46            <div class="flex-item">3</div>
 47        </div>
 48
 49        <h3>column-reverse</h3>
 50        <div class="flex-container direction-column-reverse">
 51            <div class="flex-item">1</div>
 52            <div class="flex-item">2</div>
 53            <div class="flex-item">3</div>
 54        </div>
 55    </section>
 56
 57    <!-- 3. justify-content (์ฃผ์ถ• ์ •๋ ฌ) -->
 58    <section class="section">
 59        <h2>3. justify-content (์ฃผ์ถ• ์ •๋ ฌ)</h2>
 60
 61        <h3>flex-start (๊ธฐ๋ณธ๊ฐ’)</h3>
 62        <div class="flex-container justify-start">
 63            <div class="flex-item">1</div>
 64            <div class="flex-item">2</div>
 65            <div class="flex-item">3</div>
 66        </div>
 67
 68        <h3>flex-end</h3>
 69        <div class="flex-container justify-end">
 70            <div class="flex-item">1</div>
 71            <div class="flex-item">2</div>
 72            <div class="flex-item">3</div>
 73        </div>
 74
 75        <h3>center</h3>
 76        <div class="flex-container justify-center">
 77            <div class="flex-item">1</div>
 78            <div class="flex-item">2</div>
 79            <div class="flex-item">3</div>
 80        </div>
 81
 82        <h3>space-between</h3>
 83        <div class="flex-container justify-between">
 84            <div class="flex-item">1</div>
 85            <div class="flex-item">2</div>
 86            <div class="flex-item">3</div>
 87        </div>
 88
 89        <h3>space-around</h3>
 90        <div class="flex-container justify-around">
 91            <div class="flex-item">1</div>
 92            <div class="flex-item">2</div>
 93            <div class="flex-item">3</div>
 94        </div>
 95
 96        <h3>space-evenly</h3>
 97        <div class="flex-container justify-evenly">
 98            <div class="flex-item">1</div>
 99            <div class="flex-item">2</div>
100            <div class="flex-item">3</div>
101        </div>
102    </section>
103
104    <!-- 4. align-items (๊ต์ฐจ์ถ• ์ •๋ ฌ) -->
105    <section class="section">
106        <h2>4. align-items (๊ต์ฐจ์ถ• ์ •๋ ฌ)</h2>
107
108        <h3>stretch (๊ธฐ๋ณธ๊ฐ’)</h3>
109        <div class="flex-container align-stretch" style="height: 150px;">
110            <div class="flex-item">1</div>
111            <div class="flex-item">2</div>
112            <div class="flex-item">3</div>
113        </div>
114
115        <h3>flex-start</h3>
116        <div class="flex-container align-start" style="height: 150px;">
117            <div class="flex-item">1</div>
118            <div class="flex-item" style="padding: 30px;">2</div>
119            <div class="flex-item">3</div>
120        </div>
121
122        <h3>flex-end</h3>
123        <div class="flex-container align-end" style="height: 150px;">
124            <div class="flex-item">1</div>
125            <div class="flex-item" style="padding: 30px;">2</div>
126            <div class="flex-item">3</div>
127        </div>
128
129        <h3>center</h3>
130        <div class="flex-container align-center" style="height: 150px;">
131            <div class="flex-item">1</div>
132            <div class="flex-item" style="padding: 30px;">2</div>
133            <div class="flex-item">3</div>
134        </div>
135
136        <h3>baseline</h3>
137        <div class="flex-container align-baseline" style="height: 150px;">
138            <div class="flex-item" style="font-size: 12px;">์ž‘์€ ํ…์ŠคํŠธ</div>
139            <div class="flex-item" style="font-size: 24px;">ํฐ ํ…์ŠคํŠธ</div>
140            <div class="flex-item" style="font-size: 16px;">์ค‘๊ฐ„ ํ…์ŠคํŠธ</div>
141        </div>
142    </section>
143
144    <!-- 5. flex-wrap -->
145    <section class="section">
146        <h2>5. flex-wrap</h2>
147
148        <h3>nowrap (๊ธฐ๋ณธ๊ฐ’)</h3>
149        <div class="flex-container wrap-nowrap">
150            <div class="flex-item wide">1</div>
151            <div class="flex-item wide">2</div>
152            <div class="flex-item wide">3</div>
153            <div class="flex-item wide">4</div>
154            <div class="flex-item wide">5</div>
155        </div>
156
157        <h3>wrap</h3>
158        <div class="flex-container wrap-wrap">
159            <div class="flex-item wide">1</div>
160            <div class="flex-item wide">2</div>
161            <div class="flex-item wide">3</div>
162            <div class="flex-item wide">4</div>
163            <div class="flex-item wide">5</div>
164        </div>
165
166        <h3>wrap-reverse</h3>
167        <div class="flex-container wrap-reverse">
168            <div class="flex-item wide">1</div>
169            <div class="flex-item wide">2</div>
170            <div class="flex-item wide">3</div>
171            <div class="flex-item wide">4</div>
172            <div class="flex-item wide">5</div>
173        </div>
174    </section>
175
176    <!-- 6. flex-grow, flex-shrink, flex-basis -->
177    <section class="section">
178        <h2>6. flex-grow, flex-shrink, flex-basis</h2>
179
180        <h3>flex-grow</h3>
181        <div class="flex-container">
182            <div class="flex-item" style="flex-grow: 1;">grow: 1</div>
183            <div class="flex-item" style="flex-grow: 2;">grow: 2</div>
184            <div class="flex-item" style="flex-grow: 1;">grow: 1</div>
185        </div>
186
187        <h3>flex-basis</h3>
188        <div class="flex-container">
189            <div class="flex-item" style="flex-basis: 100px;">basis: 100px</div>
190            <div class="flex-item" style="flex-basis: 200px;">basis: 200px</div>
191            <div class="flex-item" style="flex-basis: 150px;">basis: 150px</div>
192        </div>
193
194        <h3>flex ๋‹จ์ถ• ์†์„ฑ</h3>
195        <div class="flex-container">
196            <div class="flex-item" style="flex: 1;">flex: 1</div>
197            <div class="flex-item" style="flex: 2;">flex: 2</div>
198            <div class="flex-item" style="flex: 1;">flex: 1</div>
199        </div>
200    </section>
201
202    <!-- 7. align-self -->
203    <section class="section">
204        <h2>7. align-self (๊ฐœ๋ณ„ ์ •๋ ฌ)</h2>
205
206        <div class="flex-container align-center" style="height: 200px;">
207            <div class="flex-item" style="align-self: flex-start;">start</div>
208            <div class="flex-item" style="align-self: center;">center</div>
209            <div class="flex-item" style="align-self: flex-end;">end</div>
210            <div class="flex-item" style="align-self: stretch;">stretch</div>
211        </div>
212    </section>
213
214    <!-- 8. order -->
215    <section class="section">
216        <h2>8. order (์ˆœ์„œ ๋ณ€๊ฒฝ)</h2>
217
218        <div class="flex-container">
219            <div class="flex-item" style="order: 3;">1 (order: 3)</div>
220            <div class="flex-item" style="order: 1;">2 (order: 1)</div>
221            <div class="flex-item" style="order: 2;">3 (order: 2)</div>
222        </div>
223    </section>
224
225    <!-- 9. gap -->
226    <section class="section">
227        <h2>9. gap (๊ฐ„๊ฒฉ)</h2>
228
229        <h3>gap: 20px</h3>
230        <div class="flex-container" style="gap: 20px;">
231            <div class="flex-item">1</div>
232            <div class="flex-item">2</div>
233            <div class="flex-item">3</div>
234        </div>
235
236        <h3>row-gap: 30px, column-gap: 10px</h3>
237        <div class="flex-container wrap-wrap" style="row-gap: 30px; column-gap: 10px;">
238            <div class="flex-item wide">1</div>
239            <div class="flex-item wide">2</div>
240            <div class="flex-item wide">3</div>
241            <div class="flex-item wide">4</div>
242        </div>
243    </section>
244
245    <!-- 10. ์‹ค์ „ ์˜ˆ์ œ: ์™„์ „ ์ค‘์•™ ์ •๋ ฌ -->
246    <section class="section">
247        <h2>10. ์‹ค์ „ ์˜ˆ์ œ: ์™„์ „ ์ค‘์•™ ์ •๋ ฌ</h2>
248
249        <div class="flex-container center-perfect" style="height: 200px;">
250            <div class="flex-item">์™„์ „ ์ค‘์•™!</div>
251        </div>
252    </section>
253
254    <!-- 11. ์‹ค์ „ ์˜ˆ์ œ: ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ” -->
255    <section class="section">
256        <h2>11. ์‹ค์ „ ์˜ˆ์ œ: ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ”</h2>
257
258        <nav class="navbar">
259            <div class="logo">Logo</div>
260            <ul class="nav-links">
261                <li><a href="#">Home</a></li>
262                <li><a href="#">About</a></li>
263                <li><a href="#">Services</a></li>
264                <li><a href="#">Contact</a></li>
265            </ul>
266        </nav>
267    </section>
268
269    <!-- 12. ์‹ค์ „ ์˜ˆ์ œ: ์นด๋“œ ๋ ˆ์ด์•„์›ƒ -->
270    <section class="section">
271        <h2>12. ์‹ค์ „ ์˜ˆ์ œ: ์นด๋“œ ๋ ˆ์ด์•„์›ƒ</h2>
272
273        <div class="card-container">
274            <div class="card">
275                <div class="card-header">Card 1</div>
276                <div class="card-body">
277                    <p>๋‚ด์šฉ์ด ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค.</p>
278                </div>
279                <div class="card-footer">
280                    <button>์ž์„ธํžˆ</button>
281                </div>
282            </div>
283            <div class="card">
284                <div class="card-header">Card 2</div>
285                <div class="card-body">
286                    <p>์กฐ๊ธˆ ๋” ๊ธด ๋‚ด์šฉ์ด ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค. ์นด๋“œ ๋†’์ด๊ฐ€ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.</p>
287                </div>
288                <div class="card-footer">
289                    <button>์ž์„ธํžˆ</button>
290                </div>
291            </div>
292            <div class="card">
293                <div class="card-header">Card 3</div>
294                <div class="card-body">
295                    <p>๋‚ด์šฉ</p>
296                </div>
297                <div class="card-footer">
298                    <button>์ž์„ธํžˆ</button>
299                </div>
300            </div>
301        </div>
302    </section>
303
304    <footer>
305        <p>&copy; 2024 Flexbox ๋ ˆ์ด์•„์›ƒ ์˜ˆ์ œ</p>
306        <p><a href="grid.html">Grid ๋ ˆ์ด์•„์›ƒ ์˜ˆ์ œ ๋ณด๊ธฐ โ†’</a></p>
307    </footer>
308</body>
309</html>