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

웹디자인기능사 공개도면 B-1 : 대한은행

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

가로형 레이아웃 / 가로 고정형 메뉴 네비게이션 / 좌우롤링배너 / 탭메뉴

만든지는 꽤 됐는데
필기시험 준비하느라 어쩌구 하다보니
이제서야 올리게 됐네요 ㅎㅎ

이번꺼는 이미지 제작에 좀 신경써서..
실제 은행 사이트 느낌나게 해봤습니다 ㅋㅋ

실제 시험에서 이미지 제작을 어떻게 요구하는지
잘 몰라가지구.. 그냥 맘대로 함 ㅋㅋㅋㅋ

팝업은 딱히 쓸 말이 생각 안나서
걍 나비보벳따우 썼음ㅋㅋㅋㅋㅋ

 

 

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="js/jQuery%20JavaScript%20Library%20v3.4.1.js"></script>
</head>

<body>

<div id="popup">
    <div class="popup_title">나비보벳따우</div>
    <div class="popup_text">
    나비보벳따우 봇보벳띠 납비벳 보<br>
    나비보벳따우 봇보벳띠 봅보빗 따운<br>
    나비보벳따우 봅보벳띠 납비벳 뽀<br>
    붯보붹뷧뱍빅보
         
    </div>
    <div class="popup_bottom">
    <input type="button" value="닫기" class="팝업닫기">
    </div>
</div>
   
    <div id="index_wrap">
        <header>
            <div class="logo_box">
                <a href="index.html"><img src="img/logo1.png" alt="대한은행로고"></a>
            </div>
            <nav>
                <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>
                        </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>


        <section id="slide">
            <div id="slide_img_wrap">
                <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">
            <article id="tab_menu">
                <ul>
                    <li><a href="#">공지사항</a></li>
                    <li><a href="#">갤러리</a></li>
                </ul>
                <div class="tab_page">
                    <div class="notice">
                        <ul>
                            <li><a class="팝업열기">여기를 클릭하면 팝업이 뜹니다</a><span>2020-04-13</span></li>
                            <li><a href="#">코로나19 관련 비대면 금융서비스</a><span>2020-04-12</span></li>
                            <li><a href="#">스마트폰 APP출시 이벤트</a><span>2020-04-11</span></li>
                            <li><a href="#">연이율 2%대 적금 마지막 기회!</a><span>2020-04-10</span></li>
                        </ul>
                    </div>
                    <div class="gallery">
                        <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>
            </article>

            <article class="banner">
                <a href="#"><img src="img/banner.jpg" alt="배너"></a>
            </article>
            <article class="direct">
                <a href="#"><img src="img/direct.jpg" alt="바로가기"></a>
            </article>
        </section>


        <footer>
            <div class="logo_bottom">
                <a href="index.html"><img src="img/logo2.png" alt="하단로고"></a>
            </div>
            <div class="footer_right">
                <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>
                        <li><a href="#">채용정보</a></li>
                    </ul>
                </div>
                <div class="copyright">
                    © 2016 Craftman Web Design Test.
                </div>
            </div>
        </footer>

    </div>


    <!-----자바스크립트----->
    <script type="text/javascript" src="js/DHBscript.js"></script>
</body>

</html>

css

@charset "UTF8";

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

body{
    background: #ffffff;
}

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

/***-----헤더시작-----***/
header{
    width: 100%;
    height: 100px;
}

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

nav{
    float: right;
    margin-right: 50px;
    margin-top: 28px;
    text-align: center;
}
nav>ul{
    display: inline;
    font-size: 0;
}
nav>ul>li{
    display: inline-block;
    background: dimgrey;
}
nav>ul>li>a{
    display: block;
    width: 180px;
    height: 40px;
    line-height: 2.6rem;
    font-size: 1.2rem;
    color: white;
}
.submenu{
    display: none;
    position: absolute;
    height: 150px;
    padding: 15px 0;
    background: rgba(255,255,255,0.9)
}
.submenu>li{
    width: 180px;
    height: 20px;
    padding: 5px 0;
}
.submenu>li>a{
    display: block;
}
nav>ul>li:hover>a{
    background: grey;
}
.submenu>li:hover{
    background: rgba(0,118,190,0.2);
}
.submenu>li:hover>a{
    color: #0076BE;
    text-decoration: underline;
}
/***-----헤더끝-----***/

/***-----슬라이드시작-----***/
#slide{
    width: 1200px;
    height: 298px;
    overflow: hidden;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
}
#slide_img_wrap{
    width: 3600px;
    height: 300px;
    font-size: 0;
}
/***-----슬라이드끝-----***/

/***-----컨텐츠시작-----***/
#contents{
    width: 1200px;
    height: 200px;
    background: rgba(0,0,0,0.1);
}
/*-----------탭메뉴시작-----------*/
#tab_menu{
    float: left;
    width: 560px;
    height: 180px;
    padding: 10px;
}
#tab_menu>ul{
    font-size: 0;
}
#tab_menu>ul>li{
    display: inline-block;
}
#tab_menu>ul>li>a{
    display: block;
    height: 18px;
    padding: 8px 20px;
    background: silver;
}
#tab_menu>ul>li:first-child>a{
    color: #E66B27;
    text-decoration: underline;
    background: white;
}
.tab_page{
    position: relative;
    width: 540px;
    height: 125px;
    padding: 10px;
    background: white;
}

