본문 바로가기
Front-end/HTML+CSS

웹디자인기능사 JUST쇼핑몰 연습

by 타이거진 2023. 3. 14.

<index.html part>

<!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 rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/slide.css">
    <link rel="stylesheet" href="./css/contents.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/popup.css">
    <title>JUST 쇼핑몰</title>
</head>
<body>
    <div id="popup">
        <div id="popup-img">    
                <img src="./images/1.jpg" alt="popup">
        </div>
        <div id = "popup-btn">
            <input type="checkbox"/><span>하루동안 열지않기</span>
            <button>창닫기</button>
        </div>
    </div>

    <div id="wrap">
        <header id="header">
            <div id="logo">
                <a href="#">
                    <img src="./images/logo.png" alt="logo"/>
                </a>
            </div>
            <nav id="nav">
                <ul id="gnb">
                    <li>
                        <a href="#">탑</a>
                        <ul id="lnb">
                            <li><a href="#">블라우스</a></li>
                            <li><a href="#">티</a></li>
                            <li><a href="#">셔츠</a></li>
                            <li><a href="#">니트</a></li>
                        </ul>
                    </li>
                    <li><a href="#">아우터</a>
                        <ul id="lnb">
                            <li><a href="#">자켓</a></li>
                            <li><a href="#">코트</a></li>
                            <li><a href="#">가디건</a></li>
                            <li><a href="#">머플러</a></li>
                        </ul>
                    </li>
                    <li><a href="#">팬츠</a>
                        <ul id="lnb">
                            <li><a href="#">청바지</a></li>
                            <li><a href="#">짧은바지</a></li>
                            <li><a href="#">긴바지</a></li>
                            <li><a href="#">레깅스</a></li>
                        </ul>
                    </li>
                    <li><a href="#">악세서리</a>
                        <ul id="lnb">
                            <li><a href="#">귀고리</a></li>
                            <li><a href="#">목걸이</a></li>
                            <li><a href="#">반지</a></li>
                            <li><a href="#">팔찌</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
           <div id="slide">
                  <div id="slide_contents">
                    <img src="./images/slide1.jpg" alt="슬라이드1"/>
                    <img src="./images/slide2.jpg" alt="슬라이드2"/>
                    <img src="./images/slide3.jpg" alt="슬라이드3"/>
                  </div>
            </div>
        <div id="contents">
            <div id="cont1">
               <div id="tab">
                <div id="tab-btn">
                    <a href="#">
                        공지사항
                    </a>
                    <a href="#">
                        갤러리
                    </a>
                </div>
                <div id="tab-contents">
                        <div id="notice">
                            <ul>
                                <li>
                                    <a href="#">
                                        <span>제목1</span>
                                        <span>2022.12.01</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span>제목2</span>
                                        <span>2023.02.02</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span>제목3</span>
                                        <span>2023.03.03</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span>제목4</span>
                                        <span>2023.03.06</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                       
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div id="gallery">
                        <ul>
                            <l1>
                                <a href="#">
                                    <img src="./images/gallery1.jpg" alt="갤러리1">
                                </a>
                            </l1>
                            <l1>
                                <a href="#">
                                    <img src="./images/gallery2.jpg" alt="갤러리2">
                                </a>
                            </l1>
                            <l1>
                                <a href="#">
                                    <img src="./images/gallery3.jpg" alt="갤러리3">
                                </a>
                            </l1>
                        </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="cont2">
                <a href="#">
                    <img src="./images/banner_img.jpg" alt="배너">
                </a>
            </div>
            <div id="cont3">
                <a href="#">
                    <img src="./images/shortcut_img.jpg" alt="바로가기">
                </a>
            </div>
        </div>
        <footer id="footer">
            <div id="logo">
                <a href="#">
                    <img src="./images/logo2.png" alt="로고">
                </a>
            </div>
            <div id="copyright">
                <address>
                    주식회사 JUST쇼핑몰<br>
                    서울특별시 강남구 테헤란로 999 <br>
                    대표이사: 김패션                  
                </address>
            </div>
            <div id="sns">
               <ul>
                <li>
                    <a href="#">
                        <img src="./images/kakao.png" alt="카카오">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/fb.png" alt="페이스북">
                    </a>
                </li>
                <li><a href="#">
                    <img src="./images/insta.png" alt="인스타">
                </a>
            </li>
               </ul>
               
            </div>
        </footer>
    </div>
</body>
</html>

<style.css part>

@charset "utf-8";

*{
    margin:0;
    padding:0;
}

ul{
    list-style-type: none;
}

a{
    text-decoration: none;
}

#wrap{
    width: 1200px;
    height: 700px;
    background-color: aquamarine;
    margin: 0 auto;
}

#header{
    width: 1200px;
    height: 100px;
    background-color: blue;
}

#header>#logo{
    float: left;
    width: 200px;
    height: 100px;
    background-color: aliceblue;
}

#header>#nav{
    float: left;
    width: 1000px;
    height: 100px;
    background-color: whitesmoke;
}
#slide{
    width: 1200px;
    height: 300px;
    background-color: aqua;
}

#contents{
    width: 1200px;
    height: 200px;
    background-color: lightblue;
}

