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

웹디자인기능사 공개도면 C-4 : Vallery Festival

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

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

 

지산밸리락페스티벌의 짝퉁, 발레리 페스티벌입니닼ㅋㅋㅋㅋ

이번엔 색조합을 좀 세련되게 해보려고 노력했는데..
저 레이아웃엔 뭘 해도 촌스럽! ㅋㅋㅋㅋㅋ

패밀리사이트 부분을 클릭하면 슬라이드업되게 하고싶었는데
응 귀찮아... 그냥 mouseenter/mouseleave로 해결함..ㅋㅋ

 

메인배너는 아티스트 이름으로 넣었는데
뭐 대충 ... 맘대로 만듦 ^^;;

(사진자료는 다 unsplash에서 받음)

 

HTML

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

<head>
    <meta charset="UTF-8">
    <title>Vallery Festival</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="modal_popup">
        <div class="popup_box">
            <div class="popup_title">아프리카 돼지열병 관련 축제 취소</div>
            <div class="popup_text">
                작년(2019년) 아프리카 돼지열병때문에<br>
                락페스티벌이 죄다 줄줄이 취소가 되어가지고<br>
                내 돈 굳었다~<br><br>
                올해(2020년) 코로나19때문에<br>
                공연들이 줄줄이 취소가 되었다 ㅠㅠ<br>
                2020년에는 락페에 갈 수 있을까?!
            </div>
            <div class="popup_bottom">
                <input class="팝업닫기" type="button" value="닫기">
            </div>
        </div>
    </div>

    <header>
        <div id="logo_top">
            <a href="index.html"><img src="img/logo01.png" alt="발레리페스티벌로고"></a>
        </div>
        <nav>
            <ul>
                <li>
                    <a href="#">축제소개</a>
                    <ul class="submenu">
                        <li><a href="#">Festival소개</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>
                        <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>
            </ul>
        </nav>
    </header>

    <div id="right_box">
        <section 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>
        </section>

        <section id="contents">
            <article id="notice">
                <div>공지사항</div>
                <ul>
                    <li><a class="팝업열기">여기를 누르면 팝업이 뜹니다.</a><span>20-04-03</span></li>
                    <li><a href="#">확실히 영문폰트가 깔끔한 듯</a><span>20-04-02</span></li>
                    <li><a href="#">락페에서 텐트를 친다는 것은?</a><span>20-04-01</span></li>
                    <li><a href="#">내년에 그린데이 내한공연 함</a><span>20-03-31</span></li>
                </ul>
            </article>
            <article id="gallery">
                <div>갤러리</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>
            </article>
            <article id="direct_link">
                <a href="#"><img src="img/direct.jpg" alt="바로가기"></a>
            </article>
        </section>

        <footer>
            <div class="logo_bottom"><a href="index.html"><img src="img/logo02.png" alt="발레리페스티벌로고2"></a></div>
            <small>Copyright &copy; 2020 웹디자인기능사</small>
            <div class="family">
                <div class="family_select">
                    <div><a href="#">패밀리사이트</a><span>▼</span></div>
                    <ul>
                        <li><a href="#">A사이트</a></li>
                        <li><a href="#">B사이트</a></li>
                    </ul>
                </div>
            </div>
        </footer>
    </div>

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

</html>

CSS

@charset "UTF-8";

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

body{
    background: #ffffff;
}

/*--------------------*/
#modal_popup{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 3;    
}
.popup_box{
    margin: 100px 250px 0;
    width: 350px;
    height: 300px;
    border: 5px solid orangered;
    background: white;
}
.popup_title{
    height: 30px;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 22pt;
    color: white;
    background: orangered;
}
.popup_text{
    height: 210px;
    padding: 10px;
    line-height: 180%;
}
.팝업닫기{
    float: right;
    margin-right: 10px;
    padding: 5px 20px;
    color: white;
    background: dimgrey;
    border: none;
    cursor: pointer;
}
.팝업닫기:active{
    border: 1px solid orangered;
}
.팝업열기{
    cursor: pointer;
}
/*--------------------*/

/*--------------------*/
header{
    float: left;
    width: 200px;
    height: 650px;
    background: #222328;
}
#logo_top{
    height: 50px;
    padding: 20px;
}
nav{
    width: 150px;
    margin: 20px auto 0;
    text-align: center;
    border-bottom: 1px solid grey;  
}
nav>ul>li>a{
    display: block;
    height: 30px;
    line-height: 30px;
    letter-spacing: 5px;
    color: silver;
    border-top: 1px solid grey;     
}
.submenu{
    display: none;
    position: absolute;
    left: 175px;
    top: 110px;
    width: 120px;
    height: 124px;
    background: orangered;
    border-top: 1px solid grey;  
}
.submenu>li>a{
    display: block;
    height: 31px;
    color: #222328;
    font-size: 0.9rem;
    line-height: 31px;
}
nav>ul>li:hover>a{
    color: white;
    background: orangered;
}
.submenu>li:hover>a{
    color: white;
}
/*--------------------*/

