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

웹디자인기능사 공개문제 C-2 : 부여가을연꽃축제

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

 

세로형 레이아웃은 정말.. 어떻게 조합을 해도 구린 것 같아요 ㅋㅋㅋㅋㅋㅋ
메뉴 네비게이션 부분을 이 색깔 저 색깔 써보고 테두리를 줬다 뺐다... 해봤자 부질없습니다... 뭘 해도 구림... ㅋㅋㅋㅋㅋㅋ

글씨 색상하고 전체 배경색만 설정되어있어서
대충 연꽃 색상에 맞춰서 녹색과 분홍색 계열로 색조합을 해봤는데

음~ 구려. ㅋㅋㅋㅋ

 

공지사항 내용은 제가 아무말이나 쓴겁니당. (부여 연꽃축제 홈페이지 공지사항 내용 쪼매 베낌)

 

바로가기 배너는 .. 생각보다 공지사항이랑 갤러리가 자리차지를 많이 해버려서.. 만들다보니 짜부됨 ㅎㅎ;;;

다시 만들자니 귀찮!

 

이미지는 unsplash에서, 아이콘은 iconmonstr에서 따왔습니다 :)

 

HTML

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

<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">

        <div id="left_box">
            <div class="logo_box">
                <a href="#"><img src="img/festival_logo.png" alt="가을연꽃축제로고"></a>
            </div>
            <div class="navi_box">
                <ul>
                    <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">
                            <li><a href="#">축제소식</a></li>
                            <li><a href="#">보도자료</a></li>
                            <li><a href="#">음식레시피</a></li>
                            <li></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></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>


        <div id="right_box">
            <div class="slide_box">
                <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 class="contents_box">
                <div class="notice">
                    <div class="notice_title"><a href="#">공지사항</a></div>
                    <div class="notice_list">
                        <ul>
                            <li><a class="팝업열기">우천으로 인한 공연취소 및 연기</a><span>08-20</span></li>
                            <li><a href="#">2020 가을연꽃축제 최종 리플릿</a><span>08-15</span></li>
                            <li><a href="#">청소년 서동요 합창대회 최종선발</a><span>07-20</span></li>
                            <li><a href="#">야간 연꽃 레이져쇼 공연 안내</a><span>07-18</span></li>
                        </ul>
                    </div>
                </div>
                <div class="gallery">
                    <div class="gallery_title"><a href="#">갤러리</a></div>
                    <div class="gallery_list">
                        <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>
                <div class="direct">
                    <a href="#"><img src="img/direct.jpg" alt="바로가기"></a>
                </div>
            </div>
            <div class="footer_box">
                <div class="copyright">Copyright © 웹디자인기능사. ALL RIGHT RESERVED.</div>
                <div class="footer_right">
                    <div class="sns">
                        <ul>
                            <li><a href="#"><img src="img/sns01.png" alt="SNS1"></a></li>
                            <li><a href="#"><img src="img/sns02.png" alt="SNS2"></a></li>
                            <li><a href="#"><img src="img/sns03.png" alt="SNS3"></a></li>
                        </ul>
                    </div>
                    <div class="family">
                        <div class="familysite">
                            <div><a>패밀리사이트</a><span>▼</span></div>
                            <ul>
                                <li><a target="_blank" href="http://www.buyeo.go.kr">부여군청</a></li>
                                <li><a target="_blank" href="http://www.chungnam.go.kr">충청남도</a></li>
                                <li><a target="_blank" href="http://kto.visitkorea.or.kr">부여군청</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div id="modal_popup">
        <div class="popup_box">
            <div>우천으로 인한 공연취소 및 연기</div>
            <div class="popup_top">
                9월 5일자 공연을 우천으로 인해 다음과 같이 연기합니다.<br><br>
                9.5.(토) 청소년 서동요 합창대회 → 9.6.(일)<br>
                9.5.(토) 야간 연꽃 레이저쇼 → 취소<br>
                * 본 행사는 기상상황에 따라 변경될 수 있습니다.<br><br>
                공연을 보러 와주신 방문객 여러분께 죄송하다는 말씀 전해드립니다.<br>
            </div>
            <div class="popup_bottom"> <input type="button" class="팝업닫기" value="닫 기"></div>
        </div>
    </div>

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

