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

웹디자인 기능사 공개문제 B-4 : 산업대학교

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

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

 

드디어 드디어 웹디자인기능사 공개문제를
전부 다 풀어봤네요 ~ 오예오예~!

책보면서, 구글링하면서 만든거라
시험보려면 다시 한 번 복습하고 외워야겠어요...

늘 그렇지만
이미지 출처는 unsplash,
배너 속 들어가는 문구는 제 맘대로 했습니다요

 

 

패밀리사이트 클릭시 아래>위 로 스크롤되는걸로 구현하고싶은데
아무리 찾아도 안나오는 것임니다 ...ㅠㅠ
(시험에는 패밀리사이트 버튼을 만들라고만하지 어떻게 구현하라고는 안되어있음)

이거저거 다 시도한 끝에 제가 찾아낸 방법은
사라지는 부분의 css설정을 margin-top : 음수값으로 주고
제이쿼리는 slideDown으로 하니까 되더라구요 ㅋㅋㅋ 

 

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_box">
        <header>
            <div class="logo">
                <a href="index.html"><img src="img/logo.jpg" alt="산업대학교로고"></a>
            </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>
                            <li><a href="#">자료실</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="menu_bg"></div>
            </nav>
        </header>

        <section id="slide_box">
            <div class="slide">
                <a href="#"><img src="img/slide01.jpg" alt="슬라이드1"></a>
                <a href="#"><img src="img/slide02.jpg" alt="슬라이드2"></a>
                <a href="#"><img src="img/slide03.jpg" alt="슬라이드3"></a>
            </div>

        </section>

        <section id="contents">
            <div class="notice">
                <a href="#">공지사항</a>
                <ul>
                    <li><a class="popup_show">여기를 클릭하면 팝업이 뜹니다.</a><span>20-05-12</span></li>
                    <li><a href="#">2020학년도 1학기 군휴학 신청방법</a><span>20-02-20</span></li>
                    <li><a href="#">2020학년도 온라인 수업 (싸강) 실시 안내</a><span>20-02-15</span></li>
                    <li><a href="#">기술대학교 대상 온라인 채용설명회 안내</a><span>20-01-28</span></li>
                </ul>
            </div>
            <div class="gallery">
                <a href="#">갤러리</a>
                <div>
                    <a href="#"><img src="img/gallery01.jpg" alt="갤러리1"></a>
                    <a href="#"><img src="img/gallery02.jpg" alt="갤러리2"></a>
                    <a href="#"><img src="img/gallery03.jpg" alt="갤러리3"></a>
                </div>
            </div>
            <div class="banner">
                <a href="#"><img src="img/banner.jpg" alt="배너"></a>
            </div>
        </section>

        <footer>
            <div class="footer_left">
                <div class="bottom_menu">
                    <ul>
                        <li><a href="#">개인정보처리방침</a></li>
                        <li><a href="#">인터넷증명발급</a></li>
                        <li><a href="#">정보공개</a></li>
                        <li><a href="#">학칙/규정</a></li>
                        <li><a href="#">총동문회</a></li>
                    </ul>
                </div>
                <div class="copyright">
                    Copyright (c) 2020 CRAFTMAN WEB DESIGN TEST.
                </div>
            </div>
            <div class="family_site">
                <div class="family_list">
                    <b>교외</b>
                    <a href="#" target="_blank">교육부</a>
                    <a href="#" target="_blank">한국교육학술정보원</a>
                    <a href="#" target="_blank">한국장학재단</a>
                    <b>교내</b>
                    <a href="#" target="_blank">교수평의회</a>
                    <a href="#" target="_blank">교직과정</a>
                    <a href="#" target="_blank">예비군연대</a>
                    <a href="#" target="_blank">학생커뮤니티</a>
                </div>
                <div class="family_title">패밀리 사이트 &nbsp;&nbsp;></div>
            </div>
        </footer>

        <div id="popup">
            <div class="popup_box">
                <div class="popup_title">
                    2020학년도 1학기 싸강안내
                </div>
                <div class="popup_letter">
                    본교는 코로나19의 확산 추세 및 심각성을 고려하여<br>
                    2020학년도 1학기 수업 전체를 싸강으로 전환합니다.<br>
                    단, 실험/실습/실기 등 대면이 불가피한 과목의 경우<br>
                    '20. 5. 11. (월)부터 강의실 수업 진행합니다.
                </div>
                <input class="popup_hide" type="button" value="닫 기">
            </div>
        </div>

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

</html>

CSS

@charset 'UTF-8';

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

body{
    background: #ffffff;
}

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

header{
    height: 100px;
}

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

nav{
    float: right;
    margin-right: 40px;
    text-align: center;

}

nav>ul{
    font-size: 0;
}

nav>ul>li{
    display: inline-block;
    vertical-align: top;
    margin-top: 50px;
    width: 150px;
}

nav>ul>li>a{
    display: block;
    height: 50px;
    line-height: 55px;
    font-size: 1.2rem;
    font-weight: 700;
}

nav>ul>li:hover{
    background: midnightblue;
}
nav>ul>li:hover>a{
    color: white;
}

.sub_menu{
    display: none;
    position: absolute;
    top: 100px;
    font-size: 0;
    padding: 10px 0;
    background: midnightblue;
    width: 150px;
    z-index: 11;
}

