KDT 공부 일지 - 2026.02.09

김시코·2026년 2월 9일
KDThtml공부일지

KDT 공부 일지

목록 보기
25/27

2026년 2월 9일 월요일 - 7주차

Bootstrap 기본

row, col, magin, padding 예시

[Bootstrap2.html]
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
    <!--
        레이아웃은 row, col만 잘 사용하면 된다.
        아래로 짜고싶으면 row, 옆으로 짜고싶으면 col을 사용.
    -->

    <!-- 원래는 1024px가 이상적인데, 창을 작게 띄워놓고 있어서 잘려보이는게 있기 때문에 조금 조정 함. -->
    <div style="width: 950px;" class="container-fluid">
        <!-- bootstrap은 반응형을 지원하는데, 반응형이란  화면 크기에 반응해서 크기가 변하는것이다.
        container만 하면 반응형인데, fluid를 뒤에 붙이면 반응형이 아닌 어떤 상황에서도 화면을 꽉 채운다. -->
        <div class="row">
            <!-- col-1 하면 12분의 1을 차지하고 그냥 col만 하면 나머지 부분을 다 차지한다.
            12개로 나눈 이유는, 개발자들은 10개로 나누는걸 선호하는데, 왜 12냐면 약수가 많아서 나눌 수 있는 경우의 수가 많기 때문이다. -->
            <div class="col-1">1-1</div> <!-- 12분의 1을 가져라 -->
            <div class="col">1-2</div>   <!-- 에라 모르겠다 남은거 다 가져라 -->
            <div class="col-2">1-3</div> <!-- 12분의 2를 가져라 -->
        </div>
        <div class="row">
            <div class="col-auto">2-1</div>
            <div class="col">2-2</div>
            <div class="col-2">
                <div class="row">2-3</div> <!-- !!!절대 row에 값 넣지 마라!!! -->
                <div class="row">2-4</div> <!-- !!!절대 row에 값 넣지 마라!!! -->
            </div>
        </div>
        <div class="row"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>
[Bootstrap3.html]
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
    <!--
    세부 조정: 마진, 패딩
    마진 - 박스 외부에 공백을 준다. 빈공간을 잡아먹으며 밀어내기때문에 이미 레이아웃이 존재한다면 깨질 위험이 있다.
    패딩 - 박스 내부에 공백을 준다. 얘는 조금 유연하게 사용해도 괜찮다.
    -->
    <div style="width: 950px;" class="container-fluid">
        <!-- row는 mt, my, mb 만 쓰기. y축만 컨트롤하는것들..
        mt: marginTop 숫자는 5면 매우 넓게 3이면 적당 1이면 조금만. 다 이렇게 약자임. 사이트에서 확인하고 쓰기
        -->
        <div class="row mt-5">
            <!-- col에서는 제발 좌우(x축)만 컨트롤해라. 근데, 패딩으로는 위아래 조절 해도 된다.
            bootstrap에서는 기본적으로 col에 패딩이 잡혀있다. 붙이고싶으면 반갑 기준으로 패딩을 0으로 만들어주기
            -->
            <div class="col-2">안녕하세요.</div>
            <div class="col-2">반갑습니다.</div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap으로 만든 게시판

