웹디자인기능사 실기 공개문제로 공부하는 법
Lpla
·2019. 7. 5. 02:57
이번엔 공개문제로 연습하는 방법을 알려드리겠습니다.
큐넷에 올라온 공개문제는 총 12개로, 그 중에서 저는 11C-3 '남도맛기행 축제' 를 만들어보도록 하겠습니다.
작업순서나 방식은 개개인의 취향이므로 참고만 하되, 똑같이 따라하지 않으셔도 됩니다.
저는 집에서 연습할 때는 Photoshop CC 2018, Brackets으로 작업했고
실제 시험장에서는 Photoshop CS5, Brackets으로 작업했습니다.
시험장은 '한국산업인력공단 부산지역본부' 였고 다행히 브라켓에 emmet가 설치되어 있었습니다.
emmet의 설치여부가 굉장히 궁금했었는데 덕분에 시간단축을 상당히 할 수 있었습니다.
의외로 illustrator는 일절 사용하지 않았습니다. 필요성을 못 느꼈거든요.
시험장에서도 일러스트레이터는 실행여부만 확인하고 한 번도 사용하지 않았습니다.
혹시 일러스트레이터에 약하신 분들은 크게 걱정하지 않으셔도 됩니다.
시간배분은 디자인 2, 코딩 8로 디자인은 최소한만 하고 코딩에 많은 시간을 할애했습니다.
아, 그리고 시작하기 전에 샘플 이미지 파일이 몇 개 필요합니다.
메인 슬라이드에 들어갈 고화질 이미지 세 장,
갤러리에 들어갈 약 200x200 해상도의 이미지 세 장,
배너에 들어갈 200x200 해상도의 이미지 세 장으로 총 9장입니다.
실제 시험을 칠 때는 주어진 폴더 안에 고화질 이미지 파일이 10여 개, 아이콘 이미지 파일이 200여 개 정도 있고
그 중에서 본인이 재량껏 골라서 꾸며야 합니다.
하지만 우리는 샘플 파일이 없기 때문에 이 부분은 미리 정해두겠습니다.
남도맛기행 축제에 어울리는 이미지 9장을 준비해두고 시작하도록 합니다.
저와 같은 시험장에 있던 대다수의 분들은 시험이 시작하고 코딩부터 했지만 저는 아랑곳하지 않고 포토샵부터 켭니다.
저는 시험지에 나와 있는 레이아웃을 참고하여 시안을 완성하고 완성된 시안을 보며 코딩을 작성하는 편입니다.
2페이지 와이어프레임을 보고 전체 가로세로 크기에 맞는 새 창을 만듭니다.
그리고 룰러를 이용해서 헤더와 세션, 푸터의 가이드라인을 정합니다.
여기까지 했으면 이후부터는 자유롭게 디자인을 합니다.
연습이니까 너무 정성들일 필요 없고 20분 이내로 끝낸다는 생각으로 빠르게 만듭니다.
이걸로 디자인 작업은 끝입니다.
"어? 갤러리랑 배너에 이미지가 없는데요?" 하실 수도 있지만 이 작업은 어디까지나 시안입니다.
따라서 완벽하게 만들 필요가 전혀 없습니다. 어디까지나 나만 보는 참고용 이미지 파일이니까요.
갤러리와 배너에 들어갈 이미지는 다른 걸 다 완성하고 가장 마지막에 골라서 코딩하면 됩니다.
특이하게도 공개문제 11C-3은 주조색, 보조색이 없습니다.
그래서 본인 취향대로 색상을 정하면 되는데, 처음에 초록색, 파란색을 주조색으로 했다가
음식이라는 주제와 맞지 않아 노란색으로 변경했습니다.
이제 코딩 프로그램을 실행해서 HTML을 작성합니다.
<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/main.css" type="text/css">
<script src="script/jquery-3.3.1.js"></script>
<script src="script/main.js"></script>
</head>
<body>
<header>
</header>
<section>
</section>
<section>
</section>
<footer>
</footer>
</body>
</html>
시험과는 크게 상관없는 이야기지만 자바스크립트 첨부는 head에도 작성할 수 있고 body에도 작성할 수 있습니다.
그 중 사이트의 로딩을 고려할 때 바디 마지막에 작성하는 것이 좋습니다.
저는 이 사실을 시험이 끝나고 퍼블리싱 공부를 하며 알게된 사실이라 이 당시에는 head에 작성하였습니다.
<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/main.css" type="text/css">
<script src="script/jquery-3.3.1.js"></script>
<script src="script/main.js"></script>
</head>
<body>
<header>
<div class="header_logo">
<a href="#">
<img src="images/logo_color.png" alt="남도맛기행 축제">
</a>
</div>
<nav>
<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="#">Q&A</a>
</li>
<li>
<a href="#">사진갤러리</a>
</li>
<li>
<a href="#">공지사항</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<section>
<div class="slide_wrap">
<div class="slide_con clearfix">
<a href="#">
<img src="images/slide_1.png" alt="슬라이드1">
</a>
<a href="#">
<img src="images/slide_2.png" alt="슬라이드1">
</a>
<a href="#">
<img src="images/slide_3.png" alt="슬라이드1">
</a>
</div>
</div>
</section>
<section>
<div class="notice_wrap">
<div class="top_notice_con">
<a href="#">공지사항</a>
</div>
<div class="bot_notice_con">
<div>
<a href="#">월별 제철음식</a>
<a href="#">19-04-15</a>
</div>
<div>
<a href="#">갓 만든 두부와 갓 짜낸 두유, 그 신선함</a>
<a href="#">19-04-09</a>
</div>
<div>
<a href="#">진도 간재미회</a>
<a href="#">19-000-7</a>
</div>
<div>
<a href="#">한우의 참맛 - 산외한우마을</a>
<a href="#">19-03-11</a>
</div>
</div>
</div>
<!--공지 끝-->
<div class="gallery_wrap">
<div class="top_gallery_con">
<a href="#">갤러리</a>
</div>
<div class="bot_gallery_con clearfix">
<div>
<a href="#">
<img src="images/gallery_img_1.png" alt="갤러리1">
</a>
</div>
<div>
<a href="#">
<img src="images/gallery_img_2.png" alt="갤러리2">
</a>
</div>
<div>
<a href="#">
<img src="images/gallery_img_3.png" alt="갤러리3">
</a>
</div>
</div>
</div>
<!--갤러리 끝-->
<div class="banner_wrap">
<div class="top_banner_con">
<a href="#">배너</a>
</div>
<div class="bot_banner_con clearfix">
<div>
<a href="#">
<img src="images/banner_1.png" alt="배너1">
</a>
</div>
<div>
<a href="#">
<img src="images/banner_2.png" alt="배너2">
</a>
</div>
<div>
<a href="#">
<img src="images/banner_3.png" alt="배너3">
</a>
</div>
</div>
</div>
<!--배너 끝-->
<div class="popup_wrap">
<div class="popup_con">
<div>
<p>월별 제철음식</p>
</div>
<div>
<p>계절마다 달마다 그리고 때마다 우리가 찾고 먹는 음식은 나름의 의미가 있다. 조선시대 농가의 행사를 월별로 기록한 농가월령가(農家月令歌)를 보면 계절별로 갖가지 나물과 계절 음식이 나온다. 생선도 겨울에는 겨울에 잡히는 생산을 먹어야 제 맛이다. 일년 중 철을 따라 이뤄지는 각종 풍물이나 철마다 먹는 음식을 적어 풀어 놓은 책이 세시기(歲時記)다.</p>
</div>
<button>X</button>
</div>
</div>
</section>
<footer>
<div class="footer_wrap">
<div class="footer_logo">
<a href="#">
<img src="images/logo_gray.png" alt="남도맛기행 축제">
</a>
</div>
<div class="footer_menu_con">
<a href="#">남도맛기행 광역투어버스소개</a>
<a href="#">| 개인정보취급방침 |</a>
<a href="#">이메일무단수집거부</a>
</div>
<div class="footer_copyright_con">
<p>사단법인 광주광역시관광협회 대표 김동윤 광주광역시 동구 중앙로196번길 5, 삼호센터 5층 (금남로3가 1-23)</p>
<p>전화 062-224-4486 팩스 062-224-4490 사업자번호 408-82-06112 개인정보담당 김희은</p>
<p>Copyright ⓒ 2019-2019 남도맛기행 광역투어버스 All Rights Reserved.</p>
</div>
</div>
</footer>
</body>
</html>
저는 이렇게 HTML을 완성했습니다.
실제 시험과는 달리 공개문제에는 구체적인 텍스트가 주어지지 않습니다.
따라서 임의의 텍스트를 입력해야 하는데 이것도 꽤 성가신 일입니다.
저는 주제와 어울리는 유사 사이트에 들어가서 텍스트를 긁어왔습니다.
실제 시험에는 텍스트 파일로 제공되기 때문에 이 작업은 시험 시간에서 제외하는 것이 맞습니다.
굳이 정성들여 제작하고 싶지 않다면 lorem을 사용하는 것도 추천드립니다.
HTML을 모두 작성했다면 CSS로 넘어갑니다.
혹시 HTML로 로고를 넣고 CSS로 로고 위치를 잡거나 꾸민 다음, 어디 잘 됐나 새로고침해서 확인하고
그 다음으로 다시 HTML로 메뉴를 만들고 CSS로 메뉴를 꾸미고 새로고침해서 확인하는 것처럼
HTML과 CSS를 넘나들며 작업을 한다면 이 방식은 권장하지 않습니다.
시간을 너무 잡아먹고 비효율적입니다.
이 단계는 디테일에 신경쓰는 것이 아니라 재료를 쑤셔넣는 단계라고 보시면 됩니다.
그래서 HTML을 100%까지는 아니더라도 8~90%는 작성하고 CSS로 넘어가는 것이 좋습니다.
따라서 HTML만 작성하고 페이지를 새로고침하면 위 사진처럼 나오는 것이 정상입니다.
저는 header와 section의 경계를 구분하기 위해 임의로 background-color를 주었기 때문에 색상만 들어가 있는 상태입니다.
이제 시안을 보며 사이트를 꾸미면 됩니다.
개개인에 따라 빠르면 3~40분, 느리면 1시간 30분 정도 걸릴 것입니다.
/*--------------------reset--------------------*/
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
img{
border: 0;
}
a{
color: #222328;
text-decoration: none;
}
html{
color: #222328;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
/*------------------와이어프레임------------------*/
html{
width: 1000px;
height: 650px;
margin: 0 auto;
letter-spacing: -1px;
position: relative;
}
header{
width: 200px;
height: 650px;
float: left;
}
section:nth-of-type(1){
width: 800px;
height: 350px;
float: left;
}
section:nth-of-type(2){
width: 800px;
height: 200px;
float: left;
}
footer{
width: 800px;
height: 100px;
float: left;
}
/*--------------------header--------------------*/
.header_logo{
margin: 50px auto;
text-align: center;
}
.header_logo>a{
display: inline-block;
}
nav{
width: 150px;
height: 220px;
background-color: #ffec48;
text-align: center;
margin: 0 auto;
}
nav>ul>li{
padding: 14px 0;
transition-duration: 0.4s;
}
nav>ul>li>a{
font-size: 20px;
font-weight: 700;
}
nav>ul>li>ul{
display: none;
width: 120px;
height: 129px;
margin-left: 150px;
margin-top: -75px;
position: absolute;
background-color: #ffec48;
text-align: center;
}
nav>ul>li>ul>li{
font-size: 16px;
padding: 11px 0;
font-weight: 700;
transition-duration: 0.4s;
}
/*--------------------슬라이드--------------------*/
.slide_wrap{
width: 800px;
height: 350px;
overflow: hidden;
}
.slide_con{
width: 2400px;
}
.slide_con>a{
width: 800px;
float: left;
}
/*--------------------메인 세션--------------------*/
.notice_wrap, .gallery_wrap, .banner_wrap{
width: 266.6px;
height: 200px;
float: left;
}
.top_notice_con, .top_gallery_con, .top_banner_con{
width: 100%;
height: 45px;
background-color: #ffec48;
font-size: 22px;
font-weight: 700;
line-height: 45px;
}
.top_notice_con>a, .top_gallery_con>a, .top_banner_con>a{
margin-left: 30px;
}
/*공지사항*/
.bot_notice_con{
padding: 0 10px;
}
.bot_notice_con>div{
margin: 10px 0;
padding: 2px 5px;
}
.bot_notice_con a{
font-size: 12px;
}
.bot_notice_con>div{
color: #ff8448;
}
.bot_notice_con a:last-of-type{
float: right;
}
/*갤러리*/
.bot_gallery_con{
margin-top: 17.5px;
}
.bot_gallery_con>div{
width: 80px;
height: 120px;
float: left;
transition-duration: 0.4s;
}
.bot_gallery_con>div:hover{
background-color: #ffec48;
opacity: 0.6;
}
.bot_gallery_con>div:nth-child(2){
margin: 0 13px;
}
/*배너*/
.bot_banner_con{
margin-top: 45.5px;
}
.bot_banner_con>div{
width: 64px;
height: 64px;
float: left;
}
.bot_banner_con>div:first-child{
margin-left: 20px;
}
.bot_banner_con>div:nth-child(2){
margin: 0 18px;
}
/*레이어팝업*/
.popup_wrap{
width: 300px;
height: 300px;
background-color: white;
border: 2px solid #ff8448;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-20%, -50%);
display: none;
}
.popup_con{
padding: 10px;
}
.popup_con>div:first-child{
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 2px solid #ff8448;
}
button{
width: 20px;
height: 20px;
float: right;
margin-top: 30px;
}
/*--------------------footer--------------------*/
.footer_wrap{
width: 800px;
height: 100px;
}
.footer_logo{
width: 266.6px;
height: 100px;
float: left;
text-align: center;
margin: 34.5px 0;
}
.footer_logo>a{
display: inline-block;
}
.footer_menu_con{
width: 533.4px;
height: 50px;
float: left;
text-align: center;
line-height: 50px;
}
.footer_copyright_con{
width: 533.4px;
height: 50px;
float: left;
text-align: center;
}
.footer_copyright_con>p{
font-size: 10px;
}
저는 이런 식으로 코드를 작성했습니다.
CSS를 모두 작성했다면 남은 것은 JavaScript입니다.
JS로 작성해야 하는 것은 1. 슬라이드 움직임 2. 메뉴 이동 3. 팝업창입니다.
JS까지 설명하기에는 글이 길어질 거 같아 JS는 다음에 따로 설명하겠습니다.
제가 작업한 파일은 아래에 첨부하겠습니다.
개인 공부용으로만 쓰시고 다른 곳에 올리지 마세요.
그럼 모두 힘내세요.