.sub_menu>li{
        display: block;
    height: 30px;
}
.sub_menu>li>a{
    color: white;
    line-height: 30px;
}
.sub_menu>li:hover{
    background: white;
}
.sub_menu>li:hover>a{
    color: midnightblue;
    font-weight: 700;
}

.menu_bg{
    display: none;
    position: absolute;
    width: 1200px;
    height: 140px;
    background: midnightblue;
    z-index: 10;
    margin-left: -560px;
}

#slide_box{
    position: relative;
    width: 1200px;
    height: 300px;
    overflow: hidden;
    background: green;
    z-index: 1;
}
.slide{
    position: absolute;
    width: 3600px;
    height: 300px;
    font-size: 0;
}
.slide>a{
    display: inline-block;

}
.slide>a>img{
    width: 1200px;
    height: 300px;
}


#contents{
    height: 180px;
    padding: 10px;
}

.notice{
    float: left;
    width: 400px;
    height: 180px;
}
.notice>a{
    display: block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    font-size: 1.2rem;
    font-weight: 800;
    color: white;
    background: midnightblue;
    text-align: center;
}
.notice>ul{
    padding: 10px;
    height: 120px;
    background: midnightblue;
}
.notice>ul>li{
    height: 30px;
    cursor: pointer;
}
.notice>ul>li>a{
    color: white;
    line-height: 30px;
}
.notice>ul>li>span{
    color: white;
    float: right;
    line-height: 30px;
}


.gallery{
    float: left;
    width: 400px;
    height: 180px;
    margin-left: 10px;
}
.gallery>a{
    display: block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    font-size: 1.2rem;
    font-weight: 800;
    color: white;
    background: slategrey;
    text-align: center;
}
.gallery>div{
    display: flex;
    justify-content: space-between;
    width: 380px;
    height: 140px;
    padding: 10px;
    height: 120px;
    background: slategrey;
}
.gallery>div>a{
    cursor: pointer;
    display: block;
    overflow: hidden;
    background: black;
}
.gallery>div>a:hover>img{
    transform: scale(1.2);
    opacity: 0.5;
}


.banner{
    float: right;
    margin-left: 10px;
    width: 360px;
    height: 180px;
    background: palevioletred
}


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

.footer_left{
    float: left;
    width: 900px;
    height: 100%;
}
.bottom_menu{
    height: 50px;
    padding-left: 30px;
    line-height: 50px;
}
.bottom_menu>ul>li{
    margin-right: 20px;
    display: inline-block;
}
.bottom_menu>ul>li>a{
     font-size: 0.9rem;
    color: dimgrey;
}


.copyright{
    height: 50px;
    padding-left: 30px;
    line-height: 50px;
    font-size: 0.9rem;
    color: dimgrey;
}

.family_site{
    float: right;
    display: block;
    margin: 34px 20px;
    width: 130px;
    text-align: left;
}
.family_title{
    display: block;
    width: 120px;
    text-align: center;
    color: white;
    background: midnightblue;
    padding: 5px;
    cursor: pointer;
}
.family_list{
    display: none;
    position: absolute;
    width: 120px;
    height: 200px;
    margin-top: -200px;
    padding: 0 5px;
    background: white;
}
.family_list>a{
    display: block;
    height: 20px;
    font-size: 0.9rem;
    line-height: 1.3;
}
.family_list>b{
    display: block;
    height: 20px;
    font-size: 0.9rem;
    line-height: 1.3;
    margin-top: 5px;
}

#popup{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 20;
}
.popup_box{
    margin: 200px auto;
    width: 400px;
    border: 5px solid slategrey;
    background: white;
}
.popup_title{
    height: 40px;
    padding-left: 10px;
    background: slategrey;
    font-size: 1.3rem;
    line-height: 40px;
    color: white;
    font-weight: 700;
}
.popup_letter{
    padding: 10px;
    line-height: 1.8;
}
.popup_hide{
    padding: 5px 10px;
    background: midnightblue;
    color: white;
    border: none;
    margin: 10px 10px 10px 340px;
    cursor: pointer;
}

JAVA SCRIPT (jQuery)

//패밀리사이트 클릭시 메뉴 토글
$('.family_title').click(function(){
    $('.family_list').stop().slideToggle()
});


//팝업
$('.popup_hide').click(function(){
    $('#popup').hide();
});
$('.popup_show').click(function(){
    $('#popup').show();
});


//메뉴 네비게이션
$('nav>ul>li').hover(function(){
    $('.sub_menu').stop().slideToggle();
    $('.menu_bg').stop().slideToggle();
});


//좌우슬라이드
setInterval(function(){
    $('.slide').delay('2500');
    $('.slide').animate({marginLeft: '-1200px'}, '700');
    $('.slide').delay('2500');
    $('.slide').animate({marginLeft: '-2400px'}, '700');
    $('.slide').delay('2500');
    $('.slide').animate({marginLeft: '0'}, '700');
});

 

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

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

탭메뉴 구현 (공지사항/갤러리)  (0) 2020.05.18
메뉴 네비게이션 만들기 (가로)  (0) 2020.05.18
웹디자인기능사 공개도면 B-3 : 세계의 미술작품  (0) 2020.05.12
웹디자인 기능사 공개도면 B-2 : 대한투어  (0) 2020.05.08
웹디자인기능사 공개도면 B-1 : 대한은행  (0) 2020.05.04

관련글

댓글

티스토리툴바