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

웹디자인기능사 공개도면 B-3 : 세계의 미술작품

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

가로형 메뉴 / 개별 네비게이션 / 레이어팝업 / 상하 롤링 배너

 

이번편은 특별히 어려운건 없는.. 무난무난한 문제네요.

근데 자꾸 메뉴 네비게이션이 오류가 나서.. ㅠㅠ
처음에 사이트 들어가서는 hover시 slideToggle이 잘 작동하는데
몇 초 지나고나서 hover하면 메뉴가 안내려오네요..
이유를 모르겠네 ~~~?
그냥 mouseEnter, mouseLeave로 해야하나...

 

 

HTML

<!doctype html>
<html>

<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_wrap">
        <header>
            <div class="로고1">
                <a href="index.html"><img src="img/logo01.jpg" alt="상단로고"></a>
            </div>
            <nav>
                <div><a href="#">소장처별</a>
                    <ul>
                        <li><a href="#">한국</a></li>
                        <li><a href="#">프랑스</a></li>
                        <li><a href="#">이탈리아</a></li>
                        <li><a href="#">독일</a></li>
                    </ul>
                </div>
                <div><a href="#">장르별</a>
                    <ul>
                        <li><a href="#">회화</a></li>
                        <li><a href="#">판화</a></li>
                        <li><a href="#">공예/고대유물</a></li>
                        <li><a href="#">그외</a></li>
                    </ul>
                </div>
                <div><a href="#">테마별</a>
                    <ul>
                        <li><a href="#">초상화/인물</a></li>
                        <li><a href="#">종교</a></li>
                        <li><a href="#">신화/문학</a></li>
                        <li><a href="#">일상/스포츠</a></li>
                    </ul>
                </div>
                <div><a href="#">시대별</a>
                    <ul>
                        <li><a href="#">1900년이전</a></li>
                        <li><a href="#">1900년대</a></li>
                        <li><a href="#">현대</a></li>
                        <li><a href="#">그외</a></li>
                    </ul>
                </div>

            </nav>
        </header>

        <section id="slide_box">
            <div class="슬라이드">
                <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_box">
            <div class="공지사항">
                <a href="#">공지사항</a>
                <ul>
                    <li><a class="팝업열기">여기를 누르면 팝업이 뜹니다.</a><span>20-05-11</span></li>
                    <li><a href="#">코로나19 극복 예술 프로젝트</a><span>20-04-30</span></li>
                    <li><a href="#">2020년 전시 해설사 모집</a><span>20-02-15</span></li>
                    <li><a href="#">미술관 교육프로그램 중단안내</a><span>20-01-20</span></li>
                </ul>
            </div>
            <div class="갤러리">
                <a href="#">갤러리</a>
                <ul>
                    <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 class="배너">
                <a href="#"><img src="img/banner.jpg" alt="배너"></a>
            </div>
        </section>

        <footer>
            <div class="로고2">
                <a href="index.html"><img src="img/logo2.png" alt="하단로고"></a>
            </div>
            <div class="저작권">
                © 2020 Craftman Web Design Test.
            </div>
            <div class="sns">
                <a href="#"><img src="img/sns02.png" alt="sns1"></a>
                <a href="#"><img src="img/sns01.png" alt="sns2"></a>
                <a href="#"><img src="img/sns03.png" alt="sns3"></a>
            </div>
        </footer>
    </div>

    <div id="popup">
        <div class="popup_title">조한이 형 - UV</div>
        <div class="popup_letter">
            형이 한마디만 해줘도될까<br>
            안타까워서 그래 잘못될까봐 그래<br><br>

            형이 진짜 이말만하고 갈게<br>
            기술 같은거 배워 중국어라도 배워<br><br>

            형이 진짜 땅을치며 후회돼<br>
            나 처럼만 살지마 형처럼만 살지마<br>
            그러면 안돼
        </div>
        <input class="팝업닫기" type="button" value="닫 기">
    </div>


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

</html>

CSS

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

body{
    background: #ffffff;
}

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

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

.로고1{
    float: left;
    width: 200px;
    height: 40px;
    margin: 30px;
}

