BootCamp/모두의연구소:오름캠프

24.02.19

혼복필 2024. 3. 5. 17:07
728x90
300x250
SMALL

오랜만에 오름캠프에서 한 수업을 정리하는 것 같아요 :)..

최근에 이사를 진행하면서 이삿짐을 준비하고 이사하는 과정이 있어서 어렵게 쌓은 습관이 무너지고 말았네요.

하루 이틀 미루다 보니 벌써 몇 주란 시간이 흘러 더 이상 미룰 수 없을 것 같아요.

 

이사를 진행하면서 수업에 참여하지 못한 적이 몇 번 있었기에 자세하게 듣지는 못하였습니다.

오름캠프에서 제공해 주는 자료와 부족한 부분은 중간중간 인터넷을 통해 정보를 찾아 보충하여 작성하였습니다.

 

16일까지 미니 프로젝트를 진행한 후 19일에는 Bootstrap 수업을 진행하였습니다.

 

 

부트스트랩 (Bootstrap)

트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것

웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적은 반응을 얻는 프레임워크

+ 프레임워크 (Framework)란?

재사용이 가능한 요소들의 집합되어 있으며 정해진 구조와 틀 안에서 이것들이 확장이 가능한 기반 코드로 이루어짐

= 부트스트랩에서는 jQuery 라이브러리를 사용할 수 있음

= Bootstrap4 와 Bootstrap5의 가장 큰 차이는 jQuery가 없어졌다는 것

부트스트랩은 다양한 디자인 요소뿐만 아니라 내장하고 있는 요소를 통해 웹 페이지 개발을 효율적으로 할 수 있음

(= 드롭다운 메뉴, 버튼, 탭, 리스트, 메뉴바, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등)

PC뿐만 아니라 태블릿이나 스마트폰 등 모바일 디자인도 지원과 그리드 시스템을 활용하여 반응형 웹 디자인을 지원함

= 다양한 환경에서 일관된 디자인을 제공하며, 시간과 크로스 브라우징에 대한 고민을 줄여줌

+ 부트스트랩은 오픈소스이며 MIT 허가서를 사용하므로 상업적 이용이 가능

+ 부트스트랩 템플릿은 무료로 제공되거나 유료로 판매되며 GPL보다 자유로운 라이선스를 따르고 있음

 

기본 템플릿

https://getbootstrap.com/

유료 템플릿 : https://wrapbootstrap.com/

 

+ 부트스트랩 적용 ex 파일

001.html

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
        <title>Hello, world!</title>
    </head>
<body>
    <!-- 기본 UI -->
    <!-- Bootstrap4에 비해 jquery 없음 -->
    <!-- 한국 홈페이지는 들어가지 말것, class 이름 다름 -->
    <h1>hello world</h1>
    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap demo</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    </head>
<body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

 

그리드 시스템

002.html

<div class="container">
    <div class="row">

        <div class="col-md-4">
            <h1>hello</h1>
        </div>
        <div class="col-md-4">
            <h1>hello</h1>
        </div>
        <div class="col-md-4">
            <h1>hello</h1>
        </div>
    </div>
</div>

 

002.html

 

003.html

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h1>hello</h1>
        </div>
        <div class="col-md-4">
            <h1>hello</h1>
        </div>
        <div class="col-md-4">
            <h1>hello</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <h1>hello</h1>
        </div>
        <div class="col-md-6">
            <h1>hello</h1>
        </div>
    </div>
</div>

 

003.html

 

 

+ 그리드 시스템에서 12칼럼을 모두 이용할 때 넓이를 100% 사용하고 싶다면 .container-fluid를 사용

+ 컬럼 사이에 여백은 .row에 .g-0를 적용하면 padding과 margin을 제거할 수 있음

 

타이포그래피

