KDT 공부 일지 - 2026.02.10

김시코·2026년 2월 10일
JavaScriptKDThtml공부일지

KDT 공부 일지

목록 보기
26/27

2026년 2월 10일 화요일 - 7주차

Bootstrap 응용

모바일 웹사이트 만들기

모바일이 화면이 작기 때문에 더 쉽다고 함...

[daisomall.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>
        body { 
            padding-top: 80px;
            padding-bottom: 90px;
        }

        html, body { overflow-x: hidden; }

        .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-outline-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 class="container-fluid fixed-top">
        <div class="row align-items-center bg-secondary-subtle">
            <div class="col-5 my-3 ms-1">
                <img class="img-fluid" src="./img/daiso_logo.svg">
            </div>
            <div class="col"></div>
            <div class="col-auto bi bi-bell fs-2 me-1"></div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col ps-3 fw-bold">김민수님을 위한 오늘의 추천 상품</div>
            <div class="col-auto bi bi-chevron-right fw-bold me-2"></div>
        </div>
        <div class="row mt-3 px-2">
            <div class="col-4 px-1">
                <div class="row d-flex align-items-center flex-column">
                    <div class="col">
                        <img class="img-fluid" src="./img/짱구 스트링 파우치 휜둥이-2000.avif">
                    </div>
                    <div class="col-10 text-center bi bi-cart border mt-1">담기</div>
                    <div class="col-10 text-start fw-bold ps-0">2,000<span style="font-size: 0.8em; font-weight: normal;">원</span></div>
                    <div class="col-12" style="font-size: 0.65em;">짱구 스트링 파우치</div>
                    <div class="col-12" style="font-size: 0.65em;">휜둥이</div>
                    <div class="col-12">
                        <span class="bi bi-truck bg-secondary-subtle px-1" style="font-size: 0.7em;"> 택배</span>
                        <span class="bi bi-person-walking text-danger bg-secondary-subtle px-1" style="font-size: 0.7em;"><span class="text-dark">픽업</span></span>
                    </div>
                    <div class="col" style="font-size: 0.8em;">
                        <span class="bi-star"></span>
                        <span class="bi-star"></span>
                        <span class="bi-star"></span>
                        <span class="bi-star"></span>
                        <span class="bi-star"> 0</span>
                    </div>
                </div>
            </div>
            <div class="col-4 px-1">
                <div class="row d-flex align-items-center flex-column">
                    <div class="col">
                        <img class="img-fluid" src="./img/포켓몬스터 세로형 쇼핑백-1000.avif">
                    </div>
                    <div class="col-10 text-center bi bi-cart border mt-1">담기</div>
                    <div class="col-10 text-start fw-bold ps-0">1,000<span style="font-size: 0.8em; font-weight: normal;">원</span></div>
                    <div class="col-12" style="font-size: 0.65em;">포켓몬스터 세로형</div>
                    <div class="col-12" style="font-size: 0.65em;">쇼핑백</div>
                    <div class="col-12">
                        <span class="bi bi-truck bg-secondary-subtle px-1" style="font-size: 0.7em;"> 택배</span>
                        <span class="bi bi-person-walking text-danger bg-secondary-subtle px-1" style="font-size: 0.7em;"><span class="text-dark">픽업</span></span>
                    </div>
                    <div class="col" style="font-size: 0.8em;">
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"> 14</span>
                    </div>
                </div>
            </div>
            <div class="col-4 px-1">
                <div class="row d-flex align-items-center flex-column">
                    <div class="col">
                        <img class="img-fluid" src="./img/트윈 네임펜 흑색 3P-1000.avif">
                    </div>
                    <div class="col-10 text-center bi bi-cart border mt-1">담기</div>
                    <div class="col-10 text-start fw-bold ps-0">1,000<span style="font-size: 0.8em; font-weight: normal;">원</span></div>
                    <div class="col-12" style="font-size: 0.65em;">트윈 네임펜 흑색 3P</div>
                    <div class="col-12" style="font-size: 0.65em;">&nbsp;</div>
                    <div class="col-12">
                        <span class="bi bi-truck bg-secondary-subtle px-1" style="font-size: 0.7em;"> 택배</span>
                        <span class="bi bi-person-walking text-danger bg-secondary-subtle px-1" style="font-size: 0.7em;"><span class="text-dark">픽업</span></span>
                    </div>
                    <div class="col" style="font-size: 0.8em;">
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-half"> 575</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- white-space: nowrap; -> 자동 줄바꿈 금지 -->
    <div class="container-fluid">
        <div class="row align-items-center border-top d-flex pt-4 px-0 mx-0 mt-4">
            <div class="col m-0 ps-1 pb-2 fw-bold">카테고리별 상품</div>
        </div>
        <div class="row d-flex px-0 mx-0">
            <div class="col-auto p-0 ms-1 me-2">
                <button style="white-space: nowrap; font-size: 0.8em;" class="text-center btn-customblue2 border rounded-pill py-1 px-2"> 문구 </button>
            </div>
            <div class="col m-0 p-0"></div>
            <div class="col-auto p-0 me-2">
                <button style="white-space: nowrap; font-size: 0.8em;" class="text-center btn-outline-customblue2 border rounded-pill py-1 px-2">잡화</button>
            </div>
            <div class="col m-0 p-0"></div>
            <div class="col-auto p-0 me-2">
                <button style="white-space: nowrap; font-size: 0.8em;" class="text-center btn-outline-customblue2 border rounded-pill py-1 px-2">청소</button>
            </div>
            <div class="col m-0 p-0"></div>
            <div class="col-auto p-0 me-2">
                <button style="white-space: nowrap; font-size: 0.8em;" class="text-center btn-outline-customblue2 border rounded-pill py-1 px-2">뷰티</button>
            </div>
            <div class="col m-0 p-0"></div>
            <div class="col-auto p-0 me-2">
                <button style="white-space: nowrap; font-size: 0.8em;" class="text-center btn-outline-customblue2 border rounded-pill py-1 px-2">식품</button>
            </div>
            <div class="col m-0 p-0"></div>
            <div class="col-auto p-0 me-0">
                <button style="white-space: nowrap; font-size: 0.8em;" class="text-center btn-outline-customblue2 border rounded-pill py-1 px-2">시즌</button>
            </div>
        </div>
        <div class="row px-2 mt-3">
            <div class="col-4 px-1">
                <div class="row d-flex align-items-center flex-column">
                    <div class="col">
                        <img class="img-fluid" src="./img/오피스 말랑말랑 스프링 유선 노트 A5 40매입-3000.avif">
                    </div>
                    <div class="col-10 text-center bi bi-cart border mt-1">담기</div>
                    <div class="col-10 text-start fw-bold ps-0">3,000<span style="font-size: 0.8em; font-weight: normal;">원</span></div>
                    <div class="col-12" style="font-size: 0.65em;">오피스 말랑말랑 스프...</div>
                    <div class="col-12">
                        <span class="bi bi-truck bg-secondary-subtle px-1" style="font-size: 0.7em;"> 택배</span>
                        <span class="bi bi-person-walking text-danger bg-secondary-subtle px-1" style="font-size: 0.7em;"><span class="text-dark">픽업</span></span>
                    </div>
                    <div class="col" style="font-size: 0.8em;">
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-half"> 212</span>
                    </div>
                </div>
            </div>
            <div class="col-4 px-1">
                <div class="row d-flex align-items-center flex-column">
                    <div class="col">
                        <img class="img-fluid" src="./img/3M 포스트잇 강한 점착용 스케쥴메이트 72X102 mm 50매입 디데이 투두리스트-1000.avif">
                    </div>
                    <div class="col-10 text-center bi bi-cart border mt-1">담기</div>
                    <div class="col-10 text-start fw-bold ps-0">1,000<span style="font-size: 0.8em; font-weight: normal;">원</span></div>
                    <div class="col-12" style="font-size: 0.65em;">3M 포스트잇 강한 점...</div>
                    <div class="col-12">
                        <span class="bi bi-truck bg-secondary-subtle px-1" style="font-size: 0.7em;"> 택배</span>
                        <span class="bi bi-person-walking text-danger bg-secondary-subtle px-1" style="font-size: 0.7em;"><span class="text-dark">픽업</span></span>
                    </div>
                    <div class="col" style="font-size: 0.8em;">
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"> 18</span>
                    </div>
                </div>
            </div>
            <div class="col-4 px-1">
                <div class="row d-flex align-items-center flex-column">
                    <div class="col">
                        <img class="img-fluid" src="./img/일본제 파일 박스용 클립형 마스킹 테이프 커터-1500.avif">
                    </div>
                    <div class="col-10 text-center bi bi-cart border mt-1">담기</div>
                    <div class="col-10 text-start fw-bold ps-0">1,500<span style="font-size: 0.8em; font-weight: normal;">원</span></div>
                    <div class="col-12" style="font-size: 0.65em;">일본제 파일 박스용...</div>
                    <div class="col-12">
                        <span class="bi bi-truck bg-secondary-subtle px-1" style="font-size: 0.7em;"> 택배</span>
                        <span class="bi bi-person-walking text-danger bg-secondary-subtle px-1" style="font-size: 0.7em;"><span class="text-dark">픽업</span></span>
                    </div>
                    <div class="col" style="font-size: 0.8em;">
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star"> 32</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row px-2 mt-3">
            <div class="col-4 px-1">
                <div class="row d-flex align-items-center flex-column">
                    <div class="col">
                        <img class="img-fluid" src="./img/4가지 날 재단기-5000.avif">
                    </div>
                    <div class="col-10 text-center bi bi-cart border mt-1">담기</div>
                    <div class="col-10 text-start fw-bold ps-0">5,000<span style="font-size: 0.8em; font-weight: normal;">원</span></div>
                    <div class="col-12" style="font-size: 0.65em;">4가지 날 재단기</div>
                    <div class="col-12">
                        <span class="bi bi-truck bg-secondary-subtle px-1" style="font-size: 0.7em;"> 택배</span>
                        <span class="bi bi-person-walking text-danger bg-secondary-subtle px-1" style="font-size: 0.7em;"><span class="text-dark">픽업</span></span>
                    </div>
                    <div class="col" style="font-size: 0.8em;">
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-half"> 69</span>
                    </div>
                </div>
            </div>
            <div class="col-4 px-1">
                <div class="row d-flex align-items-center flex-column">
                    <div class="col">
                        <img class="img-fluid" src="./img/3색 초저점도 볼펜 0.38mm 2개입 샌드크림-1000.avif">
                    </div>
                    <div class="col-10 text-center bi bi-cart border mt-1">담기</div>
                    <div class="col-10 text-start fw-bold ps-0">1,000<span style="font-size: 0.8em; font-weight: normal;">원</span></div>
                    <div class="col-12" style="font-size: 0.65em;">3색 초저점도 볼펜 0...</div>
                    <div class="col-12">
                        <span class="bi bi-truck bg-secondary-subtle px-1" style="font-size: 0.7em;"> 택배</span>
                        <span class="bi bi-person-walking text-danger bg-secondary-subtle px-1" style="font-size: 0.7em;"><span class="text-dark">픽업</span></span>
                    </div>
                    <div class="col" style="font-size: 0.8em;">
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-half"> 232</span>
                    </div>
                </div>
            </div>
            <div class="col-4 px-1">
                <div class="row d-flex align-items-center flex-column">
                    <div class="col">
                        <img class="img-fluid" src="./img/캐치! 티니핑 컬러 풀 8g 5개입-2000.avif">
                    </div>
                    <div class="col-10 text-center bi bi-cart border mt-1">담기</div>
                    <div class="col-10 text-start fw-bold ps-0">2,000<span style="font-size: 0.8em; font-weight: normal;">원</span></div>
                    <div class="col-12" style="font-size: 0.65em;">캐치! 티니핑 컬러 풀...</div>
                    <div class="col-12">
                        <span class="bi bi-truck bg-secondary-subtle px-1" style="font-size: 0.7em;"> 택배</span>
                        <span class="bi bi-person-walking text-danger bg-secondary-subtle px-1" style="font-size: 0.7em;"><span class="text-dark">픽업</span></span>
                    </div>
                    <div class="col" style="font-size: 0.8em;">
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"> 18</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row align-items-center border-top d-flex pt-4 px-0 mx-0 mt-4">
            <div class="col m-0 ps-1 pb-2 fw-bold">카테고리별 오늘의 랭킹 - <span class="fst-italic">Top 5</span></div>
        </div>
        <div class="row d-flex px-0 mx-0">
            <div class="col-auto p-0 ms-1 me-2">
                <button style="white-space: nowrap; font-size: 0.8em;" class="text-center btn-outline-customblue2 border rounded-pill py-1 px-2"> 문구 </button>
            </div>
            <div class="col m-0 p-0"></div>
            <div class="col-auto p-0 me-2">
                <button style="white-space: nowrap; font-size: 0.8em;" class="text-center btn-outline-customblue2 border rounded-pill py-1 px-2">잡화</button>
            </div>
            <div class="col m-0 p-0"></div>
            <div class="col-auto p-0 me-2">
                <button style="white-space: nowrap; font-size: 0.8em;" class="text-center btn-outline-customblue2 border rounded-pill py-1 px-2">청소</button>
            </div>
            <div class="col m-0 p-0"></div>
            <div class="col-auto p-0 me-2">
                <button style="white-space: nowrap; font-size: 0.8em;" class="text-center btn-outline-customblue2 border rounded-pill py-1 px-2">뷰티</button>
            </div>
            <div class="col m-0 p-0"></div>
            <div class="col-auto p-0 me-2">
                <button style="white-space: nowrap; font-size: 0.8em;" class="text-center btn-outline-customblue2 border rounded-pill py-1 px-2">식품</button>
            </div>
            <div class="col m-0 p-0"></div>
            <div class="col-auto p-0 me-0">
                <button style="white-space: nowrap; font-size: 0.8em;" class="text-center btn-customblue2 border rounded-pill py-1 px-2">시즌</button>
            </div>
        </div>
        <div class="row px-2 mt-3 align-items-center">
            <div class="col-1 pe-0 pt-0 mt-0 me-3 font-monospace fst-italic fw-bold" style="font-size: 2em;">1</div>
            <div class="col-3 ps-0">
                <img class="img-fluid" src="./img/위니더푸 포켓 티슈 10매X6팩-1000.avif">
            </div>
            <div class="col p-0 ms-1 d-flex flex-column" style="font-size: 0.9em;">
                <span class="fw-bold">1,000<span style="font-size: 0.9em;">원</span></span>
                <span>위니더푸 포켓 티슈 10매X6팩</span>
                <div class="row">
                    <div class="col">
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"> 179</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row px-2 mt-3 align-items-center">
            <div class="col-1 pe-0 pt-0 mt-0 me-3 font-monospace fst-italic fw-bold" style="font-size: 2em;">2</div>
            <div class="col-3 ps-0">
                <img class="img-fluid" src="./img/에끌라 깨끗한 물티슈 150매(캡형)-1000.avif">
            </div>
            <div class="col p-0 ms-1 d-flex flex-column" style="font-size: 0.9em;">
                <span class="fw-bold">1,000<span style="font-size: 0.9em;">원</span></span>
                <span>에끌라 깨끗한 물티슈 150매...</span>
                <div class="row">
                    <div class="col">
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-half"> 999+</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row px-2 mt-3 align-items-center">
            <div class="col-1 pe-0 pt-0 mt-0 me-3 font-monospace fst-italic fw-bold" style="font-size: 2em;">3</div>
            <div class="col-3 ps-0">
                <img class="img-fluid" src="./img/짱구 납작 파우치 대형-3000.avif">
            </div>
            <div class="col p-0 ms-1 d-flex flex-column" style="font-size: 0.9em;">
                <span class="fw-bold">3,000<span style="font-size: 0.9em;">원</span></span>
                <span>짱구 납작 파우치 대형</span>
                <div class="row">
                    <div class="col">
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-half"> 62</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row px-2 mt-3 align-items-center">
            <div class="col-1 pe-0 pt-0 mt-0 me-3 font-monospace fst-italic fw-bold" style="font-size: 2em;">4</div>
            <div class="col-3 ps-0">
                <img class="img-fluid" src="./img/피너츠 빈티지 스누피 유선 노트 B5 80매입-3000.avif">
            </div>
            <div class="col p-0 ms-1 d-flex flex-column" style="font-size: 0.9em;">
                <span class="fw-bold">3,000<span style="font-size: 0.9em;">원</span></span>
                <span>피너츠 빈티지 스누피 유선 노...</span>
                <div class="row">
                    <div class="col">
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"> 19</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row px-2 mt-3 align-items-center">
            <div class="col-1 pe-0 pt-0 mt-0 me-3 font-monospace fst-italic fw-bold" style="font-size: 2em;">5</div>
            <div class="col-3 ps-0">
                <img class="img-fluid" src="./img/봄단장 빙글빙글 세탁기 키링 기본-2000.avif">
            </div>
            <div class="col p-0 ms-1 d-flex flex-column" style="font-size: 0.9em;">
                <span class="fw-bold">2,000<span style="font-size: 0.9em;">원</span></span>
                <span>봄단장 빙글빙글 세탁기 키링...</span>
                <div class="row">
                    <div class="col">
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"></span>
                        <span class="bi-star-fill"> 38</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid fixed-bottom p-0">
        <div class="row text-center bg-light border-2 border-top py-1">
            <div class="col d-flex flex-column align-items-center">
                <i class="bi bi-list fs-3"></i>
                <span class="fs-6 mt-0">메뉴</span>
            </div>
            <div class="col d-flex flex-column align-items-center">
                <i class="bi bi-search fs-3"></i>
                <span class="fs-6 mt-0">검색</span>
            </div>
            <div class="col d-flex flex-column align-items-center">
                <i class="bi bi-house-fill fs-3"></i>
                <span class="fs-6 mt-0">홈</span>
            </div>
            <div class="col d-flex flex-column align-items-center">
                <i class="bi bi-person fs-3"></i>
                <span class="fs-6 mt-0">마이</span>
            </div>
            <div class="col d-flex flex-column align-items-center">
                <i class="bi bi-cart fs-3"></i>
                <span class="fs-6 mt-0">카트</span>
            </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>

반응형 웹사이트

반응형으로 만드는 방법

@media로 조건을 줄 수 있다.

[test1.html]
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <title>Document</title>
    <style>
        /* 반응형 사용 예시 */
        @media(max-width: 800px) {
            .bg-color {
            background-color: red;
            }
        }

        @media(min-width: 800px) {
            .bg-color {
            background-color: blue;
            }
        } /* @media(max-width: 500px)로 조건을 줄 수 있다. */
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col bg-color">sample</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>

PC, 모바일 메뉴바

화면의 가로 해상도에 따라 자동으로 PC용 상단 메뉴바가 나오게 할건지, 모바일용 하단 메뉴바가 나오게 할건지 정할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <!-- pc용 메뉴바 -->
    <div class="container-fluid fixed-top d-none d-md-block">
        <div class="row bg-primary text-white">
            <div class="col">pc용 메뉴1</div>
            <div class="col">pc용 메뉴2</div>
            <div class="col">pc용 메뉴3</div>
        </div>
    </div>
<!-- 모바일용 메뉴바 -->
<div class="container-fluid fixed-bottom d-block d-md-none">
    <div class="row text-bg-danger text-white">
        <div class="col">모바일용 메뉴1</div>
        <div class="col">모바일용 메뉴2</div>
        <div class="col">모바일용 메뉴3</div>
    </div>
</div>

<div class="container-fluid">
    <div class="row mt-5">
        <div class="col fw-bold">상품 목록</div>
    </div>
    <div class="row-cols-1 row-cols-md-2 row-cols-lg-4">
        <div class="col">상품1</div>
        <div class="col">상품2</div>
        <div class="col">상품3</div>
        <div class="col">상품4</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>
```

JavaScript

JavaScript 기초

java보다 조금 더 쉽게 만들어져 있기 때문에 사용이 조금 더 널널하다. 파이썬이랑 조금 더 유사한 느낌. 심지어 ;도 안써도 된다..

[00 연습.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>
    <script>
        // 자바 스크립트 문법 구간
        // 자바 스크립트 주석

        function test1() {
            const divQwer = document.getElementById("qwer");
            divQwer.style.width = "300px";
            divQwer.style.height = "300PX";
            divQwer.style.backgroundColor = "red";
            divQwer.innerText = "야호!";
        }
    </script>
</head>
<body>
    <div id="qwer">안녕하세요</div>
    <div onclick="test1()">반갑습니다</div>
</body>
</html>

변수 선언 방법

[01 변수.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>
    <script>
        // 주석
        /* 주석 */

        // 출력문. (System.out.println과 동일)
        console.log("hello world");
        console.log("안녕하세요.");
        console.log("반갑습니다.");

        /* ES5 방법 변수 선언 */
        /*  작은 쌍따옴표 둘다 가능. 프론트 엔드 하는 사람은 ''을, 백앤드 하는 사람은 ""을 자주 쓴다
            우리는 자바랑 같이 하니까 ""로... */
        var a1 = '10';
        var b1 = "10";

        // 자바스크립트는 문법적으로 타입이 없다. 파이썬처럼 값의 형태에 따라 타입이 정해진다.
        var c1 = 10.11;
        var d1 = null;
        var e1 = true;

        var f1 = '123';
        f1 = 222;
        console.log(fff);
        // 출력시에(브라우저에서 f12 -> Console) 숫자는 파란색으로 나온다.


        /* ES6 방법 변수 선언 - 우리가 아는 자바 변수와 동일 */
        const a2 = 30;      // 상수를 선언하는것. 자바로 치면 final. 값 변경 불가..
        let b2 = 40;        // 우리가 아는 변수, 값 변경 가능. 생성-소멸도 동일
        b2 = 50;

        console.log(a2);
        console.log(b2);

    </script>
</head>
<body>
    <script>
        // 여기서도 열 수 있다.
    </script>
</body>
</html>

연산자

대부분이 자바와 동일하지만 몇몇개는 다르다. 자바와 조금 다른 부분들 위주로 기술하겠다.

  • 가장 특이한 것이 비교 연산자(==)인데, 자바에서 ==은 참조 주소를 비교하는 연산자였는데, 여기서는 값을 비교하는 연산자이다. 그리고, ===을 쓰면 타입까지 비교를 해서 결과값을 돌려준다. 사실, 값을 비교할때 당연히 타입이 같아야 하니까 ===을 쓰는게 맞지만 실무에서는 ==도 많이 쓴다... 그러니까 조금 더 잘 신경써서 코드를 작성해야 한다.
[02 연산자.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>
    <script>
        // 연산자
    // 숫자 연산자
    // 자바스크립트는 정수나누기가 없고 다 실수 나누기, 그래서 필요시에 소수점을 잘라야 함.
    const a1 = 10;
    const a2 = 30;
    let a3 = parseInt(a1 / a2);   // parseInt 써서 정수로 변환해서 정수 나누기처럼 사용.
    console.log(a3);

    a3++;
    a3+=3;
    // 당연히 가능함.


    // 문자열 연산
    const b1 = 10;
    const b2 = 30;
    const b3 = b1 + " X " + b2 + " = " + (b1 * b2);
    console.log(b3);
    
    const b4 = `${b1} X ${b2} = ${b1*b2}`; // ES6문법
    console.log(b4);

    // 비교 연산자 ==
    const c1 = '10';
    const c2 = '10';

    if (c1 == c2) {
        console.log("같다");
    } else {
        console.log("다르다");
    }
</script>
```

제어문 - if, while, switch...

사실 자바랑 다를건 많이 없다.. 사용법만 조금 다르고 거의 똑같음

[03 제어문.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>
    <script>
        // 제어문 if, for, while, switch...
    // if문
    const a1 = 70;
    if (a1 > 90) {
        console.log("A학점입니다");
    } else if (a1 > 80) {
        console.log("B학점입니다");
    } else {
        console.log("기타등등...");
    }


    // 고전 for문
    let sum = 0;
    for(let i = 0; i < 5; i++) {
        sum += i;
    }   // 당연하지만, sum과 i는 let 말고 const 쓰면 안됨. 값 번경이 안되니까. 아니면 차라리 var로
    console.log(`합: ${sum}`);


    // foreach문
    const arr1 = [ 1, 2, 3, 4, 5, 6, 7];

    // - ES5의 경우
    for(i in arr1) {
        console.log(arr1[i]);
    }

    // - ES6의 경우 - 일반적으로 알고있는 foreach
    for(element of arr1) {    // const 붙이면 반복 돌릴때마다 메모리 한개씩 생성한다.
        console.log(element);
    }
    
    
    // switch-case문
    const c1 = 30;
    switch (c1) {
        case 30:
            // ...
            break;
    
        default:
            // ...
            break;
    }   // 뭐 다 똑같아서 할게없다...
</script>
```

배열

자바처럼 new 키워드 없이 사용. 크기를 지정해주지 않아도 됨. 그래서 고전적인 측면에서 봤을때 이걸 배열로 부르기엔 애매함... 파이썬도 크기 지정을 하진 않지만 대신에 배열이 아닌 List로 부른다... 작동방식은 자바에서의 ArrayList와 비슷하다. 그냥 ArrayList로 봐도 무관한 수준..

[04 배열.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>
    <script>
        // 배열
        const arr1 = [];    // 빈 배열
        const arr2 = ['111', 33, true];     //  자바에서는 이렇게 잘 안쓰지만 js에선 은근 쓰임.
    // 배열을 사용하는 문법 2가지.
    // 1. 배열처럼 사용
    arr1[0] = '야호';
    arr1[1] = '반갑';
    // arr1[7] = '헬로'; 중간 건너뛰고 쓸수 있긴 한데 거의 안쓰임
    console.log(arr1);

    // 2. List처럼 사용 (일반적으로 사용하는 방법)
    arr1.push('민수');  // push가 있다는건 순서가 있다는 것은 보통 순서대로 접근해서 쓰는것이란 뜻 (stack)
    arr1.push('철수');  // 물론 queue로도 쓸 수 있음.
    arr1.push('영수');
    console.log(arr1);

    
    // 배열 구조 분해 - ES6 (일반적 상황에선 잘 안쓰이지만 React할때 많이 쓰임)
    // 배열에 있는 요소를 하나씩 뽑아서 쓰는것을 말한다.
        // const a = arr1[0];
        // const b = arr1[1];
        // const c = arr1[2];   이런걸 말함..
    const [a, b, c] = arr1;
    // a, b, c 에 0번째 1번째 2번째 값을 넣는것. 위의것을 축약한 느낌.. 이 문법이 없다고 못쓰진 않는다..
    console.log(a);
    console.log(b);
    console.log(c);

</script>
```

함수

보통 메서드로 불리지만, this를 사용하지 못해서 메서드로 부르기 애매하다. 그렇기 때문에 함수라고 부르며, java를 제외한 거의 모든 언어에는 함수가 존재한다. 자바로 치면 static으로 보면 된다.

  • null: 주소값이 없음을 나타내는 '값'
  • undefined: 값이 정의조차 되지 않았음을 나타내는 값. null보다 더 부정적임. 부정적의 끝판왕... 느슨한 JS 문법의 많은 논리 오류를 방지하기 위해서 만들어졌다.
  • return: JavaScript에서는 리턴 타입이 존재하지 않는다. 리턴을 해도 그만, 안해도 그만이다. 그렇게 생기는 논리 오류를 막는게 undefined... 애초에 리턴이 있는지 없는지도 모르기 때문에...
[05 함수.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>
    <script>
        // 함수

        // 함수 정의
        function test1() {
            console.log("test1 호출됨!");
        }

        test1();    // 함수 호출. 안하면 아무것도 안됨. 물론 여러번 호출도 됨.
        test1();    // 동기식 호출, 자바랑 그냥 거의 똑같음..

        function test2(a, b) {  // let같은거 딱히 안써도 됨
            console.log(`test2 호출됨! ${a} ${b}`);
        }

        test2(10, '안녕');      
        test2(true, 10.33);     // JS에서는 타입이 명확하지 않기 때문에 이렇게 해도 됨.
        test2(40);              // 심지어 값 하나만 넣어도 문법적 오류가 아님. 이때는 undefined값이 들어감.

        // 값이 안 넘어 올 때를 대비해서 기본값 설정 가능
        function test3(a = 10, b = 20, c = 30){     // default 값 주는 것. 파라미터가 날라오면 대체됨.
            console.log(`test3 호출됨! ${a} ${b} ${c}`)
        }

        test3('안녕');


        // 리턴 - JS에서는 리턴 타입을 정의하지 않음
        function test4(a, b) {
            return a + b;
        }
        const a1 = test4(10, 20);
        console.log(a1);

        const a2 = test1();     // 문법오류 아님
        console.log(a2);

        function test5(a, b) {
            if(a > 10) {
                return a+b;
            } else {
                // 리턴하기 싫다..
            }
        }

        const a3 = test5(6, 5);
        console.log(a3);

    </script>
</head>
<body>
    
</body>
</html>
profile
김시코
취업하고싶다...
이전 포스트

KDT 공부 일지 - 2026.02.09

다음 포스트

KDT 공부 일지 - 2026.02.11

0개의 댓글