nav{
    float: right;
    display: inline;
    text-align: center;
    margin-right: 40px;
    font-size: 0;
    margin-top: 30px;
    z-index: 10;
}

nav>div{
    display: inline-block;
    width: 150px;
}

nav>div>a{
    height: 38px;
    color: #4a4948;
    letter-spacing: 3px;
    line-height: 42px;
    display: block;
    font-size: 1.2rem;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
}

nav>div>ul{
    display: none;
    position: absolute;
    width: 150px;
    padding: 10px 0;
    background: rgba(255,255,255,0.9)
}

nav>div>ul>li{
    height: 30px;
    line-height: 30px;
}


nav>div:hover>a{
    background: #4a4948;
    color: #caac7d;
}

nav>div>ul>li:hover{
    background: #caac7d;
}
nav>div>ul>li:hover>a{
    color: white;
}


#slide_box{
    width: 1200px;
    height: 300px;
    overflow: hidden;
    z-index: 1;
}
.슬라이드{
    height: 300px;
    font-size: 0;
}


#contents_box{
    width: 100%;
    height: 200px;
    display: inline;
    font-size: 0;
}
#contents_box>div{
    display: inline-block;
    vertical-align: top;
}

.공지사항{
    margin-top: 10px;
    margin-right: 10px;
    width: 490px;

}
.공지사항>a{
    display: block;
    width: 80px;
    padding: 5px 10px;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    border-top: 1px solid silver;
}
.공지사항>ul{
    padding: 10px;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
}
.공지사항>ul>li{
    height: 32px;
    line-height: 32px;
}
.공지사항>ul>li>span{
    float: right;
}
.공지사항>ul>li:hover>a{
    font-weight: 700;
}


.갤러리{
    margin-top: 10px;
    margin-right: 10px;
    width: 390px;

}
.갤러리>a{
    display: block;
    width: 80px;
    padding: 5px 10px;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    border-top: 1px solid silver;
}
.갤러리>ul{
    padding: 22px; 10px;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
    display: flex;
    justify-content: space-between;
    height: 104px;
}

.배너{
    height: 180px;
    margin: 10px 0;
    overflow: hidden
}

footer{
    background: #4a4948;
    height: 100px;
}

.로고2{
    float: left;
    width: 200px;
    height: 40px;
    padding: 30px;
}

.저작권{
    float: left;
    width: 680px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}

.sns{
    float: right;
    width: 150px;
    height: 40px;
    margin: 30px 55px;
    display: flex;
    justify-content: space-between;
}
.sns>a>img{
    width: 40px;
}


#popup{
    display: none;
    position: absolute;
    top: 70px;
    left: 600px;
    width: 300px;
    padding-bottom: 20px;
    border: 5px solid #caac7d;
    background: white;
    text-align: center;
}
.popup_title{
    height: 50px;
    background: #caac7d;
    color: white;
    font-size: 1.5rem;
    line-height: 50px;
}
.popup_letter{
    padding: 20px;
    line-height: 30px;
}

.팝업닫기{
    background: #4a4948;
    padding: 10px 20px;
    color: white;
    border: none;
}
.팝업열기{
    cursor: pointer;
}

JAVA SCRIPT

$('nav>div').hover(function(){
   $(this).children('ul').stop().slideToggle(); 
});


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


setInterval(function(){
    $('.슬라이드').delay('2500');
    $('.슬라이드').animate({marginTop : '-300px'},'700');    
    $('.슬라이드').delay('2500');
    $('.슬라이드').animate({marginTop : '-600px'},'700');    
    $('.슬라이드').delay('2500');
    $('.슬라이드').animate({marginTop : '0'},'700');
});

 

 

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

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

메뉴 네비게이션 만들기 (가로)  (0) 2020.05.18
웹디자인 기능사 공개문제 B-4 : 산업대학교  (0) 2020.05.14
웹디자인 기능사 공개도면 B-2 : 대한투어  (0) 2020.05.08
웹디자인기능사 공개도면 B-1 : 대한은행  (0) 2020.05.04
웹디자인기능사 공개도면 C-4 : Vallery Festival  (0) 2020.04.08

관련글

댓글

티스토리툴바