본문 바로가기
Project

[웹디자인 기능사 실기] 기출문제(2)

by Foxy현 2022. 8. 9.
728x90
반응형

안녕하세요! 두번째 웹디자인 기능사 기출문제 풀이입니다!

오늘 만들 사이트의 결과물입니다.

자! 그럼 오늘도 빡코딩~~

제작 과정에서 오류가 많이 생겨 불완성된 코드 설명 미리 양해부탁드립니다

먼저 HTML에서 전체 구조를 만들어주고, CSS 초기화부터 해줄게요!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>코리아은행</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="wrap">
            <div class="logo">로고</div>
            <nav class="menu">메뉴</nav>
        </div>
    </header>

    <div class="bodywrap">
        <div class="imgslide">이미지 슬라이드</div>
        <div class="contents">
            <ul class="tabmenu">
                <li><div class="notice">공지사항</div></li>
                <li><div class="gallery">갤러리</div></li>
            </ul>

            <div class="otherwrap">
                <div class="banner">배너</div>
                <div class="shortcut">바로가기</div>
            </div>
        </div>
    </div>

    <footer>
        <div class="wrap">
            <div class="btlogo">바텀로고</div>
            <div class="site">
                <div class="btmenu">바텀메뉴</div>
                <div class="copy">copyright</div>
            </div>
        </div>
    </footer>
</body>
</html>
@charset "UTF-8";

*{
    margin: 0 auto;
    padding: 0;
    list-style: none;
    font-family: "맑은 고딕";
    color: #333333;
}

html,body{
    min-width: 1200px;
    background-color: #ffffff;
    font-size: 20px;
}

a{
    text-decoration: none;
    display: block;
}

저는 보통 이렇게 필요한 html 구조를 제일 먼저 만들어줍니다.

이렇게 하면 중간에 해야할 부분을 빠뜨리는 실수를 예방해줄 수 있을 것 같네요!

이제 다음으로 주어진 조건에 맞게 레이아웃의 각 영역의 크기를 정하고 박스 요소들을 정렬합니다.

눈에 보기 쉽게 색을 각각 다르게해서 영역을 표현해봅니다.

/* header */
header {
    width: 100%;height: 100px;
    background: #dddddd;
}

.wrap {width: 1200px;}

/* body */
.bodywrap {width: 1200px;height: 500px;}

.imgslide {
    width: 1200px;height: 300px;
    background: lightcyan;
}

.contents {float: left;
    width: 1200px;height: 200px;
    background: pink;
}

/* footer */
footer {
    width: 100%;
    height: 100px;
    background-color: aquamarine;
}

이제 로고와 메뉴 부분, 나머지 부분도 색으로 구분해줄게요.

/* header */
header {
    width: 100%;height: 100px;
    background: #dddddd;
}

.wrap {width: 1200px;}

.logo{
    float: left;
    width: 250px;height: 100px;
    background: gray;
}
.menu{
    float: right;
    width: 850px;height: 100px;
}
/* 남은 width=100px */

/* body */
.bodywrap {width: 1200px;height: 500px;}

.imgslide {
    width: 1200px;height: 300px;
    background: lightcyan;
}

.contents {float: left;
    width: 1200px;height: 200px;
    background: pink;
}
.tabmenu{
    float: left;
    width: 400px;height: 200px;
    background: yellow;
}
.otherwrap{
    float: right;
    width: 800px;height: 200px;
}
.banner{
    float: left;
    width: 400px;height: 200px;
    background: orange;
}
.shortcut{
    float: right;
    width: 400px;height: 200px;
    background: yellowgreen;
}
/* footer */
footer {
    width: 100%;
    height: 100px;
    background-color: aquamarine;
}
.btlogo{
    float: left;
    width: 250px;height: 100px;
    background: blue;
}
.site{
    float: right;
    width: 600px;height: 100px;
    background: skyblue;
}
.btmenu{
    width: 600px;height: 50px;
    background: green;
}
.copy{
    width: 600px;height: 50px;
    background: peru;
}

