기술정리

[기술 정리] 17. Bootstrap 5로 HTML 문서 작성하는 방법

KangHo Lee's avatar
KangHo Lee
Dec 03, 2024
[기술 정리] 17. Bootstrap 5로 HTML 문서 작성하는 방법
Contents
1. 박스 설계2. 부트스트랩으로 Cards 생성3. 배치4. 완성된 화면참고 - 요소의 Margin과 Padding 설정
다음 화면을 Bootstrap 으로 구현해보겠습니다.
notion image

1. 박스 설계

<div class="my-item-box">
    <div class="my-item">
        <img src="#">
        <div>[SQL문제풀기]있었는데요 없었습니다(JOIN)</div>
        <div>설명부분..</div>
        <div>
            <div>나겸 이미지</div>
            <div>Nov 29, 2024</div>
            <div>SQL문제풀기</div>
        </div>
    </div>
</div>
  • 출력할 정보를 요소 단위(div)로 분리해서 적습니다.
notion image

2. 부트스트랩으로 Cards 생성

부트스트랩 라이브러리 호출

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

부트스트랩 Card 예시

<div class="container mt-3">
    <h2>Card Image</h2>
    <p>Image at the top (card-img-top):</p>
    <div class="card" style="width:400px">
        <img class="card-img-top" src="../bootstrap4/img_avatar1.png" alt="Card image" style="width:100%">
        <div class="card-body">
            <h4 class="card-title">John Doe</h4>
            <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
            <a href="#" class="btn btn-primary">See Profile</a>
        </div>
    </div>
</div>
<br>

적용

<div class="my-card-item-box mt-3">
    <div class="card">
        <img class="card-img-top" src="photo.png" alt="Card image">
        <div class="card-body">
            <h4 class="card-title">[SQL문제풀기]있었는데요 없었습니다(JOIN)</h4>
            <p class="card-text">설명부분..</p>
            <div class="card-text d-flex">
                <div class="me-2">나겸 이미지</div>
                <div class="me-2">Nov 29, 2024</div>
                <div class="badge rounded-pill bg-secondary p-2">SQL문제풀기</div>
            </div>
        </div>
    </div>
</div>
  • m-3, p-2
    • margin과 padding 설정

3. 배치

1) Flex

  • d-flex를 클래스에 추가할 경우 활성화됩니다.
  • 인라인(가로)로 배치를 변경합니다.
  • justify-content로 배치 설정을 핼 수 있습니다.

2) Grid

.my-card-item-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
}
  • grid의 경우 표와 비슷한 형태로 요소를 배치합니다.
  • grid-template-columns: 1fr 1fr 1fr;
    • 1줄에 3 개씩 요소를 배치합니다.
    • 1fr의 1은 비율을 의미합니다.
💡
부트스트랩 스타일 설정에 개발자의 스타일 설정을 덮어 씌우는 방법
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
		
		<!-- link:css 자동 완성 가능-->
    <link rel="stylesheet" href="css/style.css">
    
</head>
  • 부트스트랩 link와 script 태그 밑에 link 태그로 작성하면 아래 쪽 내용이 적용됩니다.
style.css
@import url(index.css);
@import url(detail.css);
@import url(common.css);
  • <link rel="stylesheet" href="css/style.css">
    • style.css 안의 improt 된 css 3개 모두 적용됩니다.
💡
!important는 특정 스타일 규칙의 우선순위를 높여, 다른 어떤 스타일 규칙보다 우선 적용되도록 하는 방법입니다.
/* 일반적인 스타일 규칙 */
p {
    color: blue;
}

/* 우선순위를 높인 스타일 규칙 */
p {
    color: red !important;
}
💡
class 이름이 부트스트랩 class 이름과 겹칠 수 있으므로 내가 작성한 class는 prefix (my-같은)를 추가하는 게 좋습니다.

4. 완성된 화면

notion image
화면 전체 코드
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <link rel="stylesheet" href="css/style.css">
    
</head>

<body>

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Logo</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">홈</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">글쓰기</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">로그아웃</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">

        <div>
            <div class="fs-1 mt-4 fw-bold">Nakyeom's Study</div>
            <div class="fs-4 mt-3">개발 공부하는 개발자 지망생</div>
        </div>

        <div class="my-index-menu-box d-flex mt-5 fw-bold">
            <div class="badge rounded-pill bg-secondary p-2 fs-6 me-3">See All</div>
            <div class="me-3">디자인패턴</div>
            <div class="me-3">스프링부트</div>
            <div class="me-3">기술정리</div>
            <div class="me-3">플러터</div>
        </div>
        <div class="my-card-item-box mt-3">

            <div class="card">
                <img class="card-img-top" src="photo.png" alt="Card image">
                <div class="card-body">
                    <h4 class="card-title">[SQL문제풀기]있었는데요 없었습니다(JOIN)</h4>
                    <p class="card-text">설명부분..</p>
                    <div class="card-text d-flex">
                        <div class="me-2">나겸 이미지</div>
                        <div class="me-2">Nov 29, 2024</div>
                        <div class="badge rounded-pill bg-secondary p-2">SQL문제풀기</div>
                    </div>
                </div>
            </div>

            <div class="card">
                <img class="card-img-top" src="photo.png" alt="Card image">
                <div class="card-body">
                    <h4 class="card-title">[SQL문제풀기]있었는데요 없었습니다(JOIN)</h4>
                    <p class="card-text">설명부분..</p>
                    <p class="card-text">
                    <div>나겸 이미지</div>
                    <div>Nov 29, 2024</div>
                    <div class="badge rounded-pill bg-secondary p-2">SQL문제풀기</div>
                    </p>
                </div>
            </div>           

        </div class="my-item-box mt-3">
    </div>

</body>
</html>

참고 - 요소의 Margin과 Padding 설정

notion image
Share article

devleekangho

RSS·Powered by Inblog