TWD 10. 부트스트랩

2023-01-30

부트스트랩

본 내용은 'The Web Developer 부트캠프 2023', 'Mozilla Developer Network'를 참고하여 작성했습니다.

부트스트랩이란?

트위터(Twitter)에서 개발한 웹 사이트 (HTML, CSS, JS) 들을 쉽게 만들 수 있게 도와주는 FrameWork다.
Bulma, Foundation, Semantic UI 등 다른 FrameWork도 있다.

부트스트랩 사용하기

사용법은 다운받거나, CDN(Content Delivery Network)을 통해 원격으로 접근하여 사용한다.
- 실제 앱을 배포할 때에는 사용 중인 부트스트랩의 url이 변경되거나 없어질 수 있기 때문 url이 아닌 다운받아서 해야 한다.
강의는 4.5 버전을 예시로 보여주나, 부스트트랩 최신 버전인 5.2 버전을 가지고 간단하게 설명하겠다.

1. 프로젝트 최상위 폴더에 index.html file파일을 생성해주세요.

그리고 모바일에서의 적절한 반응형 동작을 위해 <meta name="viewport">를 넣어주세요.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

2. Bootstrap의 CSS와 JS를 포함시켜주세요.

CSS를 위해서 <head>에 <link> 태그를 추가시켜주고, JavaScript 번들 (드롭다운, 팝오버 및 툴팁 위치 지정을 위한 Popper 포함)을 위헤서 </body> 전에 <script> 태그를 삽입해주세요. CDN 링크에 대해서 자세히 알아보세요.

나중에 자신이 적용할 css파일이 있다면, 뒤쪽 코드 라인에 작성하면 된다.
CDN 링크
- CSS https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css
- JS https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js

CDN으로 포함시키기

  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

  <!-- JavaScript Bundle with Popper -->
  <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>

<!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>

📌 Popper와 JS를 개별로 포함시킬 수도 있습니다. 드롭다운, 팝오버 또는 툴팁을 사용할 생각이 없다면 Popper를 제외해서 수십 킬로바이트를 아낄 수 있습니다.

popper이란?

간단히 말해서 POPPER는 TOOLTIP & POPOVER 관련 플러그인이며, 다음과 같다.

크기를 고려 하여 참조를 기준으로 툴팁 또는 팝오버를 배치하고 해당 화살표를 참조 중앙에 배치합니다.

참조(다른 offsetParents, 다른 또는 중첩된 스크롤 컨테이너)와 관련하여 할 수 있는 다양한 컨텍스트를 고려합니다.

툴팁이나 팝오버를 가능한 한 보기 좋게 유지합니다. 잘리거나 잘리는 것을 방지하고(overflow 방지), 원본이 맞지 않으면 배치를 변경합니다(flipping 방지).

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

3. 안녕, 세상! 부트스트랩 페이지를 보려면 선택한 브라우저에서 페이지를 엽니다.

이제 자신만의 레이아웃 을 만들고 , 수십 개의 구성 요소 를 추가 하고, 공식 예제 를 활용하여 부트스트랩으로 빌드를 시작할 수 있습니다.

1. Layout

Container

가장 기본적인 레이아웃 요소, Grid를 사용할 때 필요하다. 기본적으로 여백과 정렬 등을 주고 콘테츠를 빠르게 담기위한 방법이다.

container 작은 화면의 경우를 제외하고 양쪽에 여백이 있다.
container-flouid 는 가로 전체를 차지한다.

Grid

강력한 모바일 우선 flexbox 그리드를 사용하여 12개의 열 시스템, 6개의 기본 반응형 계층, Sass 변수 및 믹스인, 수십 개의 사전 정의된 클래스 덕분에 모든 모양과 크기의 레이아웃을 사용할 수 있다.

cotainer가 존재해야 하며, 보통 <div>나 <section>에 class=row를 사용해서 행을 만들어야 한다.
부트스트랩의 모든 행에는 분배될 공간이 12개씩 존재한다.
- col-숫자과 col만 넣는 등의 방법을 통해 열 크기를 조절한다.

2. Typography와 Utility

Typography는 전역 설정, 제목, 본문 텍스트, 목록 등을 사용할 수 있다.
Utility는 color, borders, margin, padding, display, position, size 등 다양한 CSS 속성들을 사용할 수 있다.

3. Form

폼 컨트롤, 레이아웃 옵션, 체크박스&라디오버튼, 브라우저의 범위, 사용자 정의 컴포넌트 등 다양한 Form들을 사용할 수 있다.

4. Components

Buttons

다양한 크기, 상태 등을 지원하는 폼, 대화상자 등 다양한 Buttons을 사용할 수 있다.

색상은 변경이 가능하므로 danger 라고 해서 꼭 빨간색이 아닌 semantic 이 중요하다.
Button Group으로 버튼들을 묶어서 더 다양하게 활용이 가능하다.

Bootstrap의 강력하고 반응형적인 내비게이션 헤더, 내비게이션 바의 문서와 예. 콜랩스(collapse) 플러그인 지원을 포함한 브랜딩, 내비게이션 등을 사용할 수 있다.

Card

카드는 유연하고 확장이 가능한 컨테이너이다. Headers나 footers의 옵션, 다양한 콘텐츠, 문맥에 따른 배경색, 강력한 표시 옵션이 포함되어 있다. Bootstrap 3의 panels、wells、thumbnails는 카드로 바꾼다. 이러한 컴포넌트의 기능은, 카드의 클래스로 이용할 수 있다.

기본적으로는 테두리가 있는 상자다.

Carousel

캐러셀은 이미지나 텍스트의 슬라이드를 가로로 슬라이드시켜 여러 개를 표시하는 컴포넌트다.

Bootstrap의 드롭다운 플러그인으로 링크 목록 등을 표시하기 위한 상황별 오버레이를 토글한다.

Spinners

HTML, CSS, JavaScript를 사용하지 않고 완전히 빌드된 Bootstrap 스피너를 사용하여 컴포넌트나 페이지의 로딩 상태를 표시한다.

Bootstrap JavaScript 모달 플러그인을 사용하여 라이트박스, 사용자 알림 또는 사용자 정의 콘텐츠 즉, 대화창을 띄울 수 있다.

5. Icons

SVG(Scalable Vector Graphics)라는 HTML요소로 부트스트랩에서 제공하는 무료 아이콘들을 사용할 수 있다.

아이콘을 사용할 때는 통상적으로 사용하는 요소나 컴포넌트 입력 그룹이다.

Twitter Facebook LinkedIn

ChangMinYang