색칠놀이 하는 기분이네요...생각나는 색이 없어서 아무 색이나 넣어줬습니다. ㅋㅋㅋ 이렇게 해주면 레이아웃 크기 및 배열된 상태를 잘 확인할 수 있겠죠? 흰색 보다는 확실히 구별하기 쉽습니다.

로고를 넣어주겠습니다.

먼저 제공되는 이미지 파일을 열고,

이미지 -> 조정 -> 색조/채도 탭을 열어서 색조를 -180으로 해주겠습니다.

또한 로고 크기를 조정합니다.

이미지 -> 이미지 크기에 들어가서 위에 css에서 기입한 크기에 맞게 로고 크기를 제작합니다.

 

이제 code에 넣어줄게요!

<div class="logo">
       <a href="#"><img src="img/logo.png" alt="로고"></a>
</div>

크기에 맞게 잘 들어갔죠?

메뉴 부분을 요구사항에 맞게 맞춰줄게요.

먼저 side menu에 들어갈 문구를 만들어줍니다.

<div class="wrap">
            <div class="logo">
                <a href="#"><img src="img/logo.png" alt="로고"></a>
            </div>
            <nav class="menu">
                <ul class="navi">
                    <!-- menu1 -->
                    <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>
                    <!-- menu2 -->
                    <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>
                    <!-- menu3 -->
                    <li><a href="#">금융상품</a>
                        <ul class="submenu">
                            <li><a href="#">저축상품</a></li>
                            <li><a href="#">대출상품</a></li>
                            <li><a href="#">투자상품</a></li>
                        </ul>
                    </li>
                    <!-- menu4 -->
                    <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>
</div>

.menu가 side menu 보다 위에 있게 z-index를 조정해줍니다.

.menu{
    float: right;
    width: 850px;height: 100px;
    z-index: ;
}

다음 side menu를 위한 css를 지정해주자.

.navi{
    float: right;
    margin-top: 30px;
    margin-right: 10px;
}   
.navi>li{
    float: left;
}
.navi>li>a{
    width: 180x;height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-color: #333333;
    color: #ffffff;
}
.navi>li>a:hover{
    background-color: #30a3f3;
}

z-index가 1인 menu 부분에 대한 css 내용이며, 마우스를 올릴 시 색이 변하는 옵션(hover)을 지정해줍니다.

.navi{
    float: right;
    margin-top: 30px;
    margin-right: 10px;
}   
.navi>li{
    float: left;
}
.navi>li>a{
    width: 180px;height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background-color: #333333;
    color: #ffffff;
}
.navi>li>a:hover{
    background-color: #30a3f3;
}

.submenu{
    width: 180px;height: 160px;
    position: absolute;
    z-index: 1;
    background: #ffffff;
}
.submenu>li>a{
    width: 180px;height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background: #ffffff;
    color: #333333;
}
.submenu>li>a:hover{
    background-color: #30a3f3;
}

submenu 는 코드가 완성된 이후 display:none을 지워서 확인합니다.

javascript를 사용하여 submenu를 감춰줍니다.

<script src="js/jquery-1.12.3.js"></script>
<script src="js/script.js" defer type="text/javascript"></script>

제공 받는 파일을 삽입해주고, 생성한 script파일 경로를 적어줍니다.

jQuery(document).ready(function(){
    $('.navi>li').mouseover(function(){
        $('.submenu').stop().slideDown(500);
    }).mouseout(function(){
        $('.submenu').stop().slideUp(500);
    });
});

자! 이렇게해서 menu도 완성하여 header 부분은 완성됐네요!

<div class="imgslide">
            <div class="slidelist">
                <ul>
                    <li>
                    <a href="#">
                    <span>대표 은행, 코리아 은행</span>
                    <img src="img/img1.jpg" alt="img1">
                    </a>
                    </li>
                    <li><a href="#">
                    <span>차원이 다른 코리아 은행</span>
                    <img src="img/img2.jpg" alt="img2">
                    </a>
                    </li>
                    <li>
                    <a href="#">
                    <span>더욱 쉬운 오픈뱅킹 서비스</span>
                    <img src="img/img3.jpg" alt="img3">
                    </a>
                    </li>
             </ul>
      </div>
</div>

3개의 이미지가 번갈아 나오도록 이미지를 넣어줍니다.

