[웹디자인 기능사 실기] 합격 후기 | 요람일지

2주 전, 작년 웹디자인기능사 필기를 합격한 후 미루던 실기를 응시했습니다.

응시 신청을 위해 큐넷에 접속하자마자 서울, 경기, 타 지역 할 것 없이 전부 마감되어 있는 걸 보고 당황했지만 다행히 많이 멀지 않은 지역으로 신청할 수 있었습니다.

혹시 다음 시험을 위해 후기를 보시는 분들은 임영웅 콘서트 티케팅이다 생각하시고 잘 준비하시길 바랍니다.

준비과정

디자인 경력도 있고 자바스크립트 기반의 개발자이니 얼마나 어렵겠어라는 마음으로 약 3일 정도로 안일한 준비를 했습니다.

제이쿼리는 생소해서 연습이 조금 필요하더라구요.

슬라이드 및 메뉴, 기본 이펙트를 적용하기 위해 자바스크립트 및 제이쿼리를 사용해야 하는데 시험 시간이 생각보다 타이트하기 때문에

자바스크립트보다는 제이쿼리를 추천드립니다. (간단한 기능이기 때문에 제이쿼리 6줄이면 끝나는 기능 구현을 자바스크립트는 3배 정도 작성해야 합니다.)

체크리스트

0. 문제 구조 파악하기

| 타입 | 내용 |
| --- | --- |
| A타입 | wrap 영역의 가로크기 1200px 가운데 정렬 |
| B타입 | wrap 영역의 가로크기 브라우저 가득 100%, 그 안쪽 컨텐츠의 영역이 1200px 가운데 정렬 |
| C타입 | wrap 영역의 가로크기 1000px 왼쪽 정렬 |
| D타입 | wrap 영역의 가로크기 100%, B영역의 크기는 calc 함수 활용 계산 |
| E타입 | wrap영역의 가로크기 100%, 세로크기 100%,  B영역의 크기는 calc함수 활용 계산 |
| F타입 | wrap영역의 가로크기 100%, 그 안쪽 컨텐츠 영역 1340px 가운데정렬,C영역 세로크기 임의지정, C영역의 Link 위치가 B영역의 위치랑 겹치게 작업 |

2.주조색 보조색 및 배경색, 텍스트색

| 구분 | 적용 대상 |
| --- | --- |
| 배경색, 텍스트색 지정 | A1 ~ A4, B1 ~ B4, C1 ~ C4, D1 ~ D4, E1 ~ E4, F1 ~ F4 |
| 주조색, 보조색 자유롭게 | A1 ~ A4, B1 ~ B4, C1 ~ C4, D1 ~ D4, E1 ~ E4, F1 |
| 주조색 지정, 보조색 자유롭게 | F2, F4 |
| 주조색, 보조색 지정 | F3 |

3.메뉴

| 구분 | 적용 대상 |  |
| --- | --- | --- |
| 서브메뉴 전체 펼쳐지는 타입 | A1, B1 |  |
| 와이어프레임 1200px 일시 헤더 전체 서브메뉴 펼쳐지는 타입 | A2, A4 |  |
| 와이어프레임 100% 일시 헤더 전체 서브메뉴 펼쳐지는 타입 | B2, B4, F3, F4 |  |
| 메인메뉴의 서브메뉴만 펼쳐지는 타입 | A3, B3, F1, F2 |  |
| 세로메뉴이며 서브메뉴가 아래로 펼쳐지는 타입 | C1, C2, D1, D2, E1, E2 |  |
| 세로메뉴이며 서브메뉴가 옆으로 펼쳐지는 타입 | C3, C4, E3, E4 |  |
| 세로메뉴이며 서브메뉴가 옆으로 펼쳐지지만 크기가 브라우저 가득차는 타입 | D3, D4 |  |
| 메뉴 밑 스팟메뉴 추가 | D1, D3, E1, E3 |  |

4.슬라이드

| 구분 | 적용 대상 |
| --- | --- |
| 좌우 | A2, B1, B4, C3, C4, D2, E1, E4, F3 |
| 위아래 | A1, B2, B3, D1, E2, E3, F4 |
| fadeIn/Out | A3, A4, C1, C2, D3, D4, F1, F2 |

5.탭

| 구분 | 적용 대상 |
| --- | --- |
| 탭 구현 | A1, A3, B1, C1, D1, D3, F1, F3 |
| 탭 미구현 | A2, A4, B2, B3, B4, C2, C3, C4, D2, D4, E1, E2, E3, E4, F2, F4 |

6.팝업

| 구분 | 적용 대상 |
| --- | --- |
| 공지사항 첫번째 컨텐츠 클릭시 팝업 등장 | 모든 타입 |

7.갤러리

| 구분 | 적용 대상 |
| --- | --- |
| 마우스 오버시 opacity 조절 | A4, B3, C3, D4, E3, F3 |

1. 폴더 구조 세팅

이미지, CSS, JS, html 나누기

2. CSS / HTML 초기 세팅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice</title>
</head>
<body>

</body>
</html>

@charset "utf-8";

 * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

body {
    background-color: #fff;
    color: #333;
}

img {
    vertical-align: "top";
    object-fit: cover;
}

3. JQUERY 적용 체크

기능 요구사항(menu, slide, tab, fade animation) 확인하기

console 오류 확인하기

기능 외우기

   $(() => {

// 슬라이드
        $("슬라이더 묶음").append($("슬라이더").first().clone(true));
        let index = 0;

        setInterval(() => {
            index++;
// 마진 방향 : 상하(marginTop), 좌우(marginLeft)
            $("슬라이더 묶음").animate({마진방향:슬라이더 묶음 길이와 현재 슬라이더 길이의 차이},600)
            if (index === 슬라이더 배열 길이+ 복사된 슬라이더 1개) {
// 복사된 슬라이더까지 보여주면 초기화
                setTimeout(() => {
                    $("슬라이더 묶음").animate({마진방향:0},0)
                    index = 0;
                }, 0);
            }
        }, 3000)

//페이드인&아웃
   })

   $(() => {
// 슬라이드 : 페이드 효과let currentIndex = 0;
    $(".slider").hide().first().show();

    setInterval(function(){
        let nextIndex = (currentIndex+1) % 3;

        $(".slider").eq(currentIndex).fadeOut(1200);
        $(".slider").eq(nextIndex).fadeIn(1200);

        currentIndex = nextIndex;
    }, 3000);
   })

4. 용량 확인하기

5mb 초과 시 이미지 사이즈 줄이기

후기

위의 내용들만 잘 준수해도 기본은 하기 때문에 적당한 점수로 합격할 수 있습니다.

유튜브에 강의가 많기 때문에 한 강사님을 잡고 계속 파시면 다 외워지고 숙달됩니다.

인생 첫 자격증이라 기분이 좋네요.

더 실무에 도움되거나 평소에 가져보고 싶었던 자격증을 위해 앞으로 노력하겠습니다.

읽어주셔서 감사합니다.