ex)

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Hello, world!</title>
</head>
<body>
    <h1>h1. Bootstrap heading</h1>
    <h1 class="display-1">Display 1</h1>
    <!-- 아래와 같이 쓰지 않습니다. -->
    <div class="h1">h1. Bootstrap heading</div>
    <!-- 아래와 같이 잘 쓰지 않습니다. -->
    <p class="h1">h1. Bootstrap heading</p>
    <p class="h2">h1. Bootstrap heading</p>
    <p class="h3">h1. Bootstrap heading</p>
    <p class="h4">h1. Bootstrap heading</p>
    <p class="h5">h1. Bootstrap heading</p>
    <p class="h6">h1. Bootstrap heading</p>
    <br>     
    <!-- 아래는 bold가 다릅니다. -->
    <kbd> <kbd>ctrl</kbd> + <kbd> k </kbd></kbd><br>
    <kbd> ctrl +  k </kbd><br>
    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

 

이미지

004.html

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Hello, world!</title>
</head>
<body>
    <h1>h1. Bootstrap heading</h1>
    <h1 class="display-1">Display 1</h1>
    <!-- 아래와 같이 쓰지 않습니다. -->
    <div class="h1">h1. Bootstrap heading</div>
    <!-- 아래와 같이 잘 쓰지 않습니다. -->
    <p class="h1">h1. Bootstrap heading</p>
    <p class="h2">h1. Bootstrap heading</p>
    <p class="h3">h1. Bootstrap heading</p>
    <p class="h4">h1. Bootstrap heading</p>
    <p class="h5">h1. Bootstrap heading</p>
    <p class="h6">h1. Bootstrap heading</p>
    <br>     
    <!-- 아래는 bold가 다릅니다. -->
    <kbd> <kbd>ctrl</kbd> + <kbd> k </kbd></kbd><br>
    <kbd> ctrl +  k </kbd><br>
    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

 

004.html

 

005.html

<div class="container">
    <div class="row">
        <div class="col-2">
            <img src="https://picsum.photos/200" class="img-thumbnail" alt="img">
        </div>
    <div class="col-2">
        hello
    </div>
    <div class="col-2">
        hello
    </div>
</div>
</div>

 

005.html

 

006.html

<div class="container">
    <div class="row">
        <div class="col-6">
            <img src="https://picsum.photos/200" class="rounded float-end" alt="img">
        </div>
        <div class="col-2">
            hello
        </div>
        <div class="col-2">
            hello
        </div>
    </div>
</div>

 

006.html

 

테이블

007.html

<table class="table">
    <thead>
        <tr>
            <th scope="col">구분</th>
            <th scope="col">책이름</th>
            <th scope="col">판매량</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>해리포터</td>
            <td>100권</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>해리포터2</td>
            <td>200권</td>
        </tr>
    </tbody>
</table>

 

007.html

 

+ table-light, table-dark : 여러 색상을 설정 가능

+ 행과 행을 구별하기 위해 table-striped를 주면 테이블이 중간중간 강조된 격자무늬로 볼 수 있음

008.html

<table class="table table-dark">
    <thead>
        <tr>
            <th scope="col">구분</th>
            <th scope="col">책이름</th>
            <th scope="col">판매량</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>해리포터</td>
            <td>100권</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>해리포터2</td>
            <td>200권</td>
        </tr>
    </tbody>
</table>

 

008.html

 

+ table-borderless : 테두리를 없앨 수 있음

009.html

<table class="table table-bordered">
    <thead>
        <tr>
            <th scope="col">구분</th>
            <th scope="col">책이름</th>
            <th scope="col">판매량</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>해리포터</td>
            <td>100권</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>해리포터2</td>
            <td>200권</td>
        </tr>
    </tbody>
</table>

 

009.html

 

+ Table을 꾸밀 수 있는 전체 색 (필요에 따라 활용)

010.html

