Tim Corey 2: Bootstrap ๋น ๋ฅธ ์ ์šฉ #3

๋ถ€ํŠธ์ŠคํŠธ๋žฉ 5๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์›น ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ฐ•๋ ฅํ•˜๊ณ  ์‘๋‹ต์„ฑ์ด ๋›ฐ์–ด๋‚œ ์›น ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ์‹ ์†ํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์‹ค, ์—ฌ๋Ÿฌ๋ถ„์ด ๋ง‰ ์‹œ์ž‘ํ•œ ๊ฒƒ์ด๋“  ์›น ๊ฐœ๋ฐœ ์ „๋ฌธ๊ฐ€์ด๋“  ์ƒ๊ด€์ด ์—†์Šต๋‹ˆ๋‹ค. ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 5๊ฐ€ ์—ฌ๋Ÿฌ๋ถ„์„ ๋” ๋‚ซ๊ฒŒ ํ•ด์ค„ ๊ฒƒ์€ ์ค‘์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
์ด ๋น„๋””์˜ค์—์„œ๋Š” ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋ฅผ ์ž‘์„ฑํ•˜์ง€ ์•Š๊ณ  ์‰ฝ๊ณ  ์‘๋‹ต์„ฑ์ด ๋›ฐ์–ด๋‚œ ๋””์ž์ธ๊ณผ ์›น ์‚ฌ์ดํŠธ์— ๋‹คํฌ ๋ชจ๋“œ๋ฅผ ๋น ๋ฅด๊ฒŒ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ• ๋“ฑ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์ด ์ œ๊ณตํ•˜๋Š” 5๊ฐ€์ง€ ๋น ๋ฅธ ์ด์ ์— ๋Œ€ํ•ด ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์šฐ๋ฆฌ๊ฐ€ ๊ทธ๊ฒƒ๋“ค์— ๋„๋‹ฌํ•˜๊ธฐ ์ „์—, ์ €๋Š” ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์„ ๋‘˜๋Ÿฌ์‹ผ ํ•œ ๊ฐ€์ง€ ์‹ ํ™”๋ฅผ ๋‹ค๋ฃฐ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ถœ์ฒ˜: 5 Quick Wins in Bootstrap 5 (plus dispelling 1 major myth) - YouTube

1. Code ๋˜๋Š” Visual Studio์—์„œ htmlํŽ˜์ด์ง€ ํ•˜๋‚˜ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="description" content="BootStrap Demo"/>

    <title>BootStrap 5 Demo</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>

๊ธฐ๋ณธ์ ์œผ๋กœ ์œ„์™€๊ฐ™์ด bootstrap์„ Link ํ•ด์ค๋‹ˆ๋‹ค. (Guide :์‹œ์ž‘ํ•˜๊ธฐ ยท Bootstrap v5.1)

๊ทธ๋ฆฌ๊ณ  Body ์•ˆ์— ๋งค์ธ Section์„ ๋„ฃ์–ด์ค๋‹ˆ๋‹ค.

 <main  class="container">
        <h1>BootStap 5 Hello world</h1>
        <div class="row">
             <div>
                   /๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ
                   ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ
                   ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ/
             </div>
             <div>
                /๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ
                ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ
                ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ/
             </div>
            <div>
                /๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ
                ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ
                ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ/
            </div>            
        </div>
    </main>


์‹คํ–‰ํ™”๋ฉด

์ด์ œ ๊ตฌ๋ถ„์ด ์ž˜ ์•ˆ๊ฐ€๋‹ˆ div์— ํ…Œ๋‘๋ฆฌ๋ฅผ ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

  <div class="row">
             <div class="border border-dark-subtle"> 
                  Bla Bla
             </div> 
             ...

Row Tag ๋ฐ‘์— div tag์— class์— border border-dark-subtle ์ค๋‹ˆ๋‹ค.

๊ฒฐ๊ณผ

์ด์ œ div๋ฅผ ๊ฐ€๋กœ๋กœ ๋†‰ํ˜€๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

<div class="border border-dark-subtle  col">              
 </div >

div class์— col style๋งŒ ์ถ”๊ฐ€ํ•˜๋ฉฐ

์ด๋ ‡๊ฒŒ ๋ˆ•์Šต๋‹ˆ๋‹ค.

