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

웹디자인기능사 공개도면 C-3 : 남도맛기행축제

by 가을색수달 2020. 4. 3.

세로형 레이아웃 / 세로형 날개 메뉴 네비게이션 / 좌우롤링배너

 

이번엔 롤링배너 이미지를 좀 신경써서 만들어봤습니다 ㅋㅋㅋ
(저번에 부산빛축제는 제가 봐도 너무 대충 만들어서 촌스럽...ㅋㅋㅋㅋㅋ)

항상 느끼는거지만 좌우/상하 롤링배너는 넘 어렵네요.. ㅠ
조금 더 공부가 필요할 듯 합니다.

일단은 1>2>3 진행 후 빠르게 3>2>1로 돌아가는 형식으로 했는데
3 다음에 1 불러오고 앞에꺼는 삭제되는 식으로 구현하려했더니
코드가 복잡해져서 못하겠더라구요...
(복잡한거는 생각하기 싫은 나이)

제이쿼리에 SlideLeft/Right, SlideUp/Down 기능이
추가되면 얼마나 좋을까~
그런 생각을 해봅니다 ㅎㅎㅎㅎ
(부모태그를 넣으면 자식들이 알아서 슉슉~ 뭐 그렇게? ㅋㅋ)

 

 

html

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

<head>
    <meta charset="UTF-8">
    <title>남도맛기행축제</title>
    <link rel="stylesheet" href="css/styles.css">
    <script type="text/javascript" src="js/jQuery%20JavaScript%20Library%20v3.4.1.js"></script>
</head>


<body>
    <div id="popup">
        <div class="popup_title">※ 남도맛기행 축제 개최 안내</div>
        <div class="popup_text">
            코로나19의 영향으로 연기되었던 2020 남도맛기행축제가<br>
            오는 4월 24일(금)~5월3일(일) 개최됩니다.<br><br>
            축제를 기다려주신 관객분들께 다시 한번 감사드리며,<br>
            더욱 풍성하고 맛있는 음식, 다채로운 공연으로 보답하겠습니다.<br><br>
            감사합니다.
        </div>
        <div class="popup_bottom">
            <input class="팝업닫기" type="button" value="닫기">
        </div>
    </div>

    <div id="index_box">
        <!---좌측메뉴시작--->
        <header>
            <div id="left_side">
                <div class="logo_box">
                    <a href="index.html"><img src="img/namdomat_logo.png" alt="남도맛기행축제로고"></a>
                </div>
                <div class="menu_box">
                    <ul>
                        <li><a href="#">협회소개</a>
                            <ul class="submenu">
                                <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>
                            </ul>
                        </li>
                        <li><a href="#">홍보마당</a>
                            <ul class="submenu">
                                <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="#">Q＆A</a></li>
                                <li><a href="#">사진갤러리</a></li>
                                <li><a href="#">공지사항</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </header>

        <!---우측메뉴시작--->
        <div id="right_side">
            <section>
                <div class="slide_box">
                    <ul>
                        <li><a href="#"><img src="img/slide01.jpg" alt="슬라이드01"></a></li>
                        <li><a href="#"><img src="img/slide02.jpg" alt="슬라이드02"></a></li>
                        <li><a href="#"><img src="img/slide03.jpg" alt="슬라이드03"></a></li>
                    </ul>
                </div>
                <div class="contents_box">
                    <div class="notice_box">
                        <div><a href="#">공지사항</a></div>
                        <ul>
                            <li><a class="팝업열기">여기를 클릭하면 팝업이 뜹니다</a><span>20-04-02</span></li>
                            <li><a href="#">남도맛기행축제 최종 리플렛/포스터</a><span>20-04-01</span></li>
                            <li><a href="#">코로나19 관련 축제일정변경</a><span>20-03-25</span></li>
                            <li><a href="#">요리경연대회 참가 업체 발표</a><span>20-03-23</span></li>
                        </ul>
                    </div>
                    <div class="gallery_box">
                        <div><a href="#">갤러리</a></div>
                        <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="banner_box">
                        <a href="#"><img src="img/direct.png" alt="배너"></a>
                    </div>
                </div>
            </section>
            <footer>
                <div class="footer_box">
                    <div class="footer_left">
                        <a href="index.html"><img src="img/namdomat_logo2.png" alt="남도맛기행축제로고2"></a>
                    </div>
                    <div class="footer_right">
                        <div class="bottom_menu">
                            <a href="#">남도맛기행축제소개</a>
                            <a href="#">개인정보취급방침</a>
                            <a href="#">이메일무단수집거부</a>
                            <a href="#">제휴문의</a>
                        </div>
                        <div class="copyright">
                            Copyright ⓒ 2020 웹디자인기능사 All Rights Reserved.
                        </div>
                    </div>
                </div>
            </footer>
        </div>

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

</html>

css

@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 12pt;
    color: #222328;
}

body{
    background: #ffffff;
}

#index_box{
    width: 1000px;
    height: 650px;
}
/****좌측메뉴시작****/
#left_side{
    float: left;
    width: 240px;
    height: 650px;
}
/*---로고시작---*/
.logo_box{
    width: 200px;
    height: 40px;
    padding: 20px;
}
.logo_box>a>img{
    width: 200px;
}
/*---로고끝---*/
/*---메뉴시작---*/
.menu_box{
    width: 200px;
    margin: 20px;
    text-align: center;
    background: white;
    border-top: 1px dashed tomato;
}
.menu_box>ul>li>a{
    display: block;
    height: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 5px;
    padding: 10px 0;
    border-bottom: 1px dashed tomato;
}
.submenu{
    display: none;
    position: absolute;
    padding: 10px 0;
    width: 150px;
    height: 145px;
    top: 100px;
    left: 220px;
    background: tomato;
    z-index: 1;
}
.submenu>li>a{
    display: block;
    height: 30px;
    line-height: 32px;
    color: white;
}
.menu_box>ul>li:hover>a{
    color: white;
    background: tomato;
}
.submenu>li:hover>a{
    font-weight: bold;
    text-decoration: underline;
    color: peachpuff;
}
/*---메뉴끝---*/
/****좌측메뉴끝****/


