웹디자인기능사 실기 공개문제 - Green복지재단 (1)
Lpla
·2020. 3. 16. 21:04
웹디자인기능사 실기는 HTML과 CSS를 잘 다룰 줄 안다면, JavaScrpit는 기초만 알아도 합격할 수 있는 시험입니다.
JavaScript로 만드는 것은 극히 한정되어 있는데 큐넷에서 제공하는 공개문제를 모두 풀 수 있다면 합격은 장담할 수 있습니다.
JavaScript에 약한 사람이라도 공개문제 유형은 크게 4개 정도로 요약할 수 있기 때문에 결코 어렵지 않습니다.
그 중에서 오늘은 공개문제 02A-2.pdf - Green복지재단의 상단 부분을 풀어보도록 하겠습니다.
우리가 만들게 될 Green복지재단에 대한 간략한 설명입니다.
빠르게 훑고 다음으로 넘어갑니다.
다음으로 요구사항입니다.
여기부터 꼼꼼하게 읽어야 합니다.
저도 다른 분들이 만든 공개문제 풀이를 많이 봤지만 문제에서 제시하는 것과 다른 방식으로 만드는걸 정말 많이 봤습니다.
2) HTML, CSS charset는 utf-8로 해야 한다.
즉 HTML뿐만 아니라 CSS에도 UTF-8을 적용해야 합니다.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Green복지재단</title>
<meta charset="utf-8" />
</head>
<body>
</body>
<html>
CSS
@charset "UTF-8";
CSS는 반드시 첫째줄에 작성해야 합니다.
그렇지 않을 경우 아래와 같은 오류가 발생합니다.
첫째줄에 주석(comment)은 괜찮지 않을까 해서 실험을 해봤지만 주석도 안됩니다.
얄짤없이 charset이 첫째줄에 와야 합니다.
3) 컬러 가이드
컬러 가이드는 자세한 규정이 없습니다.
제가 미술전공이 아니기 때문에 주조색, 보조색, 배경색, 텍스트색을 센스껏 사용하여 디자인 했습니다.
디자인은 취향이기 때문에 여기서 크게 감점이 있을 거라곤 생각하지 않습니다.
4, 5) 사이트맵, 와이어프레임
5) 와이어프레임은 시험을 치면서 가장 많이 보게 될 영역입니다.
유심히 봐야할 부분은 정해져 있는데 로고의 위치, 메뉴 구성 방법, 메뉴 효과, 슬라이드 이미지, 공지사항, 갤러리와 배너, 푸터 정도입니다.
많다고 느낄 수 있지만, 반대로 생각해 이것들만 구현하면 시험은 합격입니다.
이중에서도 어렵지 않은건 빼고 보면 결국 메뉴 구성 방법, 메뉴 효과, 슬라이드 이미지, 공지사항 네 가지 입니다.
오늘 살펴볼 것은 메뉴입니다.
생각보다 많은 분들이 인지를 못하던데 아래 두 예시는 엄연히 다릅니다.
1번은 서브메뉴에 width: 100% 의 block이 있는 반면, 2번은 메인메뉴와 같은 width를 지닙니다.
완성된 작품으로 보여주면 아래와 같습니다.
차이가 느껴지시나요?
우리는 1번으로 만들어야 합니다.
1번처럼 만들기 위해서 저는 메인메뉴의 자식으로 nav_bg_wrap이라는 class를 추가하였고
position: absolute, width: 100%, top:100px로 메인메뉴 기준으로 100px 아래, width를 화면에 꽉 채운 빈 배경을 만들었습니다.
그리고 메뉴 요소에 마우스를 올리면 nav_bg_wrap이 나타나고, 마우스가 떠나면 사라지도록 JavaScript 처리 했습니다.
코드에 대한 자세한 설명은 저도 힘들고 일방적으로 알려주면 금방 기억에서 사라지기 때문에 스스로 코드를 지워도 보고, 수정도 해보면서 학습하여 터득하시길 바랍니다.
아래 코드는 약 1년 전에 제가 공부하며 쓰던 코드에서 살짝만 건드렸기 때문에 부족한 부분이 있을 수 있습니다.
저보다 더 멋지고 예쁜 코드를 만드시길 바랍니다.
<!DOCTYPE html>
<html>
<head>
<title>Green복지재단</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/tistory_1.css" />
<script src="script/jquery-3.3.1.js"></script>
<script src="script/main.js"></script>
</head>
<body>
<header class="clearfix">
<div id="logo_wrap">
<img src="images/logo.png" alt="" />
</div>
<nav id="nav_wrap">
<div class="nav_bg_wrap"></div>
<ul>
<li>
<a href="#">재단소개</a>
<ul>
<li>
<a href="#">설립취지</a>
</li>
<li>
<a href="#">연혁</a>
</li>
<li>
<a href="#">찾아오는길</a>
</li>
</ul>
</li>
<li>
<a href="#">후원하기</a>
<ul>
<li>
<a href="#">국내후원</a>
</li>
<li>
<a href="#">국외후원</a>
</li>
<li>
<a href="#">맞춤후원</a>
</li>
</ul>
</li>
<li>
<a href="#">자료실</a>
<ul>
<li>
<a href="#">서식자료실</a>
</li>
<li>
<a href="#">사진자료실</a>
</li>
<li>
<a href="#">후원양식</a>
</li>
</ul>
</li>
<li>
<a href="#">스토리</a>
<ul>
<li>
<a href="#">웹진</a>
</li>
<li>
<a href="#">보고서</a>
</li>
<li>
<a href="#">나의 후원</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
CSS
@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
a{
color: black;
text-decoration: none;
}
img{
border: 0;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
/*body*/
body{
width: 1200px;
margin: 0 auto;
position: relative;
}
header{
width: 100%;
height: 100px;
position: relative;
}
#slide_container{
width: 1200px;
height: 300px;
background-color: #ef80ef;
overflow: hidden;
}
#main_container{
width: 100%;
height: 200px;
background-color: #3cb149;
}
footer{
width: 100%;
height: 100px;
background-color: #3cb149;
}
/*body end*/
/*header*/
#logo_wrap{
width: 200px;
height: 40px;
margin: 30px;
float: left;
}
#nav_wrap{
width: 600px;
height: 40px;
margin-top: 58px;
margin-right: 20px;
background-color: #3cb149;
float: right;
}
.nav_bg_wrap{
width: 100%;
height: 130px;
background-color: #434748;
position: absolute;
top: 100px;
left: 0;
z-index: 100;
opacity: 0;
transition-duration: 0.5s;
}
#nav_wrap>ul{
width: 100%;
}
#nav_wrap>ul>li{
width: 25%;
height: 40px;
float: left;
text-align: center;
line-height: 40px;
}
#nav_wrap>ul>li>ul{
width: 150px;
height: 0px;
position: absolute;
z-index: 9999;
transition-duration: 0.5s;
overflow: hidden;
}
#nav_wrap>ul>li>ul>li{
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
#nav_wrap a{
font-size: 20px;
color: white;
height:40px;
}
#nav_wrap>ul>li>a{
color: #434748;
}
/*header end*/
JavaScript
$(document).ready(function(){
//dropMenu
var BG = '.nav_bg_wrap'
var NAV = '#nav_wrap>ul>li'
$(NAV).mouseenter(function(){
$(BG).css({
opacity:1,
height:'130px'
});
$(NAV).children('ul').css({
height: '130px'
});
$(this).css({
backgroundColor: '#1d8844'
});
});
$(NAV).mouseleave(function(){
$(this).css({
backgroundColor: '#3cb149'
});
});
$('#nav_wrap').mouseleave(function(){
$(BG).css({
opacity:0,
height:0
});
$(NAV).children('ul').css({
height: 0
});
});
$(NAV).find('li').mouseenter(function(){
$(this).css({
backgroundColor: 'white'
});
$(this).find('a').css({
color:'#333333'
})
});
$(NAV).find('li').mouseleave(function(){
$(this).css({
backgroundColor: 'transparent'
});
$(this).find('a').css({
color:'white'
})
});
//dropMenu end
}); //end
