슬기로운 AI생활 - 집요한 PM 에릭

띵동코딩 8주차 - 부트스트랩 활용 파타고니아 홈페이지 카피코딩 본문

코딩공부

띵동코딩 8주차 - 부트스트랩 활용 파타고니아 홈페이지 카피코딩

집요한 기획자 에릭 2022. 7. 25. 21:53

스스로 해보기

점점 익숙해지는 게 신기하다. 외우지 않고 편안한 마음으로 코딩하고 있는데도.

Javascript까지 해서 움직이는 웹이 만들어 지면 너무 뿌듯할 거 같다.

HTML에서 중요한 건 구역을 나누는 것을 빠르게 캐치하고 나눠서 코딩하는 일인 것 같다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <title>띵동코딩-부트스트랩_파타고니아</title>
    <style>
        * {
            font-family: 'Noto Sans KR', sans-serif;
        }
        body,h1,h2,h3,p,a {
            font-weight: normal;
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        .up{
            background-color: #500778;
            height: 50px;

            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .up > a:first-child{
            margin-left: auto;
        }

        .up > a:last-child{
            margin-right: 20px;
        }

        .up > a{
            color: white;
            margin-right: 10px;
        }

        .up > span{
            color: white;
            margin-right: 10px;
        }
        .down{
            height: 70px;

            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .down > img{
            width: 130px;
            margin-left: 20px;
        }
        .down > a{
            margin-left: 80px;
            font-weight: 900;
            color: black;
        }
        .down > form{
            margin-left: 80px;
            margin-right: auto;
            width: 500px;
        }
        .icons{
            font-size: 24px;
        }
        .icons > i{
            margin-right: 20px;
        }
        .main > img{
            width: 100%;
        }
        .items{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
           
            padding: 30px;
        }
        .imgs{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;

            margin-right: auto;
            margin-left: 100px;
        }
        .card{
            margin-right: 10px;
        }
        .list-group > span{
            font-size: 24px;
            margin-left: 10px;
        }
        .itmes > form-select{
            width: 120px;
        }
    </style>
</head>
<body>
    <div class="gnb">
        <div class="up">
            <a href="#">Climate Goals</a>        
            <a href="#">푸른 심장</a>
            <a href="#">Worn Wear</a>
            <span>|</span>
            <a href="#">더보기</a>
        </div>
        <div class="down">
            <a href="#">SHOP</a>
            <a href="#">INSIDE PATAGONIA</a>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            </form>
            <div class="icons">
                <i class="bi bi-question-circle-fill"></i>
                <i class="bi bi-person-fill"></i>
                <i class="bi bi-cart-fill"></i>
            </div>
        </div>
    </div>
    <div class="main">
    </div>
    <div class="items">
        <ul class="list-group list-group-flush">
            <span>WOMEN'S</span>
            <li class="list-group-item">신상품</li>
            <li class="list-group-item">재킷 & 베스트</li>
            <li class="list-group-item">플리스</li>
            <li class="list-group-item">스웨트셔츠 & 후디</li>
            <li class="list-group-item">셔츠</li>
            <li class="list-group-item">티셔츠</li>
            <li class="list-group-item">팬츠 & 레깅스</li>
            <li class="list-group-item">모자 & 액세서리</li>
        </ul>
        <div class="imgs">
            <div class="card" style="width: 18rem;">
                    class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">
                        <span>Women Stand Up Overalls</span></br>
                        <span>₩159,000</span>
                    </p>
                </div>
            </div>
            <div class="card" style="width: 18rem;">
                    class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">
                        <span>Women Ridge Flow Shirt</span></br>
                        <span>₩89,000</span>
                    </p>
                </div>
            </div>
            <div class="card" style="width: 18rem;">
                    class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">
                        <span>Women All Seasons Hemp Canvas Shorts</span></br>
                        <span>₩119,000</span>
                    </p>
                </div>
            </div>
        </div>
        <div>
            <select class="form-select" aria-label="Default select example">
                <option selected>상품정렬</option>
                <option value="1">최신순</option>
                <option value="2">높은 가격순</option>
                <option value="3">낮은 가격순</option>
              </select>
        </div>
    </div>
</body>
</html>

'코딩공부' 카테고리의 다른 글

띵동코딩 10주차 개발 일지 : Javascript 복습  (0) 2022.08.08
띵동코딩 9주차 개발 일지 : Javascript 기초  (0) 2022.08.02
띵동코딩 7주차 - 부트스트랩 활용 인스타그램 카피코딩  (0) 2022.07.18
띵동코딩 6주차 웹 사이트 카피코딩 - 개발일지  (0) 2022.07.11
띵동코딩 5주차 웹 사이트 카피코딩 - 개발일지  (0) 2022.07.04
'코딩공부' Related Articles more