/****우측메뉴시작****/
#right_side{
    float: right;
    width: 760px;
}
/*---슬라이드시작---*/
.slide_box{
    height: 350px;
    overflow: hidden;
}
.slide_box>ul{
    width: 2280px;
    height: 350px;
    font-size: 0;
}
.slide_box>ul>li{
    display: inline-block;
    height: 350px;
}
/*---슬라이드끝---*/
/*---컨텐츠시작---*/
.contents_box{
    height: 200px;
    background: papayawhip;
}

.notice_box{
    float: left;
    width: 260px;
    height: 180px;
    padding: 10px;
}
.notice_box>div>a{
    display: block;
    width: 90px;
    height: 30px;
    line-height: 32px;
    text-align: center;
    font-weight: bold;
    background: white;
    color: tomato;
}
.notice_box>ul{
    width: 240px;
    height: 130px;
    padding: 10px;
    background: white;
}
.notice_box>ul>li>a{
    width: 162px;
    line-height: 33px;
    float: left;
    font-size: 0.8rem;
    color: grey;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.notice_box>ul>li>span{
    line-height: 33px;
    float: right;
    font-size: 0.8rem;
    color: grey;
}
.notice_box>ul>li:hover>a{
    color: #222328;
    font-weight: bold;
    cursor: pointer;
}

.gallery_box{
    float: left;
    width: 260px;
    height: 180px;
    padding: 10px;
}
.gallery_box>div:first-child>a{
    display: block;
    width: 90px;
    height: 30px;
    line-height: 32px;
    text-align: center;
    font-weight: bold;
    background: peachpuff;
    color: tomato;
}
.gallery_box>ul{
    display: flex;
    justify-content: space-between;
    width: 240px;
    height: 76px;
    padding: 37px 10px;
    background: white;
}
.gallery_box>ul>li{
    width: 75px;
    overflow: hidden;
    background: black;
}
.gallery_box>ul>li>a>img{
    width: 75px;
}
.gallery_box>ul>li:hover>a>img{
    transform: scale(1.2);
    opacity: 0.7;
}

.banner_box{
    float: right;
    width: 180px;
    height: 180px;
    padding: 10px;
}
/*---컨텐츠끝---*/
/*---푸터시작---*/
.footer_box{
    height: 100px;
    background: rgb(70,70,70)
}
.footer_left{
    float: left;
    width: 180px;
    height: 40px;
    padding: 30px 20px;
}
.footer_right{
    float: right;
    width: 520px;
    height: 100%;
}
.bottom_menu{
    height: 50px;
}
.bottom_menu>a{
    margin-right: 15px;
    font-size: 0.9rem;
    line-height: 60px;
    color: grey;
}
.bottom_menu>a:hover{
    color: darkgray;
}
.copyright{
    margin-right: 15px;
    font-size: 0.9rem;
    line-height: 40px;
    color: grey;
}
/*---푸터끝---*/
/****우측메뉴끝****/


/****팝업시작****/
#popup{
    display: none;
    z-index: 3;
    position: absolute;
    left: 300px;
    top: 120px; 
    width: 400px;
    height: 300px;
    background: white;
    border: 5px solid tomato;
}
.popup_title{
    height: 30px;
    background: tomato;
    line-height: 30px;
    padding-left: 10px;
    color: white;
    font-size: 1.1rem;
}
.popup_text{
    height: 200px;
    padding: 10px;
    line-height: 180%;
    font-size: 0.9rem;
}
.popup_bottom{
    padding: 10px;
}
.팝업닫기{
    float: right;
    padding: 5px 20px;
    border: none;
    background: dimgrey;
    color: white;
}
/****팝업끝****/

java script

//메뉴네비게이션
$('.menu_box>ul>li').mouseenter(function(){
   $(this).children('.submenu').animate({
       width: "show"}, 100, "linear");
});

$('.menu_box>ul>li').mouseleave(function(){
   $(this).children('.submenu').fadeOut('fast');
});


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

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


//좌우롤링배너
  setInterval(function(){
    $(".slide_box>ul").delay("2500");
    $(".slide_box>ul").animate({marginLeft:"-760px"},"700");
    $(".slide_box>ul").delay("2500");
    $(".slide_box>ul").animate({marginLeft:"-1520px"},"700");
    $(".slide_box>ul").delay("2500").appendTo('.slide_box>ul');
    $(".slide_box>ul").animate({marginLeft:"0"},"700");
    $(".slide_box>ul").delay("2500");
  });

질문과 조언은 언제나 환영입니다~~!

 

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

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

웹디자인기능사 공개도면 B-1 : 대한은행  (0) 2020.05.04
웹디자인기능사 공개도면 C-4 : Vallery Festival  (0) 2020.04.08
웹디자인기능사 공개문제 C-2 : 부여가을연꽃축제  (0) 2020.04.01
웹디자인기능사 공개도면 C-1 : 해운대빛축제  (0) 2020.03.27
웹디자인기능사 공개도면 A-4 : 유진건설  (0) 2020.03.26

관련글

댓글

티스토리툴바