#contents>#cont1{
    float: left;
    width: 480px;
    height: 200px;
    background-color: whitesmoke;
}

#contents>#cont2{
    float: left;
    width: 360px;
    height: 200px;
    background-color: whitesmoke;
}

#contents>#cont3{
    float: left;
    width: 360px;
    height: 200px;
    background-color: whitesmoke;
}

#footer{
    width: 1200px;
    height: 100px;
    background-color: darkblue;
}

#footer>#logo{
    float: left;
    width: 200px;
    height: 100px;
    background-color: blue;
}
#footer>#copyright{
    float: left;
    width: 800px;
    height: 100px;
    background-color: lightblue;
}
#footer>#sns{
    float: left;
    width: 200px;
    height: 100px;
    background-color: darkblue;
}

 

<header.css part>

#header>#logo>a{
    position: relative;
    top: 25px;
}

#gnb{
    float:right;
    position: relative;
    top: 20px;
    right: 20px;
}

#gnb>li{
    float: left;
}

#gnb>li>a{
    display: block;
    width:150px;
    height: 50px;
    background-color: royalblue;
    text-align: center;
    color: #333;
    padding-top: 15px;
    box-sizing: border-box;
}

#lnb>li>a{
    display: block;
    width:150px;
    height: 50px;
    background-color: teal;
    text-align: center;
    color: #333;
    padding-top: 15px;
    box-sizing: border-box;
}

#gnb li a:hover{
    color: #fff;
    background-color: #333;
}

#lnb{
    display: none;
}

 

<slide.css part>

#slide{
    overflow: hidden;
}

#slide_contents{
    width: 1200px;
    height: 900px;
}

#slide_contents>img{
    display: block;
}

 

<contents.css part>

#cont1>#tab{
    width:475px;
    height: 195px;
    background-color: deepskyblue;
}

#tab>#tab-btn{
    width:470px;
    height: 40px;
    background-color: ghostwhite;
    padding-left: 20px;
    box-sizing: border-box;
}

#tab>#tab-btn>a{
    display: inline-block;
    width: 100px;
    height: 40px;
    background-color: darkseagreen;
    text-align: center;
    color: #333;
    padding-top: 6px;
    box-sizing: border-box;
}

#tab>#tab-contents{
    width: 470px;
    height: 150px;
    background-color: darkgrey;
}

#tab-contents>#notice{
    width: 465px;
    height: 145px;
    background-color: lavender;    
}

#notice>ul>li{
    margin-bottom: 1px;
}

#notice>ul>li>a{
    display: block;
    width: 460px;
    height: 20px;
    background-color: cadetblue;
}

#notice>ul>li>a>span:first-child{
    float: left;
    width: 330px;
    height: 36px;
    background-color: rgb(179, 221, 245);
   
}

#notice>ul>li>a>span:nth-child(2){
    float: left;
    width: 130px;
    height: 36px;
    background-color: rgb(226, 224, 255);
    text-align: center;
}

#tab-contents>#gallery{
    width: 465px;
    height: 145px;
    background-color: lightgray;
    display: none;
}
#gallery>ul{
    position: relative;
    left:20px;
    top:20px;
}

#gallery>ul>li{
    float: left;
    margin-right: 15px;
   
}


#gallery>ul>li>a>img{
    border-radius: 10px;
}

#cont2>a {
    position: relative;
    left:10px;
    top: 10px;
}

#cont2>a>img{
    width: 340px;
    height: 180px;
}
#cont3>a{
    position: relative;
    left:10px;
    top: 10px;
}
#cont3>a>img{
    width: 340px;
    height: 180px;
}

 

<footer.css part>

#footer>#logo>a{
    position: relative;
    top: 25px;
}

#copyright>address{
    position: relative;
    top: 15px;
    left: 50px;
}

#sns>ul{
    position: relative;
    top: 20px;
    left: 10px;
}

#sns>ul>li{
    float: left;
    margin-right: 10px;    
}

 

<Popup.css part>

#popup{
    width: 500px;
    height: 500px;
    /* background-color: cornflowerblue; */
    background-color: aliceblue;
    border: 1px solid lightblue;
    position: fixed;
    z-index: 999;
    left: 250px;
    top: 150px;
    display: none;
}

#popup-img{
    width:500px;
    height:450px;
    /* background-color: darkgray; */
}

#popup-img>img{
    width:100%;
    height: 100%;
}

#popup-btn{
    width: 500px;
    height: 50px;
    /* background-color: wheat; */
    padding: 10px 10px;
    box-sizing: border-box;
}

#popup-btn>input{
    margin-right: 5px;
}

#popup-btn>button{
    float: right;
}

 

저작자표시 비영리

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

리트리버 과제  (0) 2023.02.28
대구 동구도서관 웹 화면 코드 분석  (0) 2023.02.28
웹디자인기능사 와이어프레임 구축 연습(B-4. 산업대학교)  (0) 2023.02.18
웹디자인기능사 와이어프레임 구축 연습(B-3. 세계의 미술작품)  (0) 2023.02.18
웹디자인기능사 와이어프레임 구축 연습(B-2. 대한투어)  (0) 2023.02.18

관련글

티스토리툴바