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

웹디자인 기능사 공개도면 B-2 : 대한투어

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

가로형 레이아웃 / 가로 전체 메뉴 네비게이션 / 상하롤링배너 / 패밀리사이트 / 모달팝업

 

공개도면을 실습하다보니 이제 이 정도는 생각보다 빨리 만드네요 ㅋㅋ

문제는 제이쿼리(자바스크립트) 외우는 거... ㅠㅠ
생각이 안나서 전에 했던거 계속 찾아보고 그랬네요 ㅠ

메뉴 네비게이션에 slideDown, slideUp 걸어놨는데
자꾸 지맘대로 올라갔다내려갔다ㅋㅋㅋ
그래서 찾아보니까 .stop()을 안넣어섴ㅋㅋㅋㅋㅋ
또 자꾸 슬라이드 이미지 뒤로 도망을 가버려서 짜증ㅋㅋㅋ
(z-index 설정으로 해결보긴 했지만..)

한동안 안하다가 다시 잡았더니 if~else구문 쓰는 법도 다 잊어버리고
미춰버리겠네요~~~

하다가 빡쳐서 팝업 문구는 사장님 뒷담으로..ㅋㅋㅋㅋㅋ

 

 

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>대한투어</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>


<body>
    <div id="index_box">
        <header>
            <div id="logo"><img src="img/logo1.png" alt="대한투어로고"></div>
            <nav>

                <ul>
                    <li><a href="#">해외여행</a>
                        <ul class="sub_menu">
                            <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="sub_menu">
                            <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="sub_menu">
                            <li><a href="#">버스여행</a></li>
                            <li><a href="#">자유여행</a></li>
                            <li><a href="#">호텔/펜션</a></li>
                        </ul>
                    </li>
                    <li><a href="#">렌터카</a>
                        <ul class="sub_menu">
                            <li><a href="#">국내 렌터카</a></li>
                            <li><a href="#">국외 렌터카</a></li>
                        </ul>
                    </li>
                </ul>
               <div class="menu_bg"></div>
            </nav>
        </header>


        <main>
            <section id="slide">
                <div id="slide_wrap">
                    <img src="img/slide01.jpg" alt="슬라이드1">
                    <img src="img/slide02.jpg" alt="슬라이드2">
                    <img src="img/slide03.jpg" alt="슬라이드3">
                </div>
            </section>

            <section id="contents">
                <article>
                    <a href="#">공지사항</a>
                    <ul>
                        <li><a class="팝업열기">여기를 누르면 팝업이 뜹니다</a><span>20-05-06</span></li>
                        <li><a href="#">5월 가정의 달 황금연휴</a><span>20-05-03</span></li>
                        <li><a href="#">올해 부처는 목요일에 옴</a><span>20-04-29</span></li>
                        <li><a href="#">코로나때문에 관광산업 침체</a><span>20-04-28</span></li>
                    </ul>
                </article>
                
                <article>
                <a href="#">갤러리</a>
                <div>
               <a href="#"><img src="img/gallary01.jpg" alt="갤러리1"></a>
               <a href="#"><img src="img/gallary02.jpg" alt="갤러리2"></a>
               <a href="#"><img src="img/gallary03.jpg" alt="갤러리3"></a>
                </div>
                </article>
                
                <article id="direct_box">
                    <img src="img/direct.jpg" alt="바로가기">
                </article>
            </section>

        </main>


        <footer>
<div id="copyright">© 2016 Craftman Web Design Test.</div>
       <div id="footer_right">
           <div class="sns">
               <a href="#"><img src="img/sns01.png" alt="sns1"></a>
               <a href="#"><img src="img/sns02.png" alt="sns2"></a>
               <a href="#"><img src="img/sns03.png" alt="sns3"></a>
           </div>
           <div class="family_site">
               <div>
                   <a href="#">패밀리사이트</a><span>▼</span>
                   <ul>
                       <li><a href="#">사이트 A</a></li>
                       <li><a href="#">사이트 B</a></li>
                   </ul>
               </div>
           </div>
       </div>
        </footer>
    </div>
    
    <div id="popup">
        <div id="popup_window">
           <div class="popup_title">우리회사 사장님 전상서</div>
            <div class="popup_letter">
                입 닫고 지갑 한 번 열어주라<br>
                낄끼빠빠 가슴에 새겨주라<br>
                가족이라 하지 마이소<br>
                가족같은 회사?<br>
                내 가족은 집에 있어요~<br>
                대표님 암 걸리면 좋아할 사람<br>
                나야 나 ~ 나야 나 ~<br>
                인간적으로 보너스 좀 줘라 인간아<br>
            </div>
            <input class="팝업닫기" type="button" value="닫 기">
        </div>
        
    </div>
    
    
    
    
    <script type="text/javascript" src="js/daehantour.js"></script>
</body>

</html>

css

@charset "UTF-8";

* {
    color: #333333;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    font-family: sans-serif;
    text-decoration: none;
}

body {
    background: #ffffff;
}


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

header {
    width: 100%;
    height: 100px;
}

#logo {
    width: 200px;
    height: 40px;
    padding: 30px;
    float: left;
}

nav {
    float: right;
    margin-right: 50px;
    margin-top: 58px;
    display: inline;
    text-align: center;
}

