[dg_ai_school] 웹프로그래밍 15

이채환·2021년 7월 16일

webprogramming

목록 보기

15/51

배운내용

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="덴마크 쇼핑몰 카피캣 연습">
    <meta name="author" content="이채환">
    <meta name="keywords" content="html, css, tutorial">

    <title>Helbak</title>

    <link rel="stylesheet" type="text/css href="css/style.css">
     

</head>
<body>

    <header id="header">
        <h1>
            <a class="logo" href="#">
                <img src="https://via.placeholder.com/186x18">
            </a>
        </h1>

        <nav class="buttons">
            <ul>
                <li>
                    <a class="menu-button" href="#">
                        <img src="https://via.placeholder.com/22x20" alt="">
                    </a>
                </li>
                <li>
                    <a class="menu-button" href="#">
                        <img src="https://via.placeholder.com/22x20" alt="">
                    </a>
                </li>
                <li>
                    <a class="menu-button" href="#">
                        <img src="https://via.placeholder.com/22x20" alt="">
                    </a>
                </li>
            </ul>
        </nav>
    </header>

    <main class="main-content" role="main">
        <ul class="product-group">
            <li>
                <a class="product-group-link" href="#">
                    
                    <article>
                        <h2 class="link-text">Product1</h2>
                        <img src="https://via.placeholder.com/1000x563" alt="">
                    </article>
                </a>
            </li>
            <li>
                <a class="product-group-link" href="#">
                    
                    <article>
                        <h2 class="link-text">Product2</h2>
                        <img src="https://via.placeholder.com/1000x563" alt="">
                    </article>
                </a>
            </li>
            <li>
                <a class="product-group-link" href="#">
                    
                    <article>
                        <h2 class="link-text">Product3</h2>
                        <img src="https://via.placeholder.com/1000x563" alt="">
                    </article>
                </a>
            </li>
            <li>
                <a class="product-group-link" href="#">
                    
                    <article>
                        <h2 class="link-text">Product4</h2>
                        <img src="https://via.placeholder.com/1000x563" alt="">
                    </article>
                </a>
            </li>
            <li>
                <a class="product-group-link" href="#">
                    
                    <article>
                        <h2 class="link-text">Product5</h2>
                        <img src="https://via.placeholder.com/1000x563" alt="">
                    </article>
                </a>
            </li>
            <li>
                <a class="product-group-link" href="#">
                    
                    <article>
                        <h2 class="link-text">Product6</h2>
                        <img src="https://via.placeholder.com/1000x563" alt="">
                    </article>
                </a>
            </li>
        </ul>
    </main>


    <footer id="footer">
        <nav class="left-nav">
            <ul>
                <li><a href="#">Terms and conditions</a></li>
                <li><a href="#">Cookies</a></li>
            </ul>
        </nav>

        <nav class="right-methods">
            <h3>Payment Methods</h3>
            <ul>
                <li><span class="payment-icon one"></span></li>
                <li><span class="payment-icon two"></span></li>
                <li><span class="payment-icon three"></span></li>
                <li><span class="payment-icon four"></span></li>
                <li><span class="payment-icon five"></span></li>
            </ul>
        </nav>

        <a class="to-top-button" href="#"></a>

    </footer>

  
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    overflow-x: hidden;
    font-family: sans-serif;
    color: #585858;
}

h1, h2, h3, h4, h5, h6, p {
    font-weight: 400;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    vertical-align: middle;
}

span {
    display: inline;
}

#header h1 {
    background-color: #ffffff;
}

#header h1 .logo {
    position: relative;
    display: block;

    width: 100%;
    height: 65px;
    background-color: yellow;
}

#header h1 .logo img {
    position: absolute;

    top: 0;
    margin-top: 23px;

    left: 50%;
    margin-left: -93px;
}

#header .buttons ul {
    overflow: hidden;
}

#header .buttons li {
    position: relative;
    float: left;

    width: 33.33%;
    height: 65px;
    border: solid 5px red;
}

#header .buttons li:nth-child(1) {
    background-color: #f9f9f9;
}

