[CSS] #12. CSS 프레임워크 : 부트스트랩 (Bootstrap)

jaeyeon_lee·2024년 1월 5일

CSS 유데미

유데미

목록 보기

10/22

CSS 프레임워크 : 부트스트랩 (Bootstrap)

Introduction

부트스트랩과 컨테이너

부트스트랩

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

간단하게 CDN을 사용하여 바로 시작할 수 있음

CDN ? 콘텐츠 전송 네트워크 혹은 배포 네트워크를 나타냄

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

이미지 슬라이드나 접히는 네비게이션바 혹은 툴팁, 드롭다운 메뉴등이 필요한경우 script를 추가해줌

컨테이너

컨테이너는 부트스트랩에서 가장 기본적인 레이아웃 요소. 컨테이너는 콘텐츠를 담고 여백을 설정함

<div class="container">
  <!-- Content here -->
</div>

container-fluid는 전체 너비 컨테이너가 되어 뷰포트 전체 너비를 차지하게 됨

<div class="container-fluid">
  ...
</div>

반응형 container

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

부트스트랩 버튼

다양한 시맨틱 색상을 적용해 button을 만들 수 있음.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-link">Link</button>

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>

사이즈 조절 (lg ,sm, block등)

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

부트스트랩 타이포그래피와 유틸리티

h1 h2등의 크기 조절

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>

인용문과 같은 스타일

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

텍스트 정렬 & 색상 & 배경색

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>

배지와 경고, 버튼 그룹

Badges : 보통 카운트나 일종의 레이블을 보여주기 위해 사용됨 (알림 & 알약배지)

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

<span class="badge badge-pill badge-primary">Primary</span>

버튼 그룹 (버튼을 그룹으로 묶어서 한개처럼 보여지게 할 수 있음)

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

경고 (Alert)

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

🖥️ 부트스트랩 기본 실습

index.html에 몇 가지 시작용 마크업을 제공해드렸습니다. 부트스트랩은 이미 포함되어 있습니다. 다음 지침에 따라 적절한 부트스트랩 클래스를 추가하세요.

섹션을 부트스트랩 컨테이너로 만드세요.
h1에 흰색 텍스트와 어두운 배경을 지정하고 텍스트를 가운데 정렬하세요.
div을 알림으로 만드세요('경고' 색상). 접근성을 위해 'role' 속성을 'alert'으로 설정하세요.
첫 번째 버튼을 녹색 부트스트랩 버튼으로 만드세요.
두 번째 버튼을 빨간색 부트스트랩 버튼으로 만드세요.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Buttons Exercise</title>
    <!--INCLUDING BOOTSTRAP-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

</head>
<body>
    <section class="container">
      <h1 class="text-white bg-dark text-center">Bad News</h1>
      
      <div class="alert alert-warning" role="alert">
        You are going to die one day! It sucks, but it's normal :( 
      </div>
      
      <button class="btn btn-success">Come To Terms With</button>
      <button class="btn btn-danger">Continue To Deny</button>
      
    </section>
</body>
</html>

부트스트랩 그리드 개요

그리드 시스템을 통해 콘텐츠를 배열할 수 있음. 그리드 시스템은 컨테이너 안에서만 작동함!! 행(row)은 클래스를 사용해 행을 만들어야함!

부트스트랩의 모든 행에는 분배될 공간이 12개씩 있음!

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

🖥️ 부트스트랩 그리드 실습

아래 그림과 같이 레이아웃을 재현하세요. 부트스트랩이 포함되어 있긴 하지만 모든 관련 마크업(컨테이너, 행, 열 등)을 여러분이 직접 작성해야 합니다. 여기에서는 특정 색상의 코드를 테스트하지 않겠지만 열을 구분할 수 있도록 열에 배경색을 지정하는 것이 좋습니다. 각 열에 들어가는 특정 텍스트에 대한 테스트도 하지 않겠습니다.

참고: 부트스트랩을 사용하면 열 크기를 지정하지 않아도 'col'을 사용하여 행의 남은 공간을 자동으로 채울 수 있지만(일반적으로 허용되는 해결책입니다) 이 연습 문제의 테스트에서는 이를 올바른 해결책으로 인정하지 않습니다. 따라서 각각의 개별 col-* 클래스에 대해 열 크기를 명시적으로 포함하시기 바랍니다.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Grid Exercise</title>
    <!--INCLUDING BOOTSTRAP-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

</head>
<body>
<div class="container">
				<div class="row">
            <div class="bg-danger col-4">One Third</div>
            <div class="bg-info col-8">Two Third</div>
        </div>
        <div class="row">
            <div class="bg-warning col-3">One Quarter</div>
            <div class="bg-primary col-6">One Half</div>
            <div class="bg-warning col-3">One Quarter</div>
        </div>
</div>
</body>
</html>

반응형 부트스트랩 그리드

매우 작음<576px	작음≥576px	중간≥768px	대형≥992px	초대형≥1200px
최대 컨테이너 너비	없음(자동)	540px	720px	960px
클래스 접두사	.col-	.col-sm-	.col-md-	.col-lg-

유용한 그리드 유틸리티

align-self : 하나의 열을 정렬할 수 있음.

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

justify-content

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

부트스트랩 폼

form control

input 태그 자체에 들어가있음

<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="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>

check box

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

부트스트랩 네비게이션바

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>