<tbody>
        <tr class="table-active"><td>hello</td></tr>
        <tr class="table-primary"><td>hello</td></tr>
        <tr class="table-secondary"><td>hello</td></tr>
        <tr class="table-success"><td>hello</td></tr>
        <tr class="table-danger"><td>hello</td></tr>
        <tr class="table-warning"><td>hello</td></tr>
        <tr class="table-info"><td>hello</td></tr>
        <tr class="table-light"><td>hello</td></tr>
        <tr class="table-dark"><td>hello</td></tr>
        <tr class="bg-primary"><td>hello</td></tr>
        <tr class="bg-success"><td>hello</td></tr>
        <tr class="bg-warning"><td>hello</td></tr>
        <tr class="bg-danger"><td>hello</td></tr>
        <tr class="bg-info"><td>hello</td></tr>
    </tbody>
</table>

 

010.html

 

텍스트와 버튼

+ 부트스트랩에서 기본적으로 제공하고 있는 버튼

011.html

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

 

011.html

 

+ 모두 동일한 모양의 버튼을 생성

012.html

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

 

012.html

 

+ .btn-outline-*로 바꾸면 버튼의 배경 이미지와 색상이 제거된 아웃라인 버튼을 만들 수 있음

013.html

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button> 
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

 

013.html

 

+ .btn-lg (큰 버튼)또는 .btn-sm(작은 버튼)을 추가하면 버튼의 크기가 조정됨

014.html

<button type="button" class="btn btn-primary btn-lg">큰 버튼</button>
<button type="button" class="btn btn-secondary btn-lg">큰 버튼</button>
<button type="button" class="btn btn-primary btn-sm">작은 버튼</button>
<button type="button" class="btn btn-secondary btn-sm">작은 버튼</button>

 

014.html

 

+ 버튼이 Acrive(활성) 상태가 되면 버튼이 눌러져 보임

015.html

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

 

015.html

 

+ disabled 속성을 <button> 요소에 추가하여 버튼을 비활성 상태로 만들 수 있음 (활성화된 상태는 .active)

016.html

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

 

016.html

 

+ <a> 요소를 사용하는 비활성 버튼은 조금 다르게 동작

<a>는 disabled 속성을 지원하지 않으므로 비활성화 된 것으로 보이게 하려면 .disabled 클래스를 추가

<a>의 모든 pointer-events를 비활성화

해당 속성을 지원하는 브라우저에서는 손가락 모양의 커서가 전혀 표시되지 않음

비활성상태 버튼은 aria-disabled="true" 속성을 포함해야 함

017.html

<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

 

017.html

 

+ 토글 상태를 알기 위해서는 data-toggle="button" 을 추가하여 버튼 active 상태를 토글

= 이는 버튼을 클릭할 때마다 해당 버튼의 활성화 상태를 전환함

버튼을 미리 토글할 경우에는 .active 클래스와 aria-pressed=“true”를 수동으로 <button>에 추가해야 함

018.html

<button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false" autocomplete="off">
    Single toggle
</button>

 

018.html

 

+ 체크박스와 라디오 버튼에 부트스트랩에서 제공하고 있는 플러그인을 사용

부트스트랩의 .btn 스타일은 <label>과 같은 요소에 적용되어 checkbox나 radio에 버튼토글을 지정할 수 있음

기본 선택된 버튼은 적용하려면 .active 클래스를 input의 <label>에 수동으로 추가

ex)

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
    <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

 

경고창

ex)

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Hello, world!</title>
</head>
<body>
    <!-- 실제 alert 창은 아님! -->
    <div class="alert alert-danger" role="alert">
        javascript alert창은 아닙니다!
    </div>
    <script>
        window.alert('이게 javascript alert 창입니다!!!!');
    </script>
    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

 

뱃지

ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1>Example heading <span class="badge bg-secondary">New</span></h1>
    <button type="button" class="btn btn-primary">
        Notifications <span class="badge bg-secondary">4</span>
    </button>
    <button type="button" class="btn btn-primary position-relative">
        Inbox
        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
            99+
            <span class="visually-hidden">unread messages</span>
        </span>
    </button>
    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group me-2" role="group" aria-label="First group">
            <button type="button" class="btn btn-primary">1</button>
            <button type="button" class="btn btn-primary">2</button>
            <button type="button" class="btn btn-primary">3</button>
            <button type="button" class="btn btn-primary">4</button>
        </div>
        <div class="btn-group me-2" role="group" aria-label="Second group">
            <button type="button" class="btn btn-secondary">5</button>
            <button type="button" class="btn btn-secondary">6</button>
            <button type="button" class="btn btn-secondary">7</button>
        </div>
        <div class="btn-group" role="group" aria-label="Third group">
            <button type="button" class="btn btn-info">8</button>
        </div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

 

