반응형

웹디자인기능사 10

웹디자인기능사 실기시험 합격 & 독학 후기(3개월 - 자바스크립트)

목차 시작하며오늘 오전에 2023년 웹디자인기능사 4회 실기시험에 응시했고 최종 합격했다. 코딩에 '코'자도 모르던 나였기에, 실기시험을 처음 준비할 때는 많이 막막했다. 하지만 꾸준히 공부하다 보니 어렵게만 보였던 코딩의 개념들이 서서히 이해되기 시작했고, 어느 순간부터는 코딩을 즐기고 있는 나를 발견했다.  지난 몇 개월간 독학으로 시험을 준비했던 과정들을 공유해보려고 한다.자바스크립트 vs 제이쿼리웹디자인기능사는 Javascript 나 jQuery 중 선택해서 애니메이션을 구현해야 한다. 상대적으로 구조가 간단한 jQuery를 암기해서 시험에 응시하는 경우가 많은 것 같다. 다만, jQuery는 사장되어 가는 라이브러리기도 하고, 시험을 보는 목적자체가 스펙이 아닌 장기적으로 코딩지식을 쌓아가는데 ..

E-1:웹디자인기능사 실기시험 공개문제 풀이(자바스크립트)

E-1: 김치이야기 와이어프레임 살펴보기 E유형은 가로만 반응형인 D형과 다르게 가로&세로 모두 반응형으로 제작해야 한다. 영역별 애니메이션: 서브메뉴: 개별 세로 슬라이드 이미지: 좌우 슬라이드 레이어 팝업 E-1: 김치이야기 와이어프레임 구성하기 Visual Studio Code를 실행하고, 아래와 같은 구조로 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본구조를 만든다. 먼저 Main과 Footer 두 영역으로 구분한다: CSS reset 작업을 하고 기본 구조를 정의한다: *세로(Height)는 %를 인식하지 못하므로 대신 vh 값을 사용한다. @charset "UTF-8"; /* reset */ * { margin: 0; padding: 0; color: #333; } a { text-..

D-1: 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트)

D-1 조이컨트리클럽 와이어프레임 살펴보기 기존 A, B, C 유형과는 다르게 D유형은 반응형으로 제작해야 한다. 영역별로 구현해야 되는 애니메이션: 서브메뉴 - 세로형태 슬라이드 애니메이션 슬라이드 - 페이드 인&아웃 형태의 애니메이션 탭메뉴 레이어팝업 D-1: 조이컨트리클럽 와이어프레임 구성하기 Visual Studio Code를 실행하고, 아래와 같은 구조로 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본 구조를 만든다. 먼저 3개의 영역(Aside, Main, Footer)을 만든다: CSS 최상단에 reset을 적용시키고 영역별로 정의해 준다. 고정형이 아닌 반응형이기 때문에 cal()를 사용한다: @charset "UTF-8"; /* reset */ * { margin: 0; padd..

C-1 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트)

C유형의 첫 번째 문제 C-1 해운대 빛축제 와이어프레임 살펴보기 기존에 풀어보았던 A, B이 서로 비슷한 구조를 가지고 있었다면 C유형은 완전히 다르다. 애니메이션 관련 세부사항: 공지사항/갤러는 탭메뉴로 구현 이미지 슬라이드는 사라졌다가 다음 슬라이드가 표시되는 페이드 인&아웃 형태 서브메뉴는 각각 세로형태로 표시되는 형태 레이어 팝업은 기존과 동일 C-1: 해운대 빛축제 와이어프레임 구성하기 Visual Studio Code를 실행하고, 아래와 같은 구조로 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본 구조를 만든다. 먼저 Aside와 Main으로 영역을 2등분한다: 이후에 세부 영역을 추가로 작성한다: CSS 기존처럼 reset을 진행한 뒤 Aside와 Main 영역을 먼저 정의한다: ..

B-1 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트)

B유형의 첫 번째 문제 B-1 대한은행 와이어프레임 살펴보기 B유형의 경우 전반적인 레이아웃 구성은 A유형과 거의 동일하지만, 상단의 헤더와 푸터의 Width를 브라우저 100% 처리해 줘야 한다. B-1 유형의 경우 푸터를 제외한 나머지 구조(메뉴, 탭메뉴 등)는 A-1과 동일하고 하단의 푸터 레이아웃은 A-3와 동일하다. 메인메뉴에 마우스를 오버하면 서브메뉴 전체가 한 번에 나타나는 구조 이미지 슬라이드는 가로로 이동하도록 구현해야 한다. B-1: 대한은행 와이어프레임 구성하기 기존과 동일하게 Visual Studio Code를 실행하고, 아래와 같은 구로조 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본 구조를 만든다: *A유형과 다른 점이 있다면 B유형은 각각의 id별로 container..

A-4 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트)

