03_부트스트랩(Bootstrap)

03_Web

03_부트스트랩(Bootstrap)

chuuvelop 2025. 2. 5. 01:53

728x90

부트스트랩(Bootstrap)
웹 개발에 있어서 보편적으로 널리 쓰이는 구성 요소들을 미리 디자인해둔 툴킷(toolkit)

01. 부트스트랩의 css와 자바스크립트 적용

css적용

# index.html

    <head> 
        <title>홈페이지</title> 
        <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">

        <script type="text/javascript" src="add_two_numbers.js"></script>
        <script type="text/javascript" src="what_time_is_it.js"></script>
    </head>

# about_me.html

    <head>
        <title>About me</title>
        <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="what_time_is_it.js"></script>
    </head>

자바스트립트 적용

# index.html, about_me.html

        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
    </body>

02. container로 레이아웃 적용하기

현재는 구성 요소가 여백 없이 너무 왼쪽에 붙어있음
부트스트랩의 container를 사용하면 간단하게 해결됨

# about_me.html

        <div class="container">
            <h1>About Me</h1>
            <h2>나에 대</h2>
            <p>HTML, CSS, JS, Django로 웹 사이트를 만듭니다</p>

            <button onclick="whatTimeIsIt()">현재시간</button>
            <hr/>

            <a href="index.html">첫 화면으로 가기</a>
        </div>

03. Grid로 웹페이지 구성 관리

# about_me.html

        <div class="container">
            <div class="row">
                <div class="col-9">
                    <h1>About Me</h1>
                    <h2>마이홈입니다.</h2>
                    <p>HTML, CSS, JS, Django로 웹 사이트를 만듭니다</p>

                    <button onclick="whatTimeIsIt()">현재시간</button>
                    <hr/>

                    <a href="index.html">첫 화면으로 가기</a>
                </div>
                <div class="col-3">
                    <img src="https://i.namu.wiki/i/bqptccUxC9dNU6GD3uZ3rTajvGYqn280l1syo6mDBDls5H1ZrIXnSRK-sflT1rJDjgCvorn7jYuOt3F_GfoF4A.webp"
                        class="img-fluid w-100">
                </div>
            </div>
        </div>

class = "row"
- 이 안에 있는 내용을 행 하나로 보겠다는 의미
class = "col-9", class = "col-3"
- 9칸짜리 열과 3칸짜리 열로 나눔
- 예제에서는 9칸 영역에는 텍스트, 3칸 영역에는 사진을 넣음
- 총 12칸 중 텍스트 영역이 9칸, 사진 영역이 3칸
class = "img-fluid w-100"
- 그림 높이가 고정되는 것이 아니라 3칸짜리 열에 해당하는 부분의 폭에 꽉 차게 조정됨
  - 사진 크기가 화면 비율에 따라 바뀜

04. 배경색 추가하기

# about_me.html

                <div class="col-3">
                    <img src="https://i.namu.wiki/i/bqptccUxC9dNU6GD3uZ3rTajvGYqn280l1syo6mDBDls5H1ZrIXnSRK-sflT1rJDjgCvorn7jYuOt3F_GfoF4A.webp"
                        class="img-fluid w-100">
                </div>
            </div>
            <div class="row">
                <div class="col-sm bg-info">col-sm</div>
                <div class="col-sm bg-secondary">col-sm</div>
                <div class="col-sm bg-warning">col-sm</div>
            </div>
        </div>

지금 만든 열들은 비율을 따로 지정하지 않았기 때문에 균등하게 크기를 배분받음

col-sm 에서 sm은 small 일 때 적용하는 기준이라는 의미인데, 그 기준은 부트스트랩 Grid에 설명되어 있음

화면 크기가 small일 때와 large일 때를 구분해서 비율을 정할 수도 있음

# about_me.html

            <div class="row">
                <div class="col-sm col-lg-6 bg-info">col-sm</div>
                <div class="col-sm col-lg-3 bg-secondary">col-sm</div>
                <div class="col-sm col-lg-3 bg-warning">col-sm</div>
            </div>

05. 열마다 이미지 추가하기

# about_me.html

            <div class="row">
                <div class="col-12">
                    <h2>Portfolio</h2>
                </div>
                <div class="col-sm col-lg-6 bg-info">
                    <img class="img-fluid" src="https://wallpapercave.com/wp/wp15007546.webp">
                </div>
                <div class="col-sm col-lg-3 bg-secondary">
                    <img class="img-fluid" src="https://wallpapercave.com/wp/wp15001473.webp">
                </div>
                <div class="col-sm col-lg-3 bg-warning">
                    <img class="img-fluid" src="https://wallpapercave.com/wp/wp14976450.webp">
                </div>
            </div>
        </div>

06. spacing으로 간격 주기

마진 : 내용 경계 바깥쪽으로 간격을 두는 방법
패딩 : 내용 경계 안쪽으로 간격을 두는 방법

내비게이션 바와 내용 사이에 마진 넣기

부트스트랩에서 요소의 class에 m-숫자 를 추가하면 마진을 줄 수 있음
- mt-숫자 는 위에만 마진 주기
- mb-숫자 는 아래에만 마진 주기
- my-숫자 는 위아래 모두에 마진 주기

# about_me.html

        <div class="container">
            <div class="row my-3">
                <div class="col-9">
                    <h1>About Me</h1>

내비게이션 바 정렬

ms-auto 또는 me-auto를 사용하면 구성요소를 정렬시킬 수 있음
- ms-auto 는 왼쪽 마진을 최대한 확보하라는 뜻
- me-auto 는 오른쪽 마진을 최대한 확보하라는 뜻

# about_me.html

                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Log In</a>
                        </li>
                    </ul>

07. 부트스트랩으로 웹사이트 모양 만들기

모달로 로그인창 만들기

모달(modal) 은 브라우저 위에 팝업 형태로 나오는 요소

# blog_list.html

    <li class="nav-item">
        <a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">Log In</a>
    </li>

data-bs-toggle="modal" : 모달을 작동시키는 버튼이라는 뜻
data-bs-target="#loginModal" : loginModal 이라는 아이디를 갖는 요소와 연결된 버튼임을 표시

버튼 추가하기

구글 로그인 버튼, 이메일 로그인 버튼, 회원가입 버튼 3개를 추가할 예정

# blog_list.html

    <div class="modal-body">
        <div class="row">
            <div class="col-md-6">
                <button type="button" class="btn btn-outline-dark">Log in with Google</button>
                <button type="button" class="btn btn-outline-dark">Log in with E-mail</button>
            </div>
            <div class="col-md-6">
                <button type="button" class="btn btn-outline-dark">Sign Up with E-mail</button>
            </div>
        </div>
    </div>

버튼에 아이콘 추가하기

https://fontawesome.com/

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

728x90