Front-end/HTML&CSS

[웹 퍼블리싱] 02. HTML/CSS 핵심개념

Dev다D 2021. 2. 9. 00:21
반응형

SimpleShop

 

코드잇의 SimpleShop 쇼핑몰 페이지를 완성해보세요!

참고하세요:

  • 네비게이션 바의 height 는 60px 입니다.
  • 네비게이션 바의 메뉴들은 클릭하면 페이지 최상단으로 이동합니다. # 를 활용해주세요.
  • hero_header.jpg 는 배경이미지로 들어가고, 배경이미지가 들어가는 영역은 450px 의 height를 가집니다.
  • 각 상품들을 클릭하면 페이지 최상단으로로 이동합니다.
  • 이미지의 테두리는 클릭 영역 표시를 위한 것이고, 직접 구현하지는 않아도 됩니다.
  • 페이스북, 인스타그램, 트위터 아이콘의 height는 20px로 지정해 주세요.

결과물

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SimpleShop</title>
    <link href="Styles.css" rel="stylesheet">
</head>
<body>

    <div class="navbar">
        <a href="#" id="logo">
           <img src="logo.png" width="149">
        </a>

        <ul id="menu">
            <li><a href="#">Contact</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Cart</a></li>
            <li><a href="#">Login</a></li>
        </ul>
    </div>
    <div class="hero-header"></div>

    <div class="product-list">

        <div class="products">
            <h3> Our New Products </h3>

            <a href="#" class="product">
                <img src="sunglasses.jpg" width="225">
                <div class="product-name"> Sunglasses </div>
                <div class="product-price"> 49,000 </div>
            </a>

            <a href="#" class="product">
                <img src="tassel_loafer.jpg" width="225">
                <div class="product-name"> Tassel Loafer </div>
                <div class="product-price"> 89,000 </div>
            </a>

            <a href="#" class="product">
                <img src="beige_bag.jpg" width="225">
                <div class="product-name"> Beige Bag </div>
                <div class="product-price"> 69,000 </div>
            </a>

            <a href="#" class="product">
                <img src="sneakers.jpg" width="225">
                <div class="product-name"> Sneakers </div>
                <div class="product-price"> 79,000 </div>
            </a>

            <a href="#" class="product">
                <img src="slippers.jpg" width="225">
                <div class="product-name"> Slippers </div>
                <div class="product-price"> 29,000 </div>
            </a>

            <a href="#" class="product">
                <img src="wrist_watch.jpg" width="225">
                <div class="product-name"> Wrist Watch </div>
                <div class="product-price"> 99,000 </div>
            </a>

            <a href="#" class="product">
                <img src="fedora_hat.jpg" width="225">
                <div class="product-name"> Fedora Hat </div>
                <div class="product-price"> 39,000 </div>
            </a>

            <a href="#" class="product">
                <img src="classic_loafer.jpg" width="225">
                <div class="product-name"> Classic Loafer </div>
                <div class="product-price"> 99,000 </div>
            </a>

            <a href="#" class="product">
                <img src="pink_bag.jpg" width="225">
                <div class="product-name"> Pink Bag </div>
                <div class="product-price"> 79,000 </div>
            </a>

            <div class="clearfix"></div>
        </div>
    </div>

    <div class="footer">
        <a href="http://facebook.com">
            <img src="facebook.png" height="20">
        </a>
        <a href="http://instagram.com">
            <img src="instagram.png" height="20">
        </a>
        <a href="http://twitter.com">
            <img src="twitter.png" height="20">
        </a>
    </div>

</body>
</html>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-width: 992px;
    font-family: "Helvetica";
}

/* navbar */
.navbar {
    height: 60px;
    padding-left: 30px;
    padding-right: 30px;
}

.navbar #logo {
    line-height: 60px;
}

.navbar #logo img {
    vertical-align: middle;
}

.navbar #menu {
    float: right;
    list-style: none;
    padding: 0;
    margin: 0;
}

.navbar #menu li {
    float: left;
    margin-left: 50px;
    line-height: 60px;
}

.navbar #menu li a {
    color: #545454;
    font-size: 13px;
    text-decoration: none;
    font-weight: bold;
}

/* hero header */
.hero-header {
    height: 450px;
    background-image: url("hero_header.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* products */
.products h3 {
    font-size: 24px;
    color: #545454;
    margin-top: 60px;
    margin-bottom: 60px;
    text-align: center;
}

.product-list {
    width: 735px;
    margin-left: auto;
    margin-right: auto;
}
.product {
    width: 225px;
    text-align: center;
    display: block;
    color: #545454;
    text-decoration: none;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom:  80px;
}

.product-name {
    margin-top: 20px;
    margin-bottom: 4px;
}


.clearfix {
    clear: both;
}
/* footer */
.footer {
    text-align: center;
    margin-top: 120px;
    margin-bottom: 80px;

}

.footer a {
    margin-right: 10px;
    margin-left: 10px;
    text-decoration: none;
}

 

본 내용은 Codeit의  '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
저작자표시 비영리 동일조건

'Front-end > HTML&CSS' 카테고리의 다른 글

[웹 퍼블리싱] 03. 반응형 웹 퍼블리싱  (0) 2021.02.09
[웹 퍼블리싱] 03. 반응형 웹 퍼블리싱  (0) 2021.02.09
[웹 퍼블리싱] 02. HTML/CSS 핵심개념  (0) 2021.02.09
[웹 퍼블리싱] 02. HTML/CSS 핵심개념  (0) 2021.02.08
[웹 퍼블리싱] 02. HTML/CSS 핵심개념  (0) 2021.02.08

'Front-end/HTML&CSS'의 다른글

  • 현재글[웹 퍼블리싱] 02. HTML/CSS 핵심개념

관련글

티스토리툴바