.notice{
    display: contents;
    position: absolute;
    padding: 0 10px;
}
.notice>ul>li{
    display: block;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}
.notice>ul>li>a{
    float: left;
    color: grey;
}
.notice>ul>li>span{
    float: right;
    color: grey;
}
.notice>ul>li:hover>a{
    text-decoration: underline;
}

.gallery{
    display: none;
    position: absolute;
    top: 10px;
}
.gallery>ul{
    width: 540px;
    display: flex;
    justify-content: space-between;
}
.gallery>ul>li{
    display: inline-block;
    overflow: hidden;
    background: black;
    width: 175px;
    height: 125px;
}
.gallery>ul>li>a>img{
    width: 175px;
    height: 125px;
}
.gallery>ul>li:hover>a>img{
    opacity: 0.7;
    transform: scale(1.2);
}
/*-----------탭메뉴끝-----------*/

.banner{
    float: left;
    width: 360px;
    height: 180px;
    padding: 10px;
    }
.banner img{
    height: 180px;
}
.direct{
    float: right;
    width: 220px;
    height: 180px;
    padding: 10px;
}
.direct img{
    height: 180px;
}
    
/***-----컨텐츠끝-----***/

/***-----푸터시작-----***/
footer{
    width: 1200px;
    height: 100px;
    background: dimgrey;
}
.logo_bottom{
    float: left;
    width: 200px;
    height: 40px;
    padding: 30px;
}
.footer_right{
    float: right;
    width: 940px;
    height: 100px;
}
.bottom_menu{
    height: 20px;
    padding: 15px;
    text-align: center;
}
.bottom_menu>ul>li{
    display: inline-block;
    margin-right: 20px;
}
.bottom_menu>ul>li>a{
    color: silver;
}
.bottom_menu>ul>li:hover>a{
    color: white;
}

.copyright{
    height: 20px;
    padding: 15px;
    color: silver;
    text-align: center;
}
/***-----푸터끝-----***/

/***-----팝업시작-----***/
#popup{
    display: none;
    position: absolute;
    width: 400px;
    height: 280px;
    border: 5px solid #E66B27;
    background: white;
    top: 150px;
    left: 700px;
    z-index: 3;
}
.popup_title{
    height: 30px;
    color: white;
    font-size: 16pt;
    padding: 5px;
    background: #E66B27;
}
.popup_text{
    padding: 10px;
    height: 180px;
    line-height: 30px;
}
.팝업닫기{
    float: right;
    padding: 3px 10px;
    margin-right: 10px;
    cursor: pointer;
}
/***-----팝업끝-----***/

java scripts

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

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

//탭메뉴
$('#tab_menu>ul>li:first-child').click(function () {
    $('.notice').show(); //notice나타나기
    $('.gallery').css('display', 'none'); //gallery 숨기기

    $('#tab_menu>ul>li:first-child>a').css({
        'background': 'white',
        'text-decoration': 'underline',
        'color' : '#E66B27'
    });
    $('#tab_menu>ul>li:last-child>a').css({
        'background': 'silver',
        'text-decoration': 'none',
        'color' : '#333333'
    });
});

$('#tab_menu>ul>li:last-child').click(function () {
    $('.notice').css('display', 'none');
    $('.gallery').show();

    $('#tab_menu>ul>li:last-child>a').css({
        'background': 'white',
        'text-decoration': 'underline',
        'color' : '#E66B27'
    });
    $('#tab_menu>ul>li:first-child>a').css({
        'background': 'silver',
        'text-decoration': 'none',
        'color' : '#333333'
    });
});


//메뉴네비게이션
$('nav').hover(function(){
   $('.submenu').slideToggle() 
});


//좌우롤링배너
start();
var imgs = $('#slide_img_wrap img').length;
var now = 0;
var width = 1200;

function start(){
    $('#slide_img_wrap>img')
        .eq(0).siblings().css('margin-left',-width*now+"px");
    setInterval(function(){slide();},2000);
};

function slide(){
    now = now == imgs ? 0 : now += 1;
    $('#slide_img_wrap>img:first-child')
        .eq(now-1).animate({marginLeft:-width*now+"px"},300); 
    $('#slide_img_wrap>img:first-child')
        .eq(now-2).animate({marginLeft:-width*now+"px"},300);   
    $('#slide_img_wrap>img:first-child')
        .eq(now).css('margin-left','0px');
};

 

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

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

웹디자인기능사 공개도면 B-3 : 세계의 미술작품  (0) 2020.05.12
웹디자인 기능사 공개도면 B-2 : 대한투어  (0) 2020.05.08
웹디자인기능사 공개도면 C-4 : Vallery Festival  (0) 2020.04.08
웹디자인기능사 공개도면 C-3 : 남도맛기행축제  (2) 2020.04.03
웹디자인기능사 공개문제 C-2 : 부여가을연꽃축제  (0) 2020.04.01

관련글

댓글

티스토리툴바