.imgslide {
    width: 1200px;height: 300px; 
    position: relative;
    overflow: hidden;
}
.slidelist{
    width: 3600px;
}
.slidelist ul li{
    width: 1200px;
    float: left;
}
.slidelist span{
    width: 500px;height: 50px;
    position: absolute;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    line-height: 50px;
    background-color: rgba(40,40,40,0.5);
    margin-left: 350px;
    margin-top: 125px;
}
  • width = 3600px => 1200px인 이미지 세 개를 일렬로 나열하면 3600px
setInterval(function(){
        $('.slidelist').delay(2000);
        $('.slidelist').animate({marginLeft:-1200});
        $('.slidelist').delay(2000);
        $('.slidelist').animate({marginLeft:-2400});
        $('.slidelist').delay(2000);
        $('.slidelist').animate({marginLeft:0});
        $('.slidelist').delay(2000);
    });
  • 2초마다 반복적으로 동작을 수행
  • marginLeft = 왼쪽으로 밀려서 이동

이미지 슬라이드 부분을 완성했으니, 이제 다음 3개의 콘텐츠 부분입니다.

먼저 공지사항 / 갤러리 부분이네요!

공지사항에 대한 html 부분을 만들어주고, gallery 부분에 대한 html 부분 먼저 만들어줄게요.

<ul class="tabmenu">
                <li class="active"><a href="#">공지사항</a></li>
                <li><div class="notice">
                    <ul>
                        <li><a href="#">
                            대한은행 홈페이지 개편 안내
                            <span>2022.08.09</span>
                        </a></li>
                        <li><a href="#">
                            종합생활금융 플랫폼 코리아은행
                            <span>2022.08.09</span>
                        </a></li>
                        <li><a href="#">
                            시스템 정기 점검 안내
                            <span>2022.08.09</span>
                        </a></li>
                        <li><a href="#">
                            오픈뱅킹 앱 사용법 안내
                        </a></li>
                    </ul>
                
            </ul>
<li><a href="#">갤러리</a></li>
                <li><div class="gallery">
                    <ul>
                        <li><a href="#">
                            <img src="img/gallery1.jpg" alt="gallery1">
                        </a></li>
                        <li><a href="#">
                            <img src="img/gallery2.jpg" alt="gallery2">
                        </a></li>
                        <li><a href="#">
                            <img src="img/gallery3.jpg" alt="gallery3">
                        </a></li>
                    </ul>
                </div></li>
