뚝딱햄 탈출기

부트스트랩 Bootstrap : 개념, 실습 본문

web

부트스트랩 Bootstrap : 개념, 실습

hyrmzz1 2023. 10. 8. 23:43

부트스트랩이란?

부트스트랩은 트위터에서 개발한 무료 프론트엔드 프레임워크이다.

 

사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것으로, 쉽고 빠른 반응형 웹 디자인을 만들 수 있다.

부트스트랩에는 모바일/태블릿/데스크탑 등 다양한 사용환경에 최적화되어 다르게 보이도록 하는 처리가 되어있기 때문에 같은 HTML 파일로 화면의 크기에 따라 다르게 보이도록 디자인할 수 있다.

 

 '프레임워크' 라고 하는 것은 재사용이 가능한 요소들의 집합되어 있으며, 정해진 구조와 틀 안에서 이것들이 확장이 가능한 기반 코드로 이루어 짐을 뜻한다. jquery는 라이브러리이고, 부트스트랩은 프레임워크다. 따라서, 우리는 '부트스트랩 프레임워크에서 jquery 라이브러리를 사용할 수 있다.'라고 말할 수 있다.

jQuery에 관한 내용은 아래 포스팅 참고

2023.10.09 - [web] - [JavaScript] jQuery 제이쿼리

 

[JavaScript] jQuery 제이쿼리

jQuery란? HTML 요소들을 조작하는 편리한 JavaScript 라이브러리. JavaScript와 다른 특별한 소프트웨어가 아니라 미리 작성된 코드를 모아둔 것이다. (라이브러리니까!) 직접 JS 코드를 작성해 모든 기능

hyrmzz1.tistory.com

부트스트랩 불러오기

아래 링크를 HTML 파일의 <head>에 포함해야 한다.

첫 번째 줄은 클래스들이 정의되어 있는 CSS 파일이고, 뒤의 2줄은 버튼 등이 동작하게 하는 자바스크립트 파일이다.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" 
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery and Bootstrap Bundle (includes Popper) -->
<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/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>

https://getbootstrap.com/docs/5.3/components/accordion/ 에서 다양한 부트스트랩 컨테이너를 확인할 수 있다.

Bootstrap과 jQuery를 함께 사용할 때

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
    integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" 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>

위 코드로 import 해줘야 사용가능!

bootstrap import 코드로는 둘의 작동이 부딪히는지 jQuery가 적용되지 않는다.

 

부트스트랩 실습

부트스트랩 컴포넌트를 사용해 아래와 같은 웹페이지를 만들어보자.

 

jumbotron은 5.3 버전의 부트스트랩 페이지엔 없어서, https://getbootstrap.com/docs/4.0/components/jumbotron/ 에서 찾아 사용했다.

 

부트스트랩의 jumbotron component와 card component를 이용해 html을 작성했다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>부트스트랩 실습</title>
    <link rel="stylesheet" href="style.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery and Bootstrap Bundle (includes Popper) -->
    <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/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
        crossorigin="anonymous"></script>
</head>

<body>
    <div class="jumbotron">
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention
            to
            featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
        </p>
    </div>
    <div class="cards">
        <div class="card" style="width: 18rem;">
            <img class="card-img-top"
                src="https://tms-outsource.com/blog/wp-content/uploads/2023/05/bootstrap-alternatives-1024x461.jpg"
                alt="Card image cap">
            <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.card 다섯개 더 작성 -->
    </div>
</body>

</html>

card 3개가 한 줄에 오도록 + 화면의 70% 정도에 웹페이지 내용이 나오도록 만들어야겠다.

card는 <div>로 이루어져 있는데, <div>는 display 속성이 block으로 지정된 엘리먼트이기 때문에 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.

<div> 외에도 대표적인 block 엘리먼트로는 <p>, <h1> 등이 있다.

 

card의 display 속성을 flex 속성으로 변경해 (부모 엘리먼트에 display: flex; 작성) 3개의 card들을 한 줄에 배치할 수 있다. 그러나 이와 같은 css 작업 없이 부트스트랩의 그리드 시스템을 통해 간편히 구현 가능하다.

https://getbootstrap.kr/docs/5.0/layout/grid/

그리고 <div class = "jumbotron"> 와 <div class = "cards">의 양 옆과 하단에 여백을 주고, 화면 가운데로 오도록 변경했다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>부트스트랩 실습</title>
    <link rel="stylesheet" href="style.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery and Bootstrap Bundle (includes Popper) -->
    <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/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
        crossorigin="anonymous"></script>
</head>

<body>
    <div class="wrap">
        <div class="jumbotron">
            <h1 class="display-4">Hello, world!</h1>
            <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention
                to
                featured content or information.</p>
            <hr class="my-4">
            <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
            <p class="lead">
                <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
            </p>
        </div>
        <div class="container">
            <div class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top"
                            src="https://tms-outsource.com/blog/wp-content/uploads/2023/05/bootstrap-alternatives-1024x461.jpg"
                            alt="Card image cap">	<!-- alt은 img가 없을 때 나타나는 메세지 -->
                        <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"> 다섯개 더 작성 -->
            </div>
        </div>
    </div>
</body>

</html>
.wrap{
    width: 70%;
    margin: auto;
    margin-bottom: 30px;
}

.col{
    margin-bottom: 15px;
}

div.col의 우측에 있는 공백때문에 wrap에서 맨 왼쪽 card까지의 공백과, wrap에서 맨 오른쪽 card까지의 공백의 너비가 달라진 게 굉장히 맘에 안 들어서 아래의 css 속성을 부여했다.

.card{
    margin: 0px auto;
}

card의 좌우에 margin: auto; 를 적용해 div.col의 한가운데에 card가 위치하게 되었다. wrap에서 맨 왼쪽 card까지의 공간과 맨 오른쪽 card까지의 공간이 같아졌다.

div.container의 margin을 없애고 width를 100%로 바꾸고, 맨 왼쪽 card와 맨 오른쪽 card를 div.container의 좌우에 맞추도록 변경하고 싶은데, margin: 0px; 이 작동을 안한다 .......... 😑 언젠가 수정해야지 ㅎ

저작자표시 비영리 변경금지

'web' 카테고리의 다른 글

[JavaScript] jQuery 제이쿼리  (0) 2023.10.09
Ajax : 개념, 실습  (0) 2023.10.09
[html] 로그인 화면 만들기 : form, input, label, button, submit  (0) 2023.10.08
웹의 동작 개념 : Web API, JSON  (2) 2023.10.05
[HTML][CSS] 구글 웹폰트 적용  (0) 2023.08.15
'web' Related Articles more
Comments