#header .buttons li:nth-child(2) {
    background-color: #f4f4f4;
}

#header .buttons li:nth-child(3) {
    background-color: #ededed;
}

#header .buttons li .menu-button {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}

#header .buttons li .menu-button img {
    position: relative;
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
}

@media (min-width: 47em) {
    #header {
        position: fixed;
        width: 100%;
        height: 80px;
        top: 0;
        left: 0;
        z-index: 99999;
}

#header h1 {
        width: 50%;
        height: 80px;
}

#header h1 .logo {
        width: 280px;
        height: 80px;
}

 #header h1 .logo img {
        margin-top: 30px;
}

 #header .buttons {
        position: absolute;
        width: 50%;
        left: 50%;
        top: 0;
}

#header .buttons li {
        height: 80px;
}

.main-content .product-group-link {
    position: relative;
    display: block;
    width: 100%;
    height: 56.3%;
    border: solid 3px purple;
    overflow: hidden;
}

.main-content .product-group-link img {
    width: 100%;
    height: 100%;
}

.main-content .product-group-link .link-text {
    position: absolute;
    left: 25px;
    bottom: 25px;
    color: black;
    font-size: 25px;
}

@media (min-width: 47em) {
    .main-content {
        padding-top: 80px;
    }
}

@media (min-width:60em) {
    .main-content {
        overflow: hidden;
    }
    .main-content .product-group-link {
        width: 50%;
        height: 28.125%;
        float: left;
    }
}

#footer {
    position: relative;
    padding-bottom: 66px;
}

#footer .left-nav {
    padding-top: 20px;
    text-align: center;
}

#footer .left-nav li{
    padding: 5px 0;
}

#footer .right-methods {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 30px;
}

#footer .right-methods li {
    display: inline-block;
    padding: 7px 4px;
}

#footer .right-methods .payment-icon {
    display: inline-block;
    width: 30px;
    height: 20px; 
}

#footer .right-methods .payment-icon.one {
    background-color: black;
}

#footer .right-methods .payment-icon.two {
    background-color: blue;
}

#footer .right-methods .payment-icon.three {
    background-color: brown;
}

#footer .right-methods .payment-icon.four {
    background-color:burlywood;
}

#footer .right-methods .payment-icon.five {
    background-color: chartreuse;
}

#footer .to-top-button {
    position: absolute;
    display: block;

    width: 66px;
    height: 66px;
    background-color: coral;
    bottom: 0;
    left: 50%;
    margin-left: -33px;
}

@media (min-width: 60em) {
    #footer {
        height: 66px;
    }

    #footer .left-nav {
        float: left;
        width: 50%;
        text-align: left;
        padding-top: 32px;
        padding-left: 40px;
        background-color: cornflowerblue;
    }

    #footer .right-methods {
        float: right;
        width: 50%;
        background-color: crimson;
        margin: 0;
        padding-top: 32px ;
        padding-right: 40px;
        text-align: right;
    }

    #footer ul, #footer li, #footer h3 {
        display: inline-block;
        vertical-align: middle;
    }

    #footer .left-nav a {
        font-size: 14px;
        padding: 0 5px;
    }

    #footer .right-methods li {
        padding: 0 4px;
    }

    #footer h3 {
        padding-right: 10px;
    }
}

어려운점

적응형과 반응형이 명확하게 개념구별이 잘 안됨
실습은 좋으나 따라가기만 하다보니 더 헷갈림

해결방법

복습하면서 다시 학습
다른 사이트를 통해서 실스보다 기초적인 개념에 대해 HTML과 CSS에 대한 강의를 들음

학습소감

사이트 실습은 좋으나 제대로 이해하고 있는건지 헷갈림

이채환

Please be wonderful but don't be so serious, enjoy this journey with the good people!

[dg_ai_school] 웹프로그래밍 15

webprogramming

배운내용

어려운점

해결방법

학습소감

[dg_ai_school] 웹프로그래밍 14

[dg_ai_school] 웹프로그래밍 16

0개의 댓글