[board]
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
    <div style="width: 1200px;" class="container-fluid">
        <div class="row bg-secondary-subtle p-2 align-items-center">
            <div class="col-1 text-center fw-bold">Navbar</div>
            <div class="col-1 text-center">Home</div>
            <div class="col-1 text-center">Link</div>
            <div class="col-1 text-center">DropDown</div>
            <div class="col-1 text-center">Disable</div>
            <div class="col"></div>
            <div class="col-3 text-center">
                <input placeholder="Serch" class="form-control" type="text">
            </div>
            <div class="col-2 text-center">
                <button type="button" class="btn btn-outline-success">검색</button>
            </div>
        </div>
        <div class="row my-3 align-items-center">
            <div class="col text-center fs-1">게시판</div>
        </div>
        <div class="row align-items-center">
            <div class="col-2">
                <select class="fs-5">
                    <option>제목</option>
                    <option>내용</option>
                    <option>제목+내용</option>
                    <option>작성자</option>
                </select>
            </div>
            <div class="col">
                <input placeholder="Serch" class="form-control" type="text">
            </div>
            <div class="col-2 d-grid">
                <button type="button" class="btn btn-primary">검색</button>
            </div>
        </div>
        <div class="row mt-3 text-center border-bottom border-3 align-items-center pb-2">
            <div class="col-1 fw-bold">글 번호</div>
            <div class="col-1 fw-bold">구분</div>
            <div class="col-4 fw-bold">제목</div>
            <div class="col-2 fw-bold">작성자</div>
            <div class="col-1 fw-bold">조회수</div>
            <div class="col-3 fw-bold">날짜</div>
        </div>
        <div class="row mt-3 border-bottom align-items-center pb-3">
            <div class="col-1 text-center fw-bold">8</div>
            <div class="col-1 text-center">가입인사</div>
            <div class="col-4">안녕하세요!!!<span class="badge ms-2 text-bg-danger">New</span></div>
            <div class="col-2 text-center">민수짱</div>
            <div class="col-1 text-center">15</div>
            <div class="col-3 text-end pe-3">2026-02-08</div>
        </div>
        <div class="row mt-3 border-bottom align-items-center pb-3">
            <div class="col-1 text-center fw-bold">6</div>
            <div class="col-1 text-center">가입인사</div>
            <div class="col-4">안녕하세용~~ ^^<span class="text-primary"> [4]</span></div>
            <div class="col-2 text-center">지수맘</div>
            <div class="col-1 text-center">11</div>
            <div class="col-3 text-end pe-3">2026-02-07</div>
        </div>
        <div class="row mt-3 border-bottom align-items-center pb-3">
            <div class="col-1 text-center fw-bold">6</div>
            <div class="col-1 text-center">잡담</div>
            <div class="col-4">딸이 숨겨둔 비상금 위치를 찾아버렸는데~..<span class="text-primary"> [10]</span></div>
            <div class="col-2 text-center">아율파파</div>
            <div class="col-1 text-center">13</div>
            <div class="col-3 text-end pe-3">2026-02-07</div>
        </div>
        <div class="row mt-3 border-bottom align-items-center pb-3">
            <div class="col-1 text-center fw-bold">5</div>
            <div class="col-1 text-center">질문</div>
            <div class="col-4">등업 어떻게 하나요?<span class="text-primary"> [2]</span></div>
            <div class="col-2 text-center">수영하는 영수</div>
            <div class="col-1 text-center">3</div>
            <div class="col-3 text-end pe-3">2026-02-08</div>
        </div>
        <div class="row mt-3 border-bottom align-items-center pb-3">
            <div class="col-1 text-center fw-bold">4</div>
            <div class="col-1 text-center">가입인사</div>
            <div class="col-4">반갑읍니다...<span class="text-primary"> [4]</span></div>
            <div class="col-2 text-center">철수Lee</div>
            <div class="col-1 text-center">9</div>
            <div class="col-3 text-end pe-3">2026-02-07</div>
        </div>
        <div class="row mt-3 border-bottom align-items-center pb-3">
            <div class="col-1 text-center fw-bold">3</div>
            <div class="col-1 text-center">잡담</div>
            <div class="col-4">오늘 날씨 너무.. 춥네요. 다들 감기조심~ ^^..<span class="text-primary"> [7]</span></div>
            <div class="col-2 text-center">아율파파</div>
            <div class="col-1 text-center">15</div>
            <div class="col-3 text-end pe-3">2026-02-07</div>
        </div>
        <div class="row mt-3 border-bottom align-items-center pb-3">
            <div class="col-1 text-center fw-bold">3</div>
            <div class="col-1 text-center">가입인사</div>
            <div class="col-4">안녕하십니까<span class="text-primary"> [2]</span></div>
            <div class="col-2 text-center">수영하는 영수</div>
            <div class="col-1 text-center">5</div>
            <div class="col-3 text-end pe-3">2026-02-07</div>
        </div>
        <div class="row mt-3 border-bottom align-items-center pb-3">
            <div class="col-1 text-center fw-bold">2</div>
            <div class="col-1 text-center">가입인사</div>
            <div class="col-4">반갑습니다 잘부탁드려요...</div>
            <div class="col-2 text-center">아율파파</div>
            <div class="col-1 text-center">8</div>
            <div class="col-3 text-end pe-3">2026-02-07</div>
        </div>
        <div class="row mt-3 border-bottom align-items-center pb-3">
            <div class="col-1 text-center fw-bold">1</div>
            <div class="col-1 text-center">잡담</div>
            <div class="col-4">카페 운영 시작합니다!!<span class="text-primary"> [15]</span></div>
            <div class="col-2 text-center">총관리자</div>
            <div class="col-1 text-center">17</div>
            <div class="col-3 text-end pe-3">2026-02-05</div>
        </div>
        <div class="row mt-3 border-bottom align-items-center pb-3">
            <div class="col-1 text-center fw-bold text-danger">[안내]</div>
            <div class="col-1 text-center">공지</div>
            <div class="col-4">운영방침 및 활동규칙</div>
            <div class="col-2 text-center">총관리자</div>
            <div class="col-1 text-center">23</div>
            <div class="col-3 text-end pe-3">2026-02-05</div>
        </div>
        <div class="row mt-4 align-items-center">
            <div class="col-2"></div>
            <div class="col"></div>
            <div class="col-auto py-1 border">&lt</div>
            <div class="col-auto py-1 border">1</div>
            <div class="col-auto py-1 border bg-primary text-light">2</div>
            <div class="col-auto py-1 border">&gt</div>
            <div class="col"></div>
            <div class="col-2 d-grid">
                <button type="button" class="btn btn-primary">검색</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap으로 만든 쇼핑몰 - 미완성