A유형의 마지막 문제를 풀어볼 차례 A-4: 유진건설 와이어프레임 살펴보기 앞서 작업했던 다른 A형 문제에서 한 번씩은 출제되었던 구조가 조합되어 있다: 배경이 서브메뉴와 함께 슬라이드 되는 형태는 A-2와 동일 공지사항과 갤러리가 별도로 구성된 형태 또한 A-2와 동일하다 푸터 영역은 좌측의 로고 영역이 제외되는 대신 A-2에서 출제되었던 패밀리사이트 메뉴가 우측에 배치된다 이미지 슬라이드의 경우 A-3와 동일한 페이드인&아웃 형태의 애니메이션을 구현해야 한다 A-4: 유진건설 와이어프레임 구성하기 기존과 동일하게 Visual Studio Code를 실행한 뒤, 아래와 같은 구조로 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본 구조를 만든다: 이어서 CSS를 작성한다: @charset "@U..

A-3 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트)

A유형 3번째 문제 풀이. A-3: 강원천문대 와이어프레임 살펴보기 와이어프레임 구조는 앞서 풀었던(A1, A2)와 동일하고, 아래와 같은 효과를 적용해야 한다: A영역의 메뉴 애니메이션: A1과 동일한 애니메이션 효과지만, 각각의 메뉴에 효과가 별도로 적용돼야 한다. B영역 슬라이드 애니메이션: 이미지가 서서히 사라지고 나타나는 Fade-in, Fade-out 효과가 적용되어야 한다. C영역: A1과 동일한 탭메뉴를 적용해야 한다. A-3: 강원천문대 와이어프레임 구성하기 기존과 동일하게 Visual Studio Code를 실행한 뒤, 아래와 같은 구조로 파일을 생성한다: HTML를 사용해서 와이어프레임의 기본 구조를 만든다: CSS로 넘어가서 리셋(reset)을 먼저 적용한 뒤에, ID별로 코드를 작..

A-2 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트)

지난번에 풀어본 A1 문제(풀이 링크)에 이은 두 번째 문제 풀이. A-2: Green복지재단 와이어프레임 살펴보기 기본 와이어프레임 구조는 A1과 동일하고, 아래와 같은 4가지 차이점이 있다: 메인메뉴에 마우스를 오버하면 전체배경이 서브메뉴와 함께 내려온다. B영역의 슬라이드가 세로가 아닌 가로방향으로 전환된다. C영역의 공지사항과 갤러리가 탭메뉴가 아닌 별도 메뉴로 구성되어 있다. D영역 오른쪽 하단에 SNS 아이콘 대신 패밀리사이트 메뉴가 들어간다. A-2: Green복지재단 와이어프레임 구성하기 A1과 마찬가지고 Visual Studio Code를 실행한 뒤, 아래와 같은 폴더 구조로 파일을 생성해 준다: 먼저 아래와 같은 HTML 구조를 작성해서 와이프레임의 기본 구조를 만든다: 이어서 CSS를..

A-1 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트)

18일 뒤인 11월 25일에 웹디자인기능사 실기시험을 볼 예정이다. 남은 기간 동안 시험 주관처인 한국산업인력공단 홈페이지에서 제공하는 공개문제를 최대한 많이 풀어보기로 했다. 23년도에 출제되는 총 20개 문항이 제공된다: 공개문제 자료실 상세 | Q-netBODY { FONT-SIZE: 10pt; FONT-FAMILY: Malgun Gothic; COLOR: #000000; MARGIN: 0px } P { MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px; LINE-HEIGHT: 1.2 } LI { MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px; LINE-HEIGHT: 1.2 } ▶ 적용시기: 2023년 기능사 제1회 부터(1~www.q-net.or.kr *참고: 제이..

웹디자인기능사 필기시험 벼락치기(7일) & 합격후기

기본적인 웹디자인 코딩(HTML, CSS & Javascript)을 공부하는 와중에 관련된 자격증을 찾아보다가 알게 된 웹디자인기능사. 과거에는 플래시와 드림위버를 기반으로 한 디자인 능력을 평가하는 시험이었는데, 2017년 이후부터는 프로그래밍 위주로 완전히 개편되었다. 현재 UXUI 부트캠프 코딩과정에서 배우고 있는 커리큘럼과 동일한 부분이 많아서 이참에 자격증 시험도 보기로 결정했다. 1년에 4번만 응시할 수 있다는 사실을 알고 부랴부랴 일정을 찾아보니, 3회 필기시험이 바로 일주일 뒤에 있었다. 다행히 아직 추가응시 인원을 모집 중에 있었고, 인터넷으로 기출문제를 한번 풀어본 뒤 일주일이면 충분히 준비할 수 있을만한 난이도라 판단되어 바로 신청했다. 4회의 경우 필기시험은 9월, 실기시험은 11월..

반응형