/*--------------------*/
#right_box{
    float:left;
    width: 800px;
    height: 650px;
}
/*--------------------*/

/*--------------------*/
#slide{
    height: 350px;
    overflow: hidden;
}
#slide>ul{
    display: block;;
    width: 2400px;
    font-size: 0;
}
#slide>ul>li{
    display: inline-block;
}
/*--------------------*/

/*--------------------*/
#contents{
    height: 200px;
}
/*--------------------*/
#notice{
    float: left;
    width: 280px;
    padding: 10px;
}
#notice>div{
    width: 90px;
    height: 30px;
    font-weight: 700;
    text-align: center;
    line-height: 30px;
    letter-spacing: 2px;
    color: white;
    background: orangered;
}
#notice>ul{
    width: 258px;
    height: 130px;
    padding: 8px 10px;
    background: white;
    border: 1px solid orangered;
}
#notice>ul>li{
    height: 32px;
}
#notice>ul>li>a{
    float: left;
    display: block;
    color: dimgrey;
    font-size: 0.85rem;
    line-height: 32px;
}
#notice>ul>li>span{
    float: right;
    display: block;
    color: dimgrey;
    font-size: 0.85rem;
    line-height: 32px;
}
#notice>ul>li:hover>a{
    color: #222328;
    font-weight: 800;
}

/*--------------------*/

#gallery{
    float: left;
    width: 300px;
    padding: 10px 0;
}
#gallery>div{
    width: 90px;
    height: 30px;
    font-weight: 700;
    text-align: center;
    line-height: 30px;
    letter-spacing: 2px;
    color: white;
    background: orangered;
}
#gallery>ul{
    display: flex;
    justify-content: space-between;
    width: 278px;
    height: 86px;
    padding: 30px 10px;
    background: white;
    border: 1px solid orangered;
}
#gallery>ul>li{
    display: block;
    overflow: hidden;
    background: black;
}
#gallery>ul>li:hover>a>img{
    opacity: 0.7;
    transform: scale(1.2);
}
/*--------------------*/
#direct_link{
    float: right;
    width: 180px;
    height: 180px;
    padding: 10px;
}
/*--------------------*/

/*--------------------*/
footer{
    height: 100px;
    background: rgb(80,80,80)
}
.logo_bottom{
    float: left;
    width: 200px;
    height: 100px;
}
.logo_bottom>a{
    display: block;
    margin: 24px;
}
small{
    float: left;
    display: block;
    width: 400px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 0.9rem;
    color: grey;
}
.family{
    float: right;
    width: 200px;
    height: 100px;
}
.family_select{
    margin: 10px 31px 0;
    width: 130px;
    padding: 3px;
    background: white;
    border: 1px solid dimgrey;
}
.family_select>div{
    height: 18px;
}
.family_select>div>a{
    float: left;
}
.family_select>div>span{
    float: right;
}
.family_select>ul{
    display: none;
    border-top: 1px solid silver;
    margin: 5px 0;
}
.family_select>ul>li{
    display: block;
    height: 30px;
    line-height: 32px;
}
.family_select>ul>li:hover>a{
    color: salmon;
}
/*--------------------*/

JAVA SCRIPT

//메뉴네비게이션
$('nav>ul>li').mouseenter(function(){
$(this).children('.submenu').fadeIn();
});

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


//좌우롤링배너
setInterval(function(){
    $('#slide>ul').delay("2500")
    $('#slide>ul').animate({marginLeft:"-800px"},"700");
    $('#slide>ul').delay("2500");
    $('#slide>ul').animate({marginLeft:"-1600px"},"700");
    $('#slide>ul').delay("2500");
    $('#slide>ul').animate({marginLeft:"0px"},"700");
});

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


//패밀리사이트
$('.family_select').mouseenter(function(){
    $('.family_select>div>span').text('▲');
   $('.family_select>ul').slideDown(); 
});

$('.family_select').mouseleave(function(){
    $('.family_select>div>span').text('▼');
   $('.family_select>ul').slideUp(); 
});

 

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

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

웹디자인 기능사 공개도면 B-2 : 대한투어  (0) 2020.05.08
웹디자인기능사 공개도면 B-1 : 대한은행  (0) 2020.05.04
웹디자인기능사 공개도면 C-3 : 남도맛기행축제  (2) 2020.04.03
웹디자인기능사 공개문제 C-2 : 부여가을연꽃축제  (0) 2020.04.01
웹디자인기능사 공개도면 C-1 : 해운대빛축제  (0) 2020.03.27

관련글

댓글

티스토리툴바