[shop.html]
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <style>
        .custom-blue1 {
            color: #abb8f1;
        }
        .custom-blue2 {
            color: #6b95e9;
        }
        .custom-blue3 {
            color: #54adf6;
        }
        .custom-pink1 {
            color: #f56e50;
        }
        .custom-green1 {
            color: #bcf5a2;
        }


        .btn-customblue1 {
            background-color: #abb8f1;
            color: white;
        }
        .btn-customblue2 {
            background-color: #6b95e9;
            color: white;
        }
        .btn-customblue3 {
            background-color: #54adf6;
            color: white;
        }
        .btn-btn-custompink1 {
            background-color: #f56e50;
            color: white;
        }
        .btn-customgreen1 {
            background-color: #bcf5a2;
            color: white;
        }


        .btn-outline-customblue1 {
            background-color: white;
            border-color: #abb8f1;
            color: #abb8f1;
        }
        .btn-outline-customblue2 {
            background-color: white;
            border-color: #6b95e9;
            color: #6b95e9;
        }
        .btn-customblue3 {
            background-color: #54adf6;
            color: white;
        }
        .btn-outline-custompink1 {
            background-color: white;
            border-color: #f56e50;
            color: #f56e50;
        }
        .btn-outline-customgreen1 {
            background-color: white;
            border-color: #bcf5a2;
            color: #bcf5a2;
        }


        .bg-customblue1 {
            background-color: #abb8f1;
        }
        .bg-customblue2 {
            background-color: #6b95e9;
        }
        .btn-customblue3 {
            background-color: #54adf6;
        }
        .bg-custompink1 {
            background-color: #f56e50;
        }
        .bg-custompink2 {
            background-color: #f56f6f;
        }
        .bg-customgreen1 {
            background-color: #bcf5a2;
        }


        .text-bg-customblue1 {
            background-color: #abb8f1;
        }
        .text-bg-customblue2 {
            background-color: #6b95e9;
        }
        .text-btn-customblue3 {
            background-color: #54adf6;
        }
        .text-bg-custompink1 {
            background-color: #f56e50;
        }
        .text-bg-customgreen1 {
            background-color: #bcf5a2;
        }
    </style>
