본문 바로가기
꿀팁 공유/└ 웹디자인기능사

JUST 쇼핑몰 두번째 연습

by 가을색수달 2020. 5. 30.

 

 

시험도 다가오고.. js는 자꾸 까먹고..
연습차 다시 작업해봤습니다. 

처음에 만들었던건 진짜 html이랑 css 처음 만져보는거라.. 색조합이나 그런게 완전 쌉쓰레기였죸ㅋㅋㅋㅋㅋ
진짜 이건 그 때에 비하면 선녀다 선녀 ㅋㅋㅋㅋㅋ
(처음 만들었던 공개도면 실습ㅋㅋ 👉 https://sudal89.tistory.com/31)

 

 

 

(움직이는 gif 파일은 집컴(맥북)에서 만들기 귀찮아서.. 동영상으로 해봤는데 어떨런지...;)

고객센터 배너(바로가기배너) 이미지는 전체 분위기랑 안어울리는데 .. 수정하기 귀찮고여...ㅋㅋㅋ
sns로고 iconmonstr에서 가져다가 만들면 되는데 내가 귀찮아서 걍 저렇게 만듦.. ㅋㅋㅋㅋㅋㅋㅋ

메뉴 네비게이션하고 탭메뉴 같은 경우엔 border 값도 주고, 테두리 윗쪽에 border-radius 값을 10px씩 줘서 좀 부드러운 느낌? 나게 해봤는데 사실 이건 시험에서 요구하는 사항은 아니므로... 그냥 제가 보기 예쁘라고 한거니까 참고로만 하세유...

 

 

 

코드는 순서대로 html-css-javascript(jQuery) 입니다.

 

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Just 쇼핑몰</title>
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src=" http://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>
    <div id="index_wrap">
        <header>
            <div id="logo1"><a href="index.html"><img src="img/logo1.jpg" alt="로고1"></a></div>
            <nav>
                <ul>
                    <li><a href="#">탑</a>
                        <ul class="submenu submenu1">
                            <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 class="submenu">
                            <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 class="submenu">
                            <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 class="submenu submenu4">
                            <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">
            <ul>
                <li><a href="#"><img src="img/slide01.jpg" alt="슬라이드1"></a></li>
                <li><a href="#"><img src="img/slide02.jpg" alt="슬라이드2"></a></li>
                <li><a href="#"><img src="img/slide03.jpg" alt="슬라이드3"></a></li>
            </ul>
        </div>

        <div id="contents">
            <div id="tab_menu">
                <ul>
                    <li><a href="#">공지사항</a></li>
                    <li><a href="#">갤러리</a></li>
                </ul>
                <div class="tab_contents">

                    <ul class="notice">
                        <li><a class="popup_show">여기를 누르면 팝업이 뜹니다</a><span>20-05-28</span></li>
                        <li><a href="#">공지사항 내용을 써주세요</a><span>20-05-28</span></li>
                        <li><a href="#">공지사항 내용을 써주세요</a><span>20-05-28</span></li>
                        <li><a href="#">공지사항 내용을 써주세요</a><span>20-05-28</span></li>
                    </ul>


                    <ul class="gallery">
                        <li><a href="#"><img src="img/gallery01.jpg" alt="갤러리1"></a></li>
                        <li><a href="#"><img src="img/gallery02.jpg" alt="갤러리2"></a></li>
                        <li><a href="#"><img src="img/gallery03.jpg" alt="갤러리3"></a></li>
                    </ul>

                </div>
            </div>

            <div id="banner">
                <a href="#"><img src="img/banner.jpg" alt="배너"></a>
            </div>

            <div id="direct">
                <a href="#"><img src="img/direct.jpg" alt="바로가기"></a>
            </div>
        </div>

        <footer>
            <div id="logo2">
                <a href="index.html"><img src="img/logo2.png" alt="로고2"></a>
            </div>

            <div id="copyright">
                2020 Copyright Web Design Crafter
            </div>

            <div id="sns">
                <ul>
                    <li><a href="#"><img src="img/sns2.png" alt="sns1"></a></li>
                    <li><a href="#"><img src="img/sns1.png" alt="sns2"></a></li>
                    <li><a href="#"><img src="img/sns3.png" alt="sns3"></a></li>
                </ul>
            </div>
        </footer>

    </div>

        <div id="popup">
            <div id="popup_title">
                팝업 제목을 써주세요.
            </div>
            <div id="popup_letter">
                팝업 내용을 써주세요.<br>
                팝업 내용을 써주세요.<br>
                팝업 내용을 써주세요.<br>
                팝업 내용을 써주세요.<br>
                팝업 내용을 써주세요.<br>
                팝업 내용을 써주세요.
            </div>
            <input type="button" value="×    닫 기" class="popup_hide">
    </div>


    <script type="text/javascript" src="js/script.js"></script>
</body>

</html>

@charset "utf-8";

*{
    color: #222328;
    text-decoration: none;
    list-style: none;
    font-size: 1rem;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background: #ffffff
}

#index_wrap{
    width: 1200px;
    height: 700px;
    margin: 0 auto;
}

header{
    height: 100px;
}

#logo1{
    float: left;
    height: 40px;
    width: 200px;
    margin: 30px;
}

nav{
    height: auto;
    float: right;
    margin-top: 30px;
    margin-right: 40px;
    border: 1px solid slategrey;
    box-sizing: border-box;
    border-radius: 10px 10px 0 0;
}
nav>ul{
    display: inline;
    text-align: center;
    font-size: 0;
}
nav>ul>li{
    display: inline-block;
}
nav>ul>li>a{
    display: block;
    width: 130px;
    height: 40px;
    line-height: 40px;
    border-left: 1px solid slategrey;
    box-sizing: border-box;
}
nav>ul>li:first-child>a{
    border-left: none;

}
.submenu{
    display: none;
    position: absolute;
    margin-top: 1px;
    margin-left: -1px;
    padding: 10px 0;
    background: white;
    border-bottom: 1px solid slategrey;
}
.submenu1{
    border-left: 1px solid slategrey;
}
.submenu4{
    border-right: 1px solid slategrey;
}
.submenu>li{
    width: 131px;
    height: 30px;
    line-height: 30px;
}

