웹디자인기능사 실기 문제&답안

실기 시험 때까지 일주일에 한개씩 풀어보시면 충분히 합격 가능할 듯 합니다.

시간 제한이 있기 때문에 손에 익도록 연습을 많이 해주세요. (참고로 2시간 후부터 나가는 사람들이 나옵니다)

실무 사이트도 시험 레이아웃과 크게 다르지 않기 때문에 손에 익어 속도가 빨라지면 회사에서도 야근을 안할 수 있습니다.

화이팅~!!!

 

웹디자인기능사 문제&답안 바로가기

• A-1-JUST쇼핑몰
• c-2-부여가을연꽃축제
• c-3-남도맛기행축제
• c-4-Vallery Festival

 

 

GitHub에서 한번에 다운 받기

https://github.com/eehd80/exam-webdesign

eehd80/exam-webdesign

 

Code > Download ZIP 클릭하면 전체 파일 다운 받아집니다.

 

slide- script 소스보기

See the Pen mdWrbaP by miae (@flato) on CodePen.

slide- css3 소스보기

See the Pen ZEepzdq by miae (@flato) on CodePen.

---

A-1-JUST쇼핑몰

문제

A-1-JUST쇼핑몰 파일 다운로드

답안 - script slide형

미리보기

https://eehd80.github.io/exam-webdesign/%EC%8B%A4%EA%B8%B0-%EC%99%84%EC%84%B1/A-1-JUST%EC%87%BC%ED%95%91%EB%AA%B0-slide-script/

JUST쇼핑몰

다운받기

A-1-JUST쇼핑몰-slide-script 파일 다운로드

 

답안 - css3 slide형

미리보기

https://eehd80.github.io/exam-webdesign/%EC%8B%A4%EA%B8%B0-%EC%99%84%EC%84%B1/A-1-JUST%EC%87%BC%ED%95%91%EB%AA%B0-slide-animate/

JUST쇼핑몰

다운받기

A-1-JUST쇼핑몰-slide-animate 파일 다운로드

---

 

C-2-부여 가을연꽃축제

 

C-2-부여가을연꽃축제 샘플 파일 다운로드

1. C-2.pdf - 공개문제

2. 부여가을연꽃축제(C-2).docx - 관련 텍스트 문서

3. images 폴더 - 관련 이미지 문서

4. slide - fadein, fadeout (3초 간격)

---

C-3-남도맛기행 축제

C-3-남도맛기행축제 샘플 파일 다운로드

1. C-3.pdf - 공개문제

2. 남도맛기행 축제(C-3).docx - 관련 텍스트 문서

3. images 폴더 - 관련 이미지 문서

4. slide -  이미지가 좌에서 우 또는 우에서 좌로 이동하면서 전환 (3초 간격)

---

C-4-Vallery Festival

C-4-Vallery Festival 샘플파일 다운로드

1. C-4.pdf - 공개문제

2. Vallery Festival(C-4) - 관련 텍스트 문서

3. images 폴더 - 관련 이미지 문서

4. slide -  이미지가 좌에서 우 또는 우에서 좌로 이동하면서 전환 (3초 간격)

 

 

* 슬라이드이미지와 관련 텍스르를 이용하여 포토샵에서 슬라이드 제작 후 퍼블리싱

* 이미지 용량 확인 후 포토샵에서 줄여서 사용

* 바로가기 아이콘 포토샵에서 제작 후 퍼블리싱

---

 

HTML 1시간 / CSS 1시간30분 / JS 1시간으로 시간 분배해서 연습하시면 좋을 듯합니다.

아래 기획서를 보고 중요한 부분을 체크하고 시작하세요.

 

중요(★★★★★) 체크 포인트

• 시험시간 내에 웹페이지를 제작 후 5MB 용량이 초과되지 않게 저장 후 제출한다.
• images(폴더) / script(폴더) / css(폴더)를 만들어 index.html, css, js 파일을 각 폴더에 제작한다.
• 웹페이지 코딩은 HTML5 기준 웹 표준을 준수한다.
• CSS, Javascript는 별도의 파일로 제작하여 링크(External)로 연결한다.
• 웹페이지의 전체 레이아웃은 Table 태그 사용이 아닌 CSS를 통한 레이아웃으로 작업한다.
• 제작된 사이트 메인페이지 레이아웃, 구성요소의 크기 및 위치 등은 최신버전의 Internet Explorer와 Google Chrome에서 동일하게 표시되어야 한다.
• slide는 Javascript(jQuery 포함), CSS 중 하나 이상의 방법을 이용하여 제작해야 한다. (Flash 제작 실격)

 

또 중요(★★★★) 체크 포인트

• HTML, CSS의 charset은 utf-8로 해야 한다.
• HTML, CSS 유효성검사(W3C validator)에서 오류(error)가 없도록 코딩한다.
• Javascript 코드는 Chrome에 내장된 개발도구의 Console 탭에서 오류(error)가 없도록 코딩한다.
• 모든 이미지에는 이미지에 대한 대체 텍스트를 표현할 수 있는 alt 속성이 있어야 한다.
• 상호작용이 필요한 모든 콘텐츠는 임시링크에 ‘#’을 입력하고 tab 키로 이동 선택할 수 있어야 한다.

 

실격처리 기준

1. 지정 작업범위(용량)를 초과한 경우
2. 요구사항과 현격히 다른 경우 (채점위원이 판단)
3. Slide가 Javascript(jQuery 포함), CSS 중 하나 이상의 방법을 이용하여 제작되지 않은 경우

       예) Flash로 제작한 Slide는 인정되지 않으며, 움직이는 Slide를 제작하지 않고 이미지 하나만 배치한 경우도 실격처리 됨.

1. 수험자 미숙으로 비번호 폴더에 완성된 작품 파일을 저장하지 못했을 경우
2. 암축프로그램을 사용하여 작품을 암축 후 제출한 경우

---

 

HTML 코딩 시 중요(★★★★★) 체크포인트

1. 웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 하며, HTML 유효성검사 (W3C validator)에서 오류(‘ERROR’)가 없도록 코딩하여야 한다.
   ※ HTML 유효성검사 서비스는 시험시 제공하지 않는다.(인터넷 사용불가)
2. 주어진 자료(수험자 제공파일)를 활용하여 HTML 페이지를 제작한다.
3. 웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 한다. (시작시 html:5 emmet 사용)
4. CSS, JS는 별도의 파일로 제작하여 링크로 연결한다. (ex. <link href="comm.css"> <script src="comm.js"></script> )
5. 상호작용이 필요한 모든 콘텐츠(로고, 메뉴, Slide, 공지사항, 갤러리 등)는 임시링크 (예:#)되어야 하며 ‘Tab’키로 이동 선택할 수 있어야 한다. (ex. <img href="#">링크</a>)
6. 브라우저에서 CSS를 “사용안함”으로 설정한 경우 콘텐츠가 세로로 나열된다. (css 링크를 뺐을 경우)
7. 타이틀 텍스트(title text), 바디 텍스트(body text), 메뉴 텍스트(menu text)의 각 글자체/굵기/색상/크기 등을 적절하게 설정하여 사용자가 텍스트간의 위계질서 (hierarchy)를 직관적으로 알 수 있도록 한다. (ex. 의미 있는 태그 사용)
8. 모든 이미지에는 이미지에 대한 대체 텍스트를 표현할 수 있는 alt 속성이 있어야 한다.

---

 

공개문제 다운로드

www.q-net.or.kr/crf005.do?id=crf00503&jmCd=7798

국가자격 종목별 상세정보 | Q-net