</body>


</html>

CSS

@charset "UTF-8";

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

body {
    background: ffffff;
}

#index_box {
    width: 1000px;
    height: 650px;
}

/****왼쪽박스시작****/
#left_box {
    float: left;
    width: 240px;
    height: 100%;
    background-color: mistyrose;
}

.logo_box > a > img {
    width: 200px;
    height: 40px;
    margin: 20px;
}

/*---내비시작---*/
.navi_box {
    width: 200px;
    text-align: center;
    margin: 20px;
    background: white;
    border: 1px solid silver;
    border-bottom: none;
}

.navi_box > ul > li > a {
    display: block;
    height: 36px;
    font-size: 1.2rem;
    letter-spacing: 5px;
    line-height: 30pt;
    border-bottom: 1px solid silver;
}

.submenu {
    display: none;
    width: 200px;
    height: auto;
    padding: 10px 0;
    border-bottom: 1px solid silver;
}

.submenu > li > a {
    display: block;
    height: 30px;
    line-height: 25pt;
    letter-spacing: 2px;
    color: dimgrey;
}

.navi_box > ul > li:hover > a {
    background-color: seagreen;
    color: white;
}

.submenu > li:hover > a {
    color: hotpink;
    text-decoration: underline;
}

/*---내비끝---*/
/****왼쪽박스끝****/



/****우측박스시작****/
#right_box {
    float: right;
    width: 760px;
    height: 100%;
}

/*---슬라이드시작---*/
.slide_box {
    width: 100%;
    height: 350px;
}

.slide_box > ul {
    position: relative;
}

.slide_box > ul > li {
    position: absolute;
}

/*---슬라이드끝---*/

/*---컨텐츠시작---*/
.contents_box {
    width: 100%;
    height: 200px;
}


.notice {
    float: left;
    width: 250px;
    height: 180px;
    padding: 10px;
    background-color: darkseagreen
}

.notice_title > a {
    display: block;
    width: 70px;
    height: 18px;
    text-align: center;
    padding: 5px;
    color: white;
    background: seagreen;
}

.notice_list {
    width: 230px;
    height: 130px;
    padding: 10px;
    background: white;
    ;
}

.notice_list > ul > li > a {
    float: left;
    font-size: 0.8rem;
    line-height: 33px;
    color: grey;
}

.notice_list > ul > li > span {
    float: right;
    font-size: 0.8rem;
    line-height: 33px;
    color: darkgrey;
}

.notice_list > ul > li:hover > a {
    color: #222328;
    font-weight: bold;
}

.gallery {
    float: left;
    width: 250px;
    height: 180px;
    padding: 10px;
    background-color: pink;
}

.gallery_title > a {
    display: block;
    width: 70px;
    height: 18px;
    text-align: center;
    padding: 5px;
    color: white;
    background: hotpink;
}

.gallery_list {
    width: 230px;
    height: 74px;
    padding: 38px 10px;
    background: white;
}

.gallery_list > ul {
    display: flex;
    justify-content: space-between;
}

.gallery_list > ul > li {
    overflow: hidden;
    height: 72px;
}

.gallery_list > ul > li > a > img {
    width: 72px;
}

.gallery_list > ul > li:hover > a > img {
    opacity: 0.7;
    transform: scale(1.1)
}

.direct {
    float: right;
    width: 220px;
    height: 200px;
    background: black;
}

.direct > a > img {
    width: 220px;
    height: 200px;
}

.direct > a:hover > img {
    opacity: 0.7;
}

/*---컨텐츠끝---*/

/*---푸터시작---*/
.footer_box {
    width: 100%;
    height: 100px;
    background: dimgrey;
}

.copyright {
    float: left;
    width: 550px;
    height: 25px;
    padding: 35px 0;
    text-align: center;
    font-size: 0.9rem;
    color: silver;
}

