[TIL_16] webucks clone - html (2)

49859 ワード
webucks CSS project WeCode TIL html テキストリンク

WeBucksページクローンプロジェクト


タスク3が完了しました


コーヒーリストページレイアウトの実装
  • コーヒーリストページ
  • flexでリストレイアウトを整理しようとしたが、2つの枠線にマージンがなく、最後の行でリストを左に揃えることはできなかった.justify-content:space-betweenを使用して、下部の2つを左揃えにしません.
  • は最終的にfloat:leftを用い,この方法も写真の幅値を%と計算した.この方法が一番いいかどうか考えなければなりません.
  • リスト画像保護機能&クリックイベント実施
  • 2:hover機能を用いてマウス位置でcss属性を付与してみたが,画像の拡大に伴いケースサイズを維持しながら画像のみを拡大する方式は少し考慮する必要がある.overflow:hidden機能によって実現することができる.
    習った技ですが、すぐには思い出せませんでした.もっと多くのページの表を見て、ゆっくり熟知しましょう.
  • 画像には、<a>タグでリンクされている.
    クリックして詳細ページ
    • へ
    htmlコード
    <!DOCTYPE html>
<html lang="ko">
<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 rel="stylesheet" href="styles/list.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat+Subrayada:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
    <title>WEBUCKS-coffee list</title>
</head>
<body>
    <header>
        <h1>WeBucks</h1>
        <nav>
            <ul>
                <li>COFFEE</li>
                <li>MENU</li>
                <li>STORE</li>
                <li>WHAT'S NEW</li>
            </ul>
        </nav>
    </header>
    <main class="wrapper">
        <section class="categoryName">
            <h3>콜드 브루 커피</h3>
            <i class="fas fa-coffee"></i>
            <span>디카페인 에스프레소 샷 추가 가능 (일부 음료 제외)</span>
        </section>
        <section class="menuList">
            <li class="coffee">
                <div class="imgBox">
                    <img src="styles/coffeeImg/콜드 브루.jpg" alt="콜드 브루" height='200px'>
                </div>
                <p>콜드 브루</p>
            </li>
            <li class="coffee">
                <div class="imgBox">
                    <a href="detail.html"><img src="styles/coffeeImg/돌체 콜드 브루.jpg" alt="돌체 콜드 브루" width='auto'></a>
                </div>
                <p>돌체 콜드 브루</p>
            </li>
            <div class="coffee">
                <div class="imgBox">
                    <img src="styles/coffeeImg/바닐라 크림 콜드 브루.jpg" alt="바닐라 크림 콜드 브루">
                </div>
                <p>바닐라 크림 콜드 브루</p>
            </div>
            <div class="coffee">
                <div class="imgBox">
                    <img src="styles/coffeeImg/제주 비자림 콜드 브루.jpg" alt="제주 비자림 콜드 브루">
                </div>
                <p>제주 비자림 콜드 브루</p>
            </div>
            <div class="coffee">
                <div class="imgBox">
                    <img src="styles/coffeeImg/토피넛 콜드 브루.jpg" alt="토피넛 콜드 브루">
                </div>
                <p>토피넛 콜드 브루</p>
            </div>
            <div class="coffee">
                <div class="imgBox">
                    <img src="styles/coffeeImg/나이트로 바닐라 크림.jpg" alt="나이트로 바닐라 크림">
                </div>
                <p>나이트로 바닐라 크림</p>
            </div>
            <div class="coffee">
                <div class="imgBox">
                    <img src="styles/coffeeImg/나이트로 콜드 브루.jpg" alt="나이트로 콜드 브루">
                </div>
                <p>나이트로 콜드 브루</p>
            </div>
            <div class="coffee">
                <div class="imgBox">
                    <img src="styles/coffeeImg/벨벳 다크 모카 나이트로.jpg" alt="벨벳 다크 모카 나이트로">
                </div>
                <p>벨벳 다크 모카 나이트로</p>
            </div>
            <div class="coffee">
                <div class="imgBox">
                    <img src="styles/coffeeImg/콜드 브루 라떼.jpg" alt="콜드 브루 라떼">
                </div>
                <p>콜드 브루 라떼</p>
            </div>
            <div class="coffee">
                <div class="imgBox">
                    <img src="styles/coffeeImg/콜드 브루 플로트.jpg" alt="콜드 브루 플로트">
                </div>
                <p>콜드 브루 플로트</p>
            </div>
        </section>
    </main>
    <main class="wrapper">
        <section class="categoryName">
            <h3>브루드 커피</h3>
            <i class="fas fa-coffee"></i>
            <span>디카페인 에스프레소 샷 추가 가능 (일부 음료 제외)</span>
        </section>
        <section class="menuList">
            <li class="coffee">
                <div class="imgBox">
                    <img src="styles/coffeeImg/아메리카노.jpg" alt="아메리카노">
                </div>
                <p>아메리카노</p>
            </li>
            <li class="coffee">
                <div class="imgBox">
                    <img src="styles/coffeeImg/카페 라떼.jpg" alt="카페 라떼">
                </div>
                <p>카페 라떼</p>
            </li>
        </section>
    </main>
</body>
</html>
    cssコード
    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    height: 60px;
    background-color: #f6f5f0;
    font-family: 'Montserrat Subrayada', sans-serif;
}

h1 {
    padding: 20px;
    font-size: 20px;
}

nav ul {
    display: flex;    
}

nav ul li {
    padding: 0 20px;
    font-size: 15px;
    list-style: none;
    color: #9c9c98;
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 92%;
}

.categoryName { 
    display: flex;
    align-items: center;
    margin: 15px;
    padding: 10px;
    width: 98%;
    background-color: #f6f5f0;

}

.categoryName h3 , i, span {
    margin: 0 8px;
}

.menuList .coffee {
    display: flex;
    flex-direction: column;
    float: left;
    width: 23%;
    margin: 1%;
}

.menuList {
    width: 100%;
}

.coffee p {
    margin: 10px auto;
    font-weight: bold;
}

.imgBox {
    width: 100%;
    overflow: hidden;
} 

img {
    width: 100%;
    height: 200px;
}

img:hover {
    transform:scale(1.1);
    transition: transform .5s;
}
    [白俊]14502研究所(金貨5)
    PostgreSQL ring bufferポリシー