nav>ul>li:hover>a{
    color: hotpink;
    font-weight: 500;
}
.submenu>li:hover{
    background: pink;
}
.submenu>li:hover>a{
    color: white;
    font-weight: 500;
}



#slide{
    width: 100%;
    height: 300px;
    font-size: 0;
    background: peachpuff;
    overflow: hidden;
}
#slide>ul>li{
    width: 1200px;
    height: 300px;
    background: LavenderBlush;
}



#contents{
    height: 200px;
}
#tab_menu{
    float: left;
    padding: 10px;
    width: 500px;
    height: 200px;
}
#tab_menu>ul{
    position: absolute;
    display: inline;
    font-size: 0;
    text-align: center;
}
#tab_menu>ul>li{
    display: inline-block;
    background: mistyrose;
    border-radius: 10px 10px 0 0;
    border: 1px solid slategrey;
   
}
#tab_menu>ul>li:first-child{
    background: white;
    border-bottom: 1px solid white;
}
#tab_menu>ul>li>a{
    display: block;
    width: 100px;
    height: 30px;
    line-height: 35px;
}

.tab_contents{
    width: 480px;
    height: 150px;
    margin-top: 31px;
    padding: 10px;
    background: white;
    border: 1px solid slategrey;
}
.notice{
    display: block;
}
.notice>li{
    font-size: 0.9rem;
    line-height: 33px;
    cursor: pointer;
}
.notice>li>a{
    color: grey;
}
.notice>li>span{
    float: right;
    color: lightgrey;
}

.gallery{
    display: none; /*none OR flex*/
    justify-content: space-between;
    width: 455px;
    height: 150px;
    
}
.gallery>li{ 
    display: inline-block; 
    overflow: hidden; 
    background: pink; 
    width: 145px; 
    height: 130px; }



#banner{
    float: left;
    width: 350px;
    padding: 10px;
}
#banner>a{
    display: block;
    width: 330px;
    height: 180px;
}

#direct{
    float: right;
    width: 350px;
    padding: 10px;
}
#direct>a{
    display: block;
    width: 330px;
    height: 180px;
}



footer{
    height: 100px;
    background: mistyrose;
}
#logo2{
    float: left;
    width: 200px;
    height: 40px;
    margin: 30px;
}
#copyright{
    float: left;
    width: 650px;
    line-height: 100px;
    text-align: center;
    color: lightpink;
}
#sns{
    float: right;
    margin-right: 50px;
    margin-top: 25px;
}
#sns>ul>li{
    display: inline-block;
    margin-left: 20px;
}
#sns>ul>li:hover{
    opacity: 0.5;
}




#popup{
    display: none;
    position: absolute;
    top: 200px;
    left: 500px;
    width: 400px;
    height: 300px;
    border: 5px solid hotpink;
    background: white;
}
#popup_title{
    height: 40px;
    background: hotpink;
    color: white;
    font-size: 24px;
    padding-left: 10px;
    line-height: 40px;
}
#popup_letter{
    padding: 10px;
    line-height: 30px;
}
.popup_hide{
    padding: 10px 20px;
    background: hotpink;
    color: white;
    float: right;
    margin-right: 10px;
}
$('nav>ul>li').hover(function () {
    $('.submenu').stop().slideToggle();
});


setInterval(function () {

    $("#slide>ul").delay('2500');
    $("#slide>ul").animate({marginTop: '-300px'}, '500');
    $("#slide>ul").delay('2500');
    $("#slide>ul").animate({marginTop: '-600px'}, '500');
    $("#slide>ul").delay('2500');
    $("#slide>ul").animate({marginTop: '0'}, '500');

});



$('.popup_hide').click(function () {
    $('#popup').hide();
});
$('.popup_show').click(function () {
    $('#popup').show();
});




$('#tab_menu>ul>li:nth-child(2)').click(function () {
    $('.notice').hide();
    $('.gallery').css('display', 'flex');

    $(this).css({
        background: "white",
        borderBottom: "1px solid white",
    });
    $('#tab_menu>ul>li:nth-child(1)').css({
        background: "mistyrose",
        border: "1px solid slategrey"
    });
});

$('#tab_menu>ul>li:nth-child(1)').click(function () {
    $('.gallery').hide();
    $('.notice').show();

        $(this).css({
        background: "white",
        borderBottom: "1px solid white",
    });
    $('#tab_menu>ul>li:nth-child(2)').css({
        background: "mistyrose",
        border: "1px solid slategrey"
    });
});

 

 

 

공부 조금 하신 분들은 코드만 봐도 대충 이해하실거라 믿습니다만..
질문 사항이 있으시면 어떠한 것이라도 좋으니 댓글 달아주시면 .. 확인하는대로 알려드리겠습니다 ^^

저작자표시 비영리 변경금지

'꿀팁 공유 > └ 웹디자인기능사' 카테고리의 다른 글

2020 웹디자인기능사 실기시험 후기  (4) 2020.06.22
슬라이드 이미지 구현 (좌우/상하/페이드인아웃)  (5) 2020.06.03
탭메뉴 구현 (공지사항/갤러리)  (0) 2020.05.18
메뉴 네비게이션 만들기 (가로)  (0) 2020.05.18
웹디자인 기능사 공개문제 B-4 : 산업대학교  (0) 2020.05.14

관련글

댓글

티스토리툴바