웹디자인기능사 합격 후기 (실기 편)
안녕하세요 니노의 잡학로그입니다 :)
서울까지 가서 면접보고 왔는데
코로나 여파로 연락이 없는 요즘이네요.
대구에 있는게 조금은 서럽군요..
취업의 길이 이렇게.. 막히다니
망했어 내 인생.. 후...
미루고 미뤘던
웹디자인기능사 실기 후기입니다.
웹디자인기능사
필기를 합격하신 분들은
어떻게 웹디자인 실기를 쳐야되나 고민 많이 하실거예요
저는 어떤식으로 시험이 나오는지 몰라서
걱정을 많이 했거든요
저와 같은 사람들에게 도움이 되었으면 좋겠네요
웹디자인기능사 실기의 경우 난이도는 사람에 따라 상중으로 나뉠거 같습니다.
코딩에 대해서 배우는 사람의 경우 중~중상 정도가 될것 같구요
전혀 모르신다면 최상까지 봐야되지 않을까... 싶네요
먼저, 사용할 수 있는 프로그램에 대해서 먼저 설명 드릴게요
|
번호 |
소프트웨어 |
버전 |
|
1 |
Dreamweaver |
Adobe CS3 이상 |
|
2 |
Photoshop |
|
|
3 |
Illustrator |
|
|
4 |
EditPlus |
3.0 이상/한글 또는 영어 |
|
5 |
Notepad++ |
6.9 이상/한글 또는 영어 |
|
6 |
Brackets |
1.7 이상/영어 |
|
7 |
Internet Explorer |
10 이상 |
|
8 |
Google Chrome |
50.0 이상 |
저의 경우, 코딩을 sublime Text3 로 시작을 했는데,
시험치는 곳에서는 지원이 안됩니다.
드림위버, 에디터플러스, 노트패드++, 브라켓 중에서
가장 편하신 프로그램을 사용하시면 될 것같습니다.
저의 경우 시험치기 일주일 전에 브라켓을 설치해서
브라켓으로 연습해서 갔습니다.
이제 핵심 바로 말씀드리겠습니다
q-net 홈페이지에 들어가셔서
웹디자인기능사를 검색하시면
공개문제 자료실이 나옵니다.
아래의 링크를 들어가시면
시험에 나올 문제를 보실 수 있어요.
웹디자인 기능사-공개도면.zip 파일을 받으면 됩니다.
http://www.q-net.or.kr/cst006.do?id=cst00602&gSite=Q&gId=&artlSeq=5199079&brdId=Q006&code=1204
공개문제 자료실 상세 | Q-net
www.q-net.or.kr
※ 실제 출제 되는 문제는 공개한 문제에서 일부 변경될 수 있음.
라고 아래에 적혀 있네요.
저게 예시인가??
하실 수 있을 겁니다.
저도 그랬습니다.
막상 시험치러 갔을 때 저의 경우 그대로 문제가 나왔습니다.
(나중에 바뀔 수도 있습니다.)
그렇기 때문에
저기 있는 문제들 중
자신이 하기 어려운 문제들을 골라서
풀어 보시면 됩니다.
다 하실수 있으시다면 합격~!
혹시나 풀어본 문제가 당첨된다면
합격은 따논 당상이겠죠? ^^
또 고민 되는 부분이
시험장에 갔는데
내가 준비하는 프로그램이 없어요..
일거예요.
위에서 말씀드린 것처럼
미리 시험 치시기 전에
브라켓 프로그램으로
연습해보시는 것을 추천드려요.
시험장에 사용가능한 프로그램 중에선
개인적으로
제일 괜찮은 것 같습니다.
다행히 제가 친 시험장에서는
브라켓에
Emmet이 설치 되어 있어서
! tab 딱 치니
쭉 하고 나와서 기분이 어찌나 좋았던지.. ㅎㅎㅎ
혹시나 Emmet이 없어서 하드코딩을 해야 될까봐
걱정이었는데 다행히 그럴 일은 없었습니다.
다른 시험장들은 어떨지 모르겠지만
Emmet은 아마 설치되어 있지 않을까
조심스레 기대해봅니다.
준비물은 신분증 챙기시구요~
웹디자인 기능사는 코딩시험이기 때문에
특별히 더 가져가야할 물품은 없으세요
감독관의 지시에 따라 잘 시작하시면 될것같구요.
언제나 저장! 저장은 생명입니다.
혹시나 실수로 꺼버리는 상황이 생길 수 있으니
언제든지 저장을 하는 습관을 가지시길 바랍니다.
연습하는 과정에서
html, css, jquery 중
다들 jquery에서 막히실 거예요.
이 시험에선 꼭 jquery를 이용한 슬라이드를 만들어야 합니다.
안그러면 실격임 ㅠㅠ
그렇기 때문에 슬라이드 만들기 연습을 꼭하고 가세요.
슬라이드, 팝업, 메뉴 슬라이드는
거의 매번 나오기 때문에
연습 또 연습하시면
붙을 수 있습니다.
시험에 쉽게 붙기위해서
코드를 미리 정리하셔서
외워서 가시면 될 것 같아요
가르치시는 분마다 스타일이 달라서
어떤게 정답이다 라고 할 수는 없지만
슬라이드 관련 jquery 도움이 되시라고 올려봅니다.
슬라이드(페이드인 페이드아웃)
//slide 페이드인 페이드 아웃
var slideImg = $('.slide_img');
var slideIndex = 0;
slideImg.hide();
slideImg.eq(0).show();
slideShow();
function slideShow() {
slideImg.eq(slideIndex).fadeOut(1000);
slideIndex++;
if(slideIndex == slideImg.length) {
slideIndex = 0;
}
slideImg.eq(slideIndex).fadeIn(1000);
setTimeout(slideShow, 2000);
}페이드인 페이드 아웃으로
이미지가 변경되는 슬라이드 입니다
이런 형태로
자신의 스타일로 코드를 한번 만들어 보시고
그 형태를 외워서 가시면 될거같아요.
코드를 읽을 수 있다면
코드 전체를 외우는 것이 아닌
코드 흐름을 기억하시는게
기억하시기 편하실거예요.
위의 슬라이드 jquery 코드의 경우,
제가 직접 줄이고 줄여서
아주 가벼운 형태로 구현한 겁니다.
이걸 조금만 응용한다면,
상하, 좌우 슬라이드도 쉽게 만드실 수 있으실 거예요.
슬라이드 (상하)
/* css */
.slide img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 400px;
transition: top 2s;
}// jquery
// 이미지 슬라이드
var slideImg = $('.slide img');
var slideIndex = 0;
showSlide();
function showSlide() {
var i;
for (i=0; i<slideImg.length; i++) {
slideImg.eq(i).css('top','-100%');
}
slideIndex++;
slideImg.eq(slideIndex-1).css({
top: 0,
'z-index' : 1
});
if(slideIndex == slideImg.length)
{
slideIndex = 0;
}
slideImg.eq(slideIndex).css({
top: '100%',
'z-index' : 0
});
setTimeout(showSlide, 2000);
}위 코드는 상하로 움직이는 슬라이드 입니다.
여기서
'top' 을 'left' 로 바꾸고,
css에서도 transition을 left로 바꾸면
좌우 슬라이드로 만들 수 있을 겁니다.
탭 메뉴
// jquery
// tab menu
var tab_bt = $('.left_list > li');
var tab_con = $('.left_contents > div');
tab_con.hide();
tab_con.eq(0).show();
$.each(tab_bt, function(index, item){
$(this).click(function(){
tab_con.hide();
tab_con.eq(index).show();
});
});팝업창
// jquery
// pop up
$('.notice > ul >li:first').click(function(){
$('#pop_menu').show();
});
$('.pop_close').click(function(){
$('#pop_menu').hide();
});
탭 메뉴와 팝업창은 몇번만 해보면 쉽게 하실 수 있으실 겁니다.
이상으로 웹디자인 실기 후기 및 방법에 대해서 적어보았습니다.
벌써 시험 합격한지 꽤 지났네요
얼른 코로나가 끝나길 바랍니다.
모두들 열공하셔서 꼭 합격하시길 바랍니다 :)
'Web Designer > 자격증' 카테고리의 다른 글
| 웹디자인기능사 합격 후기 (필기 편) (0) | 2020.01.16 |
|---|