카드

ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/200" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="jeju.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="jeju.jpg" class="d-block w-100" alt="...">
        </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
        </button>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="card" style="width: 100%">
                    <img src="jeju.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card" style="width: 100%">
                    <img src="jeju.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card" style="width: 100%">
                    <img src="jeju.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card" style="width: 100%">
                    <img src="jeju.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card" style="width: 100%">
                    <img src="jeju.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card" style="width: 100%">
                    <img src="jeju.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

 

collapse

ex)

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Hello, world!</title>
</head>
<body>
    <!-- collase -->
<p class="d-inline-flex gap-1">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

 

Input group

ex)

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Hello, world!</title>
</head>
<body>
    <!-- form -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <form>
        <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <form>
        <div class="form-group">
        <label for="exampleFormControlInput1">Email address</label>
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
        </div>
        <div class="form-group">
        <label for="exampleFormControlSelect1">Example select</label>
        <select class="form-control" id="exampleFormControlSelect1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
        </div>
        <div class="form-group">
        <label for="exampleFormControlSelect2">Example multiple select</label>
        <select multiple class="form-control" id="exampleFormControlSelect2">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
        </div>
        <div class="form-group">
        <label for="exampleFormControlTextarea1">Example textarea</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>
    </form>
    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

 

모달창

ex)

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Hello, world!</title>
</head>
<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
    </button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
            ...
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        </div>
    </div>
    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

 

네비게이션바 (오프캔버스)

ex)

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Hello, world!</title>
    <style>
        .col-md-3,
        .col-md-4,
        .col-md-6{
            border: solid 1px black;
        }
    </style>
</head>
<body>
<nav class="navbar bg-body-tertiary fixed-top">
<div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
            </a>
            <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </li>
        </ul>
        <form class="d-flex mt-3" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
    </div>
    </div>
</div>
</nav>
    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

 

진행바

ex)

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Hello, world!</title>
</head>
<body>
    <!-- https://getbootstrap.com/docs/4.4/components/progress/ -->
    <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
    </div>
    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

 

+ 기타 정보

ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>참고로 알아두면 좋은 페이지</h1>
    <p>부트스트랩 내 Examples를 보셔도 좋습니다.</p>
    <p>무료 테마 : https://startbootstrap.com/</p>
    <p>테마 구매 : https://themes.getbootstrap.com/</p>
    <p>테마 구매 : https://wrapbootstrap.com/</p>
    <p>테마 구매 : https://themeforest.net/search/bootstrap</p>
    <p>서버유지 : https://www.iwinv.kr/</p>
    <p>텍스트 에디터 : https://summernote.org/, https://ui.toast.com/tui-editor</p>
    <p>경고창 : https://sweetalert2.github.io/</p>
</body>
</html>

 

을 끝으로 Bootstrap에 대해 마치겠습니다.

자세한 실습 파일은 제 GitHub를 참고해주세요 :)

https://github.com/soohyun020812/ormcamp

 

GitHub - soohyun020812/ormcamp: 오름캠프 교육에서 활용한 실습 내용들 정리

오름캠프 교육에서 활용한 실습 내용들 정리. Contribute to soohyun020812/ormcamp development by creating an account on GitHub.

github.com

728x90
300x250
LIST

'BootCamp > 모두의연구소:오름캠프' 카테고리의 다른 글

Django settings.py  (0) 2024.03.26
Django Basic  (2) 2024.03.24
미니 프로젝트  (0) 2024.02.21
24.02.08  (0) 2024.02.19
24.02.07  (1) 2024.02.18

'BootCamp/모두의연구소:오름캠프'의 다른글

  • 현재글24.02.19

관련글

티스토리툴바