</head>
<body>
    <div style="width: 1200px;" class="container-fluid">
        <div class="row py-1 bg-secondary-subtle align-items-center" id="row-1">
            <div class="col"></div>
            <div class="col-auto">지금 가입하여 혜택을 누려보세요!</div>
            <div class="col-auto">
                <button class="btn btn-outline-secondary">가입하기</button>
            </div>
            <div class="col"></div>
        </div>

        <div class="row py-1 mt-2 align-items-center" id="row-2">
            <div class="col-1 me-5">
                <img class="img-fluid" src="./img/logo-1.png">
            </div>
            <div class="col-auto me-3">중고</div>
            <div class="col-auto me-3">대여</div>
            <div class="col-auto me-3">판매</div>
            <div class="col-auto me-3">소통</div>
            <div class="col me-1"></div>
            <div class="col-3 d-flex me-3 align-items-center">
                <input placeholder="검색" class="form-control" type="text">
                <i class="bi bi-search ms-2"></i>
            </div>
            <div class="col-auto d-grid pe-0">
                <button type="button" class="btn btn-outline-primary">로그인</button>
            </div>
            <div class="col-auto d-grid">
                <button type="button" class="btn btn-primary">회원가입</button>
            </div>
        </div>

        <div class="row d-flex py-1 mt-2 align-items-center" id="row-3">
            <div class="col-6 pe-3">
                <div class="row d-flex flex-column">
                    <div class="col text-center bg-custompink2 text-light mb-1"><span class="bi bi-clock"></span> 경매 종료까지 5d 15h 29m 08s</div>
                    <div class="col">
                        <img class="img-fluid" src="./img/Img_GalaxyBook-1.jpg">
                    </div>
                    <div class="col-12 text-secondary mb-1"><span class="bi bi-question-circle"></span> 상품 이미지를 클릭하시면 상세정보를 확인하실 수 있습니다.</div>
                </div>
            </div>
            <div class="col-6 ps-3">
                <div class="row">
                    <div class="col-auto pe-0 text-secondary">홈</div>
                    <div class="col-auto pe-0 text-secondary"> &gt </div>
                    <div class="col-auto pe-0 text-secondary">IT용품</div>
                    <div class="col-auto pe-0 text-secondary"> &gt </div>
                    <div class="col-auto text-secondary">노트북</div>
                    <div class="col"></div>
                    <div class="col-auto text-secondary mb-1"><span class="bi bi-info-circle"></span> 판매자 정보 확인하기</div>
                </div>
                <div class="row my-2">
                    <div class="col-auto badge ms-2 bg-customblue2">진행중</div>
                    <div class="col"></div>
                    <div class="col-auto bi bi-share me-2 text-"></div>
                </div>
                <div class="row">
                    <div class="col fs-3 fw-bold">갤럭시 북 Pro</div>
                </div>
                <div class="row align-items-center">
                    <div class="col-auto bi bi-heart custom-pink1 ms-1 pe-1"></div>
                    <div class="col-auto ps-0">4</div>
                    <div class="col-auto bi bi-person-lines-fill fs-5 pe-2"></div>
                    <div class="col-auto ps-0">4명 참여</div>
                    <div class="col-auto bi bi-question-circle text-secondary ps-1"></div>
                </div>
                <div class="row align-items-center border-bottom pt-5 pb-2">
                    <div class="col-auto text-secondary fs-5 fw-bold">현재가</div>
                    <div class="col"></div>
                    <div class="col-auto text-danger fs-3 fw-bold">1,250,000<span class="text-dark fs-6"> 원</span></div>
                </div>
                <div class="row align-items-center pt-3 pb-2">
                    <div class="col-auto text-secondary fs-6 fw-bold">즉시 낙찰가</div>
                    <div class="col"></div>
                    <div class="col-auto text-dark fs-6 fw-bold">1,300,000<span class="text-secondary fs-6"> 원</span></div>
                </div>
                <div class="row align-items-center pt-2 pb-1">
                    <div class="col-auto text-secondary fs-6 fw-bold">경매 시작일</div>
                    <div class="col"></div>
                    <div class="col-auto text-secondary fs-6 fw-bold">2026-02-08 오후 10:45</div>
                </div>
                <div class="row align-items-center pt-1 pb-3">
                    <div class="col-auto text-secondary fs-6 fw-bold">경매 종료일</div>
                    <div class="col"></div>
                    <div class="col-auto text-secondary fs-6 fw-bold">2026-03-01 오후 10:45</div>
                </div>
                <div class="row align-items-center bg-light mt-2">
                    <div class="col">
                        <div class="row pt-3 ps-2">
                            <div class="col-auto fw-bold fs-5">입찰안내</div>
                            <div class="col"></div>
                            <div class="col-auto text-secondary">상세보기 &gt</div>
                        </div>
                        <div class="row d-flex flex-column pt-3 ps-2 pb-3">
                            <div class="col"><span class="bi bi-caret-right-fill text-dark fw-bold"></span> 최소 <span class="text-danger">1,000원</span> 단위로 입찰 하실 수 있습니다.</div>
                            <div class="col"><span class="bi bi-caret-right-fill text-dark fw-bold"></span> 현재 보유하신 코인보다 더 높은 금액은 입찰하실 수 없습니다.</div>
                            <div class="col text-danger"><span class="bi bi-caret-right-fill text-danger fw-bold"></span> 경매 종료 1분전 입찰 시, 종료시간이 현재로부터 <span class="fw-bold text-danger">1분 자동연장</span>됩니다.</div>
                        </div>
                    </div>
                </div>
                <div class="row align-items-center bg-secondary-subtle border border-secondary rounded mt-5">
                    <div class="col">
                        <div class="row pt-3 ps-2">
                            <div class="col-auto">로그인하여 나의 보유 코인을 확인하세요.</div>
                        </div>
                        <div class="row d-flex pt-3 ps-2 pb-3">
                            <div class="col bg-light text-secondary border border-secondary rounded pt-1">현재가보다 낮은 가격으로 입찰하실 수 없습니다.</div>
                            <div class="col-2 btn btn-primary rounded mx-3">입찰하기</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>
profile
김시코
취업하고싶다...
이전 포스트

KDT 공부 일지 - 2026.02.06

다음 포스트

KDT 공부 일지 - 2026.02.10

0개의 댓글