[기술]HTML/css 활용한 블로그 그림 그리기

gov

Dec 03, 2024

Contents

코드 실행 화면

💡

Bootstrap 5 활용한 인블로그 메인 화면 구현하기

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

https://www.w3schools.com/bootstrap5/index.php

코드


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

    <style>
        .my-index-item-box {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 10px;
        }
    </style>

</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">Backend study</div>
            <div class="fs-4 mt-3">개발 공부하는 개발자 지망생</div>
        </div>

        <div class="my-index-menu-box d-flex mt-5">
            <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-index-item-box mt-3">
            <div class="card"> <!-- 해당 div반복 -->
                <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>
                        </p>
                    </div>
                </div>
            </div>
        </div>
</body>

</html>

실행 화면

<!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> <style> .my-index-item-box { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; } </style> </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">Backend study</div> <div class="fs-4 mt-3">개발 공부하는 개발자 지망생</div> </div> <div class="my-index-menu-box d-flex mt-5"> <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-index-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> </p> </div> </div> </div> </div> </body> </html>