nav> ul{
    display: inline;
    font-size: 0;
    height: 200px;
}
nav > ul > li {
    display: inline-block;
    width: 150px;
}
nav > ul > li > a {
    display: block;
    padding: 10px 0;
    font-size: 1.2rem;
    background: #00c73c;
}

.sub_menu{
    display: none;
    position: absolute;
    margin-left: 0;
    width: 150px;
    height: 150px;
    background: #737373;
    padding: 10px 0;
    z-index: 10;
}
.sub_menu>li{
    display: block;
    padding: 10px 0;
    color: white;
}
.sub_menu>li>a{
    color: white;
}

nav>ul>li:hover>a{
    background: #737373;
    color: #00c73c;
}

.sub_menu>li:hover{
    background: #00c73c;
}
.sub_menu>li:hover>a{
    color: #333333;
    font-weight: 800;
}
.menu_bg{
    display: none;
    position: absolute;
    width: 1200px;
    height: 170px;
    background: #737373;
    margin-left: -550px;
    z-index: 3;
}

#slide{
    width: 1200px;
    height: 300px;
    overflow: hidden;
    z-index: 1;
}
#slide_wrap{
    font-size: 0;
}


#contents{
    height: 200px;
}

article{
    width: 480px;
    height: 180px;
    float: left;
    padding: 10px;
    background: #737373;
}
#direct_box{
    width: 200px;
    padding: 0;
}
article>a{
    display: block;
    width: 70px;
    padding: 5px;
    text-align: center;
    font-size: 1rem;
    background: #00c73c;
}
article>ul{
    background: white;
    padding: 20px 10px;
    width: 460px;
    height: 105px;
}
article>ul>li{
    height: 30px;
    cursor: pointer;
}

article>ul>li>span{
    color: grey;
    float: right;
}
article>ul>li:hover>a{
    font-weight: bold;
}

article>div{
    display: flex;
    justify-content: space-between;
    background: white;
    padding: 20px 10px;
    width: 450px;
    height: 105px;

}
article>div>a>img{
    height: 105px;
    width: 143px;
}


footer{
    height: 100px;
    background: gainsboro;
}

#copyright{
    float: left;
    width: 900px;
    height: 30px;
    padding: 35px;
}
#footer_right{
    width: 230px;
    height: 100px;
    float: right;
}
.sns{
    width: 210px;
    height: 40px;
    padding-right: 20px;
    padding-top: 10px;
    text-align: right;
}
.sns>a>img{
    width: 35px;
    margin-right: 10px;
}
.family_site{
    width: 210px;
    height: 40px;
    padding: 10px 20px 0 0;
    cursor: pointer;
}
.family_site>div{
    float: right;
    width: 150px;
    background: white;
    padding: 5px;
    border: 1px solid grey;
}
.family_site>div>span{
    float: right;
}
.family_site>div>ul{
    display: none
}
.family_site>div>ul>li{
    border-top: 1px dashed #00c73c;
    height: 20px;
    padding: 3px;
}

#popup{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

#popup_window{
    margin: 100px auto;
    width: 300px;
    height: 400px;
    text-align: center;
    background: white;
    border: 5px solid #00c73c;
}
.popup_title{
    padding: 10px;
    height: 30px;
    background: #00c73c;
    font-size: 1.5rem;
    font-weight: 800;
}
.popup_letter{
    padding: 20px;
    line-height: 24pt
}

#popup_window>input{
    padding: 10px 20px;
    background: dimgrey;
    color: white;
    border: none;
    cursor: pointer;
}
#popup_window>input:active{
    background: black;
}

java script

$("nav>ul>li").mouseenter(function () {
    $(".sub_menu").stop().slideDown('slow');
    $(".menu_bg").stop().slideDown('slow');
});

$("nav>ul>li").mouseleave(function () {
    $(".sub_menu").stop().slideUp('slow');
    $(".menu_bg").stop().slideUp('slow');
});


setInterval(function () {
    $("#slide_wrap").delay('2500');
    $("#slide_wrap").animate({
        marginTop: "-300px"
    }, '700');
    $("#slide_wrap").delay('2500');
    $("#slide_wrap").animate({
        marginTop: "-600px"
    }, '700');
    $("#slide_wrap").delay('2500');
    $("#slide_wrap").animate({
        marginTop: "0"
    }, '700');
});



$(".family_site>div").click(function () {
    if ($(".family_site>div>ul").css('display') == 'none') {
        $(".family_site>div>ul").stop().slideDown();
        $(".family_site>div>span").text('▲');
    } else {
        $(".family_site>div>ul").stop().slideUp();
        $(".family_site>div>span").text('▼');
    }
});


$(".팝업열기").click(function() {
    $('#popup').show()
});
$(".팝업닫기").click(function() {
    $('#popup').hide()
});

 

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

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

웹디자인 기능사 공개문제 B-4 : 산업대학교  (0) 2020.05.14
웹디자인기능사 공개도면 B-3 : 세계의 미술작품  (0) 2020.05.12
웹디자인기능사 공개도면 B-1 : 대한은행  (0) 2020.05.04
웹디자인기능사 공개도면 C-4 : Vallery Festival  (0) 2020.04.08
웹디자인기능사 공개도면 C-3 : 남도맛기행축제  (2) 2020.04.03

관련글

댓글

티스토리툴바