.footer_right {
    float: right;
    width: 210px;
    height: 100px;
    font-size: 0;
    margin: 0;
}

.sns {
    width: 130px;
    height: 35px;
    padding: 15px 40px 5px;
}

.sns > ul {
    display: flex;
    justify-content: space-between;
}

.sns > ul > li > a > img {
    width: 30px;
}

.sns > ul > li:hover {
    opacity: 0.8;
}

.family {
    padding-left: 40px;
}

.familysite {
    width: 130px;
    padding: 3px 5px;
    background: white;
    border: 1px solid black;
}

.familysite > div{
    height: 20px;
    cursor: pointer;
}
.familysite > div > a {
    float: left;
    font-size: 0.9rem;
    line-height: 20px;
}
.familysite > div > span {
    float: right;
    font-size: 0.9rem;
    line-height: 20px;
}
.familysite > ul{
    display: none;
    border-top: 1px solid silver;
    padding: 5px 0;
}
.familysite > ul > li > a {
    font-size: 0.9rem;
    width: 130px;
}
.familysite > ul > li:hover{
    background: darkseagreen;
    cursor: pointer;
}
/*---푸터끝---*/
/****우측박스끝****/

/****모달팝업시작****/
#modal_popup {
    display: none;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5)
}

.popup_box {
    position: absolute;
    width: 500px;
    height: 250px;
    background: white;
    border: 5px solid hotpink;
    top: 100px;
    left: 200px;
}

.popup_box div:first-child {
    width: 500px;
    height: 26px;
    color: white;
    font-size: 1.1rem;
    background: hotpink;
}

.popup_top {
    padding: 10px;
    line-height: 23px;
    font-size: 0.9rem;
}

.팝업닫기 {
    float: right;
    padding: 5px 20px;
    margin-right: 10px;
    border: none;
    color: white;
    background: dimgrey;

}

.팝업열기 {
    cursor: pointer;
}

/****모달팝업끝****/

JavaScript (JQuery)

//메뉴네비게이션
$('.navi_box>ul>li').hover(function () {
    $(this).children('.submenu').stop().slideToggle();
});


//이미지 슬라이드
$('.slide_box>ul>li').hide();
$('.slide_box>ul>li:first-child').show();

setInterval(function () {
    $('.slide_box>ul>li:first').fadeOut(1000)
        .next().fadeIn().end(1000)
        .appendTo('.slide_box>ul');
}, 3000);


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

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


//패밀리사이트
$('.familysite>div').click(function () {
    if ($('.familysite>ul').css('display') == 'none') {
        $('.familysite>ul').stop().slideDown('slow');
        $('.familysite>div>span').text('▲');
    } else {
        $('.familysite>ul').stop().slideUp('slow');
        $('.familysite>div>span').text('▼');
    }
});

 

패밀리사이트 구현에 있어서 ..
처음에 select - option 태그로 만들었는데,
문제는 option 값 클릭시 새창으로 value에 쓴 주소 띄우기가 안되더라구요? ㅋㅋㅋ
select 에다가  onChange="javascript:window.open(value,'_self');" 를 넣어주면 해결되긴 하는데,
자바 스크립트를 별도 파일에다가 입력해서 넣으려니까 어떤 구문을 써서 넣어야할지 모르겠어서.. ㅠㅠ

걍 div > ul > li 형식으로 다시 만들어서 클릭시 내용이 slide 될 수 있도록 변경했습니다. 

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

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

웹디자인기능사 공개도면 C-4 : Vallery Festival  (0) 2020.04.08
웹디자인기능사 공개도면 C-3 : 남도맛기행축제  (2) 2020.04.03
웹디자인기능사 공개도면 C-1 : 해운대빛축제  (0) 2020.03.27
웹디자인기능사 공개도면 A-4 : 유진건설  (0) 2020.03.26
웹디자인기능사 공개도면 A-3 : 강원천문대  (1) 2020.03.25

관련글

댓글

티스토리툴바