.contents {float: left;
    width: 1200px;height: 200px;
    position: absolute;
}
.tabmenu{
    float: left;
    width: 395px;height: 180px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.tabmenu>li{
    float: left;
    width: 100px;
    line-height: 30px;
}
.tabmenu>li>a{
    display: block;
    font-size: 16px;
    text-align: center;
    background-color: #cccccc;
    border: 1px solid #dddddd;
    border-bottom: none;
}
.tabmenu>li>a:hover{
    background-color: #eeeeee;
}
.tabmenu>li>:first-child a{
    border-right: none;
}
.tabmenu>li.active>a{
    background-color: #ffffff;
}
.tabmenu>li div{
    position: absolute;
    left: 0px;height: 0px;
    overflow: hidden;
}
.tabmenu>li.active div{
    width: 393px;
    height: 148px;
    border: 1px solid #dddddd;
    z-index: 1;
}
.notice ul{
    float: left;
    width: 393px;
    margin-top: 12px;
    margin-bottom: 12px;
}
.notice li{
    height: 32px;
    line-height: 32px;
    font-size: 15px;
    margin-left: 10px;
    margin-right: 10px;
}
.notice li:nth-child(2n){
    background-color: #cccccc;
}
.notice li span{
    float: right;
}
.notice li:hover{
    font-weight: bold;
}
.gallery li{
    float: left;
    margin-top: 15px;
    margin-left: 5px;
}
.gallery img{
    width: 100px;height: 100px;
    padding: 10px;
}
.gallery li:hover{
    opacity: 0.5;
}
  • li:nth-child(2n) = 2배수 요소의 스타일 지정
 $(function(){
        $('.tabmenu>li>a').click(function(){
            $(this).parent().addClass("active").siblings().removeClass("active");
            return false;
        });
    });

또한 배너와 바로가기에 대한 css를 지정해주겠습니다.

div class="otherwrap"> <!-- otherwrap:banner와 shortcut 묶어줌 -->
      <div class="banner">
        <a href="#">
        <h4 class="bntext">배너</h4>      
        <img src="img/banner.jpg" alt="배너">
        </a>  
      </div>    
      <div class="shortcut">
        <a href="#">
        <h4 class="sctext">바로가기</h4> 
        <img src="img/shortcut.jpg" alt="바로가기">
        </a>
      </div>
    </div>
.otherwrap{
    float: right;
    width: 800px;height: 200px;
}
.banner{
    float: left;
    width: 395px;height: 180px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.banner img{
    float: left;
    width: 395px;
    height: 180px;
}
.bntext{
    float: left;
    width: 300px;height: 40px;
    position: absolute;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    line-height: 40px;
    background-color: rgba(40,40,40,0.3);
    left: 450px;
    top: 80px;
}
.banner img:hover{
    opacity: 0.5;
}
.shortcut{
    float: right;
    width: 400px;height: 180px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.sctext{
    float: left;
    width: 300px;height: 40px;
    position: absolute;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    line-height: 40px;
    background-color: rgba(40,40,40,0.3);
    left: 850px;
    top: 80px;
}
.shortcut img:hover{
    opacity: 0.5;
}

마지막으로 footer를 구현할 차례입니다.

 

<footer>
<div class="wrap"> <!-- wrap:btlogo와 site 묶어줌 -->
  <div class="btlogo"> 
    <a href="#">
    <img src="img/logo_bottom.png" alt="하단로고">
    </a>
  </div>
  <div class="site"> <!-- site:btmenu와 copy 묶어줌 -->
    <div class="btmenu">
      <ul>
        <li><a href="#">하단메뉴1</a></li>
        <li><a href="#">하단메뉴2</a></li>
        <li><a href="#">하단메뉴3</a></li>
      </ul>
    </div>
    <div class="copy">
     COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED
    </div>               
  </div> <!-- site 끝 -->
</div>
</footer>
footer{           /* D영역:하단 영역 */
	width:100%;   /* 하단 너비(브라우저100%) */
	height:100px; /* 하단 높이 */
	background-color:#30a3f3;
}
.btlogo{         
	float:left;
	width:250px;  /* 하단 로고 영역 너비 */
	height:100px; /* 하단 로고 영역 높이 */
}
.btlogo img{      /* 로고 이미지 스타일 */
	float:left;
	width:200px;
	margin-top:10px;
	margin-left:25px;
}
.site{            /* btmenu와 copy 묶어줌 */
	float:right;
	width:600px;  /* 하단 메뉴 + Copyright 너비 */
	height:100px; /* 하단 메뉴 + Copyright 높이 */
}
.btmenu{
	width:600px;  /* 하단 메뉴 너비 */
	height:50px;  /* 하단 메뉴 높이 */
	text-align:center;
    font-size:18px;
    line-height:30px;
}
.btmenu li{
    margin-top:10px;
    display:inline-block;
    width:100px;
}
.btmenu li:hover{
    font-weight:bold;
}
.copy{
	width:600px;  /* Copyright 너비 */
	height:50px;  /* Copyright 높이 */
    text-align:center;
    font-size:16px;
    line-height:50px;
}

이번 실습에서는 중간중간 오류를 잡느라 자세히 설명을 잘 못한 것 같네요. 

다음에는 더 완성도 있는 글 작성하겠습니다!

728x90
반응형
저작자표시

'Project' 카테고리의 다른 글

[ 환경방사선 예측 프로그램 ] 3. LSTM 모델 활용하여 예측하기  (0) 2023.03.08
[ 환경방사선 예측 프로그램 ] 2. 데이터 전처리 및 병합  (0) 2023.02.18
[ 환경방사능 예측 프로그램 ] 1. 공공 데이터 포털 API 가져오기  (0) 2023.02.18
[웹디자인기능사 실기] 기출문제(1)  (2) 2022.08.04

관련글

티스토리툴바