[html/css] Bootstrap 5와 Utility Class

젠넷 Jannet·2025년 2월 11일

CSS bootstrap codingApple html

HtmlCSS

목록 보기

1/1

코딩애플에서 bootstrap에 대해 배운 내용 정리함

Bootstrap

프론트엔드 컴포넌트 라이브러리 라고도 함
웹페이지에 필요한 버튼 메뉴 탭 등 필수 요소들을 모아놓은 css 파일

설치 방법

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

(5.2.x 버전)
자신의 html 파일에다가 이 코드를 갖다 붙이면 설치는 끝난다.

Bootstrap 사용법

예를 들어 자신이 버튼을 만들것이다.
그러면 Bootstrap 공식 문서에 들아가서
Button을 검색을 하면 문서에

위와 같은 내용이 있을 것이다.

맘에 드는 버튼 스타일을 골라 밑에 있는 코드를 갖다 붙이면
버튼은 웹페이지에 붙일 수 있다.

Utility Class

<div class="container">여백 박스</div>
<div class="mt-5">margin-top 쉽게 주기</div>
<div class="pb-5">padding-bottom 쉽게 주기</div>
<div class="fs-3">font-size 쉽게 주기</div>
<div class="text-center">text-align 쉽게 주기</div>
<div class="fw-bold">font-weight 쉽게 주기</div>

다음과 같은 class를 사용하면 마진이나 패딩같은 스타일을
편하게 줄 수 있다.
그리고 이런 class들을 utility class 라고 한다.

젠넷 Jannet