์ด๋ฏธ์ง€๋ฅผ ๋„ฃ์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

    <div class="row">
            <div class="border border-dark-subtle col "> 
                 <img class="img-fluid" src="https://picsum.photos/1600/900" />
             </div>
             <div class="border border-dark-subtle col "> 
                   /๋™ํ•ด ๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ  /
             </div> 


์ด๋ ‡๊ฒŒ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. img class ๋Š” Images ยท Bootstrap v5.3 ์ฐธ๊ณ ํ•˜์„ธ์š”

์ถ”๊ฐ€๋กœ ์ •๋ ฌ class๋ฅผ ์ถ”๊ฐ€ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

<div class="border border-dark-subtle col col-xxl-2 col-xl-3 col-lg-4 col-md-6"> 


์Šค์ƒท์—์„œ๋Š” ์ž˜ํ‘œํ˜„์€ ์•ˆ๋ผ์ง€๋งŒ browser ์‚ฌ์ด์ฆˆ๋ฅผ ๋ณ€๊ฒฝํ• ๋•Œ๋งˆ๋‹ค ๋ฐ˜์‘ํ˜•์œผ๋กœ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.
์ž์„ธํ•œ๊ฒƒ์€ Grid system ยท Bootstrap v5.3

Dark Mode ์ถ”๊ฐ€ํ•˜๊ธฐ
Bootstrap 5.3 ๋ถ€ํ„ฐ๋Š” dark mode๋ฅผ ์†์‰ฝ๊ฒŒ ๋„ฃ์„์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<html data-bs-theme="dark">
<head>

data-bs-theme=โ€œdarkโ€ html ์— ํ•ด๋‹น ํ‚ค์›Œ๋“œ๋ฅผ ๋„ฃ์œผ๋ฉด

์†์‰ฝ๊ฒŒ ๋‹คํฌ๋ชจ๋“œ์— ์ง„์ž…ํ•ฉ๋‹ˆ๋‹ค.

์ด์ƒ์ž…๋‹ˆ๋‹ค. ^^

Full Source

<!DOCTYPE html>
<html data-bs-theme="dark">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="description" content="BootStrap Demo"/>
    <title>BootStrap 5 Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
    <main  class="container">
        <h1>BootStap 5 Hello world</h1>
        <div class="row">
            <div class="border border-dark-subtle col  col-xxl-2"> 
                 <img class=" col-xxl-2" src="https://picsum.photos/1600/900" />
             </div>
             <div class="border border-dark-subtle col  col-xxl-2 col-xl-3 col-lg-4 col-md-6"> 
                   /๋™ํ•ด ๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ
                   ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ
                   ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ/
             </div> 
             <div class="border border-dark-subtle col col-xxl-2 col-xl-3 col-lg-4 col-md-6"> 
                /๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ
                ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ
                ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ/
             </div >
            <div class="border border-dark-subtle  col col-xxl-2 col-xl-3 col-lg-4 col-md-6"> 
                /๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ
                ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ
                ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ฟ๋„๋ก ํ•˜๋Š๋‹˜์ด ๋ณด์šฐํ•˜์‚ฌ ์šฐ๋ฆฌ๋‚˜๋ผ๋งŒ์„ธ/
            </div >            
        </div>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>

timcorey ์„ ์ƒ๋‹˜์˜ ๊ฐ•์ขŒ์ค‘ ํ•˜๋‚˜๋ฅผ ์‹ค์Šตํ•ด๋ดค์Šต๋‹ˆ๋‹ค. ์‚ด์ง ์ˆ˜๋งŽ์€ ๊ฐ•์ขŒ์ค‘์˜ pick์„ ์ž˜๋ชปํ•œ
์ƒ๊ฐ(?) ์€ ๋“ค์ง€๋งŒ ๋„์›€์ด ๋˜์…จ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค ^^

2๊ฐœ์˜ ์ข‹์•„์š”

์ข‹์€ ๊ธ€ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์š”์ƒŒ ์ด๋Ÿฐ์ €๋Ÿฐ ๋Œ€์•ˆ๋“ค์ด ๋‚˜์™€์žˆ๋˜ ๊ฒƒ ๊ฐ™์ง€๋งŒ ๊ทธ๋ž˜๋„ ์ €๋Š” ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์ด ์ œ์ผ ํŽธํ•˜๊ณ  ์ข‹๋”๋ผ๊ตฌ์š” ใ…Žใ…Ž

1๊ฐœ์˜ ์ข‹์•„์š”