[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

F유형 레이아웃 제작 및 최종본 제작 영상이 업데이트 완료(2024.1.16)

2024년부터 추가된 F유형 4가지(F1,2,3,4) 제작 영상이 업데이트되었습니다. F유형이라고 새로운 제작 모듈이 있거나 그렇지는 않습니다. 다만, 레이아웃만 1가지 더 추가되었다고 생각하시면 됩니다. 추가된 F유형 4가지 때문에 실기시험 준비하는데 크게 부담되지는 않으실거라 생각합니다.

😧2024년 실기시험 1회차부터 F유형 4가지가 추가

2023년도까지 A타입, B타입, C타입, D타입, E타입 각각 4가지씩 총 20개였는데 2024년 1회차 시험부터 F유형 4가지가 추가되었습니다. 그래서 총 24가지 유형을 공부하셔야 합니다.
주최측에서 2023년도에 시험 나이도를 대폭 올렸는데 2024년도 부터 시험 난이도를 조금 더 올렸습니다.

✅ 2024년에 추가된 F유형 수업영상은 현재 준비중입니다.

2024년 1회 실기시험이 2024.03.16~2024.03.29 이니까 F유형을 제외하고 현재 있는 내용을 공부하시면 됩니다. A, B ,C ,D ,E 타입을 충분히 잘 하시는 상태라면 F유형도 전체 레이아웃만 살짝 다르지 크게 다른 부분은 없습니다. 다만, 전체 레이아웃 설계에서 1340픽셀로 중앙정렬이지만 슬라이드 섹션만 브라우저 100%로 해야 하는게 까다로워 보입니다.

※ F 타입도 슬라이드 방식, 탭 메뉴, 네비게이션, 모달 모두 A, B ,C ,D ,E 타입과 동일합니다.

F유형 수업영상과 자료는 늦어도 1월 말까지 준비될 예정입니다. 조금 빠를 수도 있구요. 예상으로는 1월 20일 정도 될 것으로 예상합니다.

※ 공개문제 PDF 파일은 아래 섹션에서 2023년도와 2024년도 다운로드 해서 확인해보세요.

2024년도 웹디자인기능사 자격 시험 정보 : http://www.q-net.or.kr/crf005.do?id=crf00503&jmCd=7798

오늘 F3 오픈뱅킹 (23번) 유형 시험을 보고 왔습니다!

학습 질문은 아니지만 선생님께서 주변에 F유형 시험 보신 분이 없어서

정보가 정확하지 않다는 것이 기억이 나서 오지랖 같아 보이지만 다른 수험생 분들과

선생님께 도움이 좀 되고자 시험 끝나고 달려와서 게시글을 작성합니다!

이번 주 내내 이상하게 F유형이 마음에 걸렸었는데 오늘 딱 시험 보는 걸 직감했었나봅니다ㅠㅠ

1. 강의대로

.slide 안에 slide-image 와 slide-banner 로 묶어서 공부를 했는데,

 시험지에서는 저희가 slide-banner 라고 칭한 부분을 지시사항에서는 <바로 가기> 라 했고,content-inner 안에 있는 shortcut 부분을 시험지에서는 배너라고 지시하고 있었습니다. 그저 코드 묶는 이름만 달랐지만 F유형 준비하시는 분들은 덜 헷갈리셨으면 하는 맘에코드 명을 바꿔서 공부하는 게 어떨까 하는 생각이 들었어요!저도 중간에 '바로 가기' 지시 사항 읽으면서 평소처럼 slide-banner 로 작성하다가 헷갈려서 그냥 지시 사항 요구한 이름으로 코드 이름도 통일을 시켰어요!

2. 핑크색 박스 부분을 색칠한 부분에 대해서 말씀드릴 게 있는데요~
기억하실지 모르겠지만..ㅠㅠ
제가 24.03.27에 F유형 slide-banner link 부분에 글자 입력하는 지시 사항이 있을 까봐
질문을 올린 적이 있습니다..!
불행하게도ㅠㅠ 제 예상처럼 시험 지시 사항에 각 엥커마다 텍스트를 넣으라는 부분이 있었습니다.
제공되는 텍스트 메모장에 삽입 하라는 텍스트가 있더라고요ㅠㅠ
그리고 총 들어가는 이미지는 레이아웃과 동일하게 5개였습니다.
다만, 텍스트를 이미지 어디에 넣으라는 특정 지시는 없어서,
그래서 저는

span 으로 텍스트를 입력해서 갤러리 이미지에 span을 넣은 것과 똑같이
display:block 처리를 해서 위아래로 넣고 배열하는 방식으로 만들었습니다.
일러스트나 포토샵으로 이미지를 만드는 것이 아니라, 제공 된 이미지를 삽입 했어야 됐습니다..!

배치를 하고 나니까 슬라이드 이미지 위에 뜬금없는 사진들을 붙여 놓은 것 같아서,
저는 백그라운드 컬러를 주고 투명도 조절을 해서 슬라이드 이미지와 별개 부분인 아이콘처럼 보이게
만들었습니다.

3. 그리고 공지사항 부분이요! 오른쪽에 선생님께서 ???ㅠㅠ 라고 하늘색으로 쓰신 부분 정말 공백이었어요!! 다만, 공지사항 부분에 엥? 하고 놀랬던 부분은, tab-inner 너비가 넓지 않을 수 있으니
공지 사항 부분에 em / b 태그를 이용해서 배치와 말 줄임을 공부하고 갔는데,
날짜 입력이 없었습니다!
그래서 편히 앵커만 넣고 블록 처리해서 중앙 배치해서 꾸몄습니다.

제가 실수한 부분은 푸터 메뉴에 보더 버텀을 안준 것과
메뉴 서브 백 width 크기를 해더 크기로 줬다는 것 두 가지인데, (A유형 sub-back처럼 만들어버렸어요ㅠ)
다른 건 다 작동 잘 되고 스스로도 아 이 정도면 됐다하는 맘으로 잘 풀고 왔습니다!! ㅠㅠ
이러다 저 두 가지 문제로 떨어지면 너무 너무 창피하고 부끄러울 것 같습니다만..ㅠㅠㅠㅠ
그래도 스스로 많은 구조를 파악하고 만들 수 있다는 게 너무 뿌듯합니다.

그리고 F유형이 아무래도 본 적 없는 유형이라 그런지..

오늘 제가 간 시험 장에 12명이 시험 봤는데 6명이 중도 포기하고 나가셨어요..
저는 모든 확인을 끝내고 제출하는 데까지 2시간 20분 정도 걸렸는데,
그 시간까지 저 포함 제출한 사람들은 3명이었고, 제가 교실 나올 때까지 3명이 남아있었습니다.

4월 9일에 합격발표일인데 제발 붙었으면 좋겠습니다ㅠㅠ
선생님 대면 수업이 아닌 온라인 수업이었지만 정말 많은 걸 배웠습니다ㅠㅠ
감사합니다ㅠㅠ!

😊 제이쿼리 슬라이드 제작 업데이트 완료(2023.3.11)

제이쿼리 방식 슬라이드 제작 영상이 업데이트 되었습니다. 2023년 부터 D타입, E타입 추가되면서 실기 시험 난이도가 올라가면서 슬라이드 제작 방식을 좀 더 쉽고 편하게 제작이 필요합니다. 그래서 기존의 제이쿼리 방식 영상을 새로운 영상으로 제작했습니다.

기존의 CSS 슬라이더로 제작하면 다소 감점 요소가 있을 수 있습니다. CSS 슬라이더 강의가 있지만 제이쿼리를 사용해서 슬라이더 제작 하시는 것을 추천드립니다. (사실 2가지 방법 중에 편한 것으로 학습하셔 시험 보셔도 합격에는 전혀 지장이 없습니다.)

CSS 슬라이드의 경우 슬라이드1, 2, 3 다음에 다시 슬라이드1로 돌아가서 1, 2, 3으로 가는 부분이 조금 어색하지만, 제이쿼리 슬라이드는 슬라이드1, 2, 3 후 다시 자연스럽게 슬라이드1, 2, 3로 보여집니다. 곧, CSS 슬라이드 보다 더 완벽한 슬라이드 제작이 가능합니다.

제이쿼리 코드를 보시면 짧아서 굉장히 쉽고 이해하기 쉬우실거라 생각합니다.
※ 제이쿼리 코드는 6줄인데 실제 작동하는 코드는 3줄입니다.

▼ 제이쿼리 방식 슬라이드 제작 영상과 다운로드 파일은 아래에서 보시고 받으실 수 있습니다

▼ 2023년에 새롭게 추가된 D타입(D1) 최종본 미리보기

▼ 2023년에 새롭게 추가된 D타입(D2) 최종본 미리보기

▼ 2023년에 새롭게 추가된 D타입(D3) 최종본 미리보기

▼ 2023년에 새롭게 추가된 D타입(D4) 최종본 미리보기

▼ 2023년에 새롭게 추가된 E타입(E1) 최종본 미리보기

▼ 2023년에 새롭게 추가된 E타입(E2) 최종본 미리보기

▼ 2023년에 새롭게 추가된 E타입(E3) 최종본 미리보기

▼ 2023년에 새롭게 추가된 E타입(E4) 최종본 미리보기

2024년 웹디자인 기능사 실기 준비하는 분들은 꼭! 참고해주세요.

2024년 웹디자인 기능사 실기시험 시험정보가 발표되었습니다. 필기 실기 모두 웹디자인기능사 출제기준은 2022년 출제기준과 동일합니다. 그리고 웹디자인 기능사 실기시험 공개문제도 2022년과 정확히 동일하지만 2023년부터 D타입과 E타입이 추가되었습니다. 웹디자인 기능사 실기시험 공개문제는 아래 섹션에 업데이트 되었습니다.

[추가사항] 2024년도 1회차부터 F유형 4가지가 더 추가되었습니다.(총 24개 유형)

2022년 부터 달라진 부분은 공개문제 5페이지 기술적 준수사항 10번에서 Internet Explorer에서 잘 작동해야 한다는 부분이 MS Edge에서 잘 보여여 한다라고 바뀐 부분이 유일합니다. Internet Explorer에서 결과물을 체크하지 않고 MS Edge 체크한다는건 FLEX 등 거의 모든 CSS 속성을 사용할 수 있다는 말입니다. 곧 수험생이 결과물 제작할 때 크로스브라우징에 대한 부담이 거의 없어졌다고 생각하셔도 좋습니다. (시험이니까 안전한 합격을 위해서 강의 수업내용에서 사용한 방식으로 학습하시고 시험보시기를 권장드립니다.)

🚩 2024년 웹디자인 기능사 필기 및 실기시험 일정

▲ 2023년 기준 3,991명이 응시하고 2,298명 합격, 1,693명 불합격
(2023년도에 1,693명이 나름 열심히 시험준비하고 접수하고 응시하러 시험장까지 갔는데 불합격했습니다. 만만한 시험이 아니니 합리적인 시험준비를 하셔야 합니다.)

▼ 실기시험 접수하시기 전 꼭! 보세요.

실기시험 접수는 4일간 이루어집니다. Q-Net에서 오전 10시부터 접수하시면 됩니다. 접수기간이 4일이지만 접수 시작일 10:00~10:30 안에 모두 마감됩니다. 그래서 10시 전에 Q-Net 로그인하시고 스탠바이 하셔야 실기시험 접수 가능합니다. 실기시험은 필기시험과 다르게 특정한 시험장이어야 하기 때문에 실기시험 인원이 매회 정해져 있습니다. 실기시험 접수 못해서 시험 못보는 학생들 굉장히 많이 봤습니다. 그러니 반드시 접수 첫날 오전 10시전에 로그인 후 스탠바이 하시기 바랍니다.

일정 잘 보시고 올해에는 꼭! 합격하시길 기원하겠습니다~!!

🚩 2024년 웹디자인 기능사 실기시험 출제기준

현행 웹디자인기능사 출제기준 적용기간은 2022.1.1~2024.12.31까지 유효합니다.
본 강의는 현행 출제기준에 완벽하게 맞춘 실기시험 강의로 제작되었습니다.

2024년도 웹디자인기능사 자격 시험 정보 : http://www.q-net.or.kr/crf005.do?id=crf00503&jmCd=7798

🚩 2024년 웹디자인 기능사 실기 텍스트에디터

2021년 3회차 실기시험부터 비주얼 스튜디오 코드(Visual Studio Code) 텍스트 에디터만 사용 가능해졌습니다. 기존에 텍스트에디터로 설치되어 있던 Brackets와 Dreamweaver는 Q-Net 공식사이트의 안내에 따르면 2022년부터는 사용 불가합니다. 그래서 결론은 Notepad++ 또는 Visual Studio Code 중 1개를 사용해서 시험 준비하시면 됩니다. 물론 EditPlus와 Brackets를 쓸 일은 없으니 Visual Studio Code를 사용해서 실기시험 공부하시면 됩니다.

Q-Net 공식사이트의 웹디자인 기능사 실기 활용 소프트웨어 안내

https://www.q-net.or.kr/cst006.do?id=cst00602&gSite=Q&brdId=Q006&code=1204&artlSeq=5199079

위의 안내사항에 있듯이 "플러그인(별도 응용, 추가 기능)은 설치 할 수 없습니다." 라고 되어 있습니다. 의미는 비주얼 스튜디오 코드 익스텐션이 설치되어 있지 않기 때문에 비주얼 스튜디오 코드 프로그램의 기본 기능으로 실기 시험을 봐야 한다는 말입니다. 그래서 비주얼 스튜디오 코드 설치하시고 별도의 익스텐션을 설치하지 말고 공부하시 바랍니다. 실기시험장과 동일한 환경에서 시험준비를 하셔야 합니다. 아래 그림에 있는 비주얼 스튜디오 코드 강의 4개 중에 붉은색 박스로 된 2개만 학습하세요. 물론 실무를 위한 비주얼 스튜디오 코드 학습이라면 4개 모두 학습하셔야 합니다.

[필독] 학습을 시작하기 전에 텍스트에디터 사용법

해당 강좌에 있는 Visual Studio Code 사용법 중에서 웹디자인 기능사 실기 시험을 위해서 붉은색 박스로 된 2가지 영상만 학습하시면 됩니다. (실기시험장에는 익스텐션 설치가 되어 있지 않습니다.)

비주얼 스튜디오 코드에서 자동저장 기능 활성화 하기

자동저장은 익스텐션 기능이 아닌 비주얼 스튜디오 코드 자체 기능이니 자동저장 하는 자세한 방법은 코딩웍스 인프런 블로그에서 확인해주세요. https://www.inflearn.com/blogs/728

[업데이트] Flex 배치 전체 레이아웃 제작 강의 영상

1) 2022년부터 웹디자인 기능사 실기시험 기술적 준수사항에서 Edge와  Chrome으로 크로스 브라우징 체크합니다. 이전의 IE(Internet Explorer)는 공식적으로 배제되었습니다. 👍

2) float로 가로 배치하는 기존방식을 충분히 학습 후 Flex 배치를 학습(Flex 배치는 필수 아님)
Float와 Position 배치를 모른 상태에서 Flex 배치 학습 자제해야 합니다.

3) 사용한다면 Flex 배치는 전체 레이아웃에만 사용하시길 추천(세부적인 배치에 Flex 사용 자제)

선택 1) Flex 배치(전체 레이아웃) + Float, Position(레이어 팝업, 네비게이션, 공지사항)
선택 2) Float, Position(전체 레이아웃, 레이어 팝업, 네비게이션, 공지사항)

※ 플렉스(Flex)로 전체 레이아웃 제작은 Float로 배치하는 기존방식을 충분히 학습한 후 최종본 제작에서 활용하시는 것을 추천드립니다.

⚡ 효과적인 학습을 위해 꼭! 코딩웍스 퍼블리싱 유튜브를 참고해주세요.

코딩웍스 퍼블리싱 유튜브 채널에서 이론 영상 강의와 병행하시기 바랍니다. 물론 모든 이론 영상이 유튜브 채널에 있는건 아니지만 중요한 이론 영상은 거의 다 있습니다. 영상이 많으니까 영상을 찾는 방법은 아래 예시처럼 검색하시는게 좋습니다.

코딩웍스 퍼블리싱 유튜브 채널 : https://www.youtube.com/codingworks

💡 강의특징

총 30시간, 총 112개 강의와 18개 핵심자료로 실기시험 합격을 자부하는 맞춤 강의

총 27개의 HTML+CSS+JQUERY 핵심이론 강의

실기시험 제작 모듈 완벽분석 강의(레이아웃,슬라이드,네비게이션,탭 메뉴, 레이어팝업)

웹디자인 기능사 실기시험 통과의 가장 큰 난관! 슬라이드 제작

코딩웍스 강의는 제이쿼리 제작 뿐만 아니라 순수 CSS로 슬라이드 완벽하게 구현

학생 성향에 따라 제이쿼리 슬라이드 또는 CSS 슬라이드 제작 방식을 선택 가능

CSS 슬라이드 에니메이션(가로 슬라이드, 세로 슬라이드, 크로스페이드 슬라이드)

제이쿼리 슬라이드 애니메이션(가로 슬라이드, 세로 슬라이드, 크로스페이드 슬라이드)

모든 제작 모듈이 포함된 실기시험 최종본 3가지 제작 영상

웹디자인 기능사 실기시험을 위한 필수적인 포토샵 CS6 사용법 및 이미지 제작 영상 

HTML+CSS 이론 교재 뿐만 아니라 모든 제작 모듈과 최종본 3가지 제작 파일을 다운로드

코딩웍스 강의는 합격여부가 아니라 얼마나 고득점으로 합격하느냐를 위한 진짜 강의

실기시험 당일에 시험장 분위기, 절차, 요령, 제출방법, 자격증 신청 방법 등 상세한 영상까지

💡 수강대상

- 웹디자인 기능사 자격증 실기시험 합격을 원하는 분
- 웹사이트 유지보수 수정보완을 자체적으로 하고자 하시는 분
- 웹디자인에서 웹퍼블리셔로 직업을 전환하거나 HTML+CSS+JQUERY 퍼블리싱 강화하려는 분
- 웹 퍼블리싱에 대한 이해도를 높이고 싶은 웹 기획자
- 프론트엔드 퍼블리싱에 대한 이해도를 높이고 싶은 개발자

💡 수업목표

- 웹디자인 기능사 실기시험에 고득점으로 합격할 수 있습니다.
- HTML+CSS+JQUERY 퍼블리싱 실력을 체계적으로 향상시킬 수 있습니다.
- 웹사이트 제작 노하우를 향상 시킬 수 있습니다.

- 웹 퍼블리싱 취업을 위한 개인 포트폴리오 웹사이트를 제작할 수 있습니다.

💡 준비사항

- 기본적인 컴퓨터 활용능력과 인터넷 브라우저 사용능력
- 코딩(Coding)을 위한 기본적인 영어타자 능력

💡  코딩웍스 웹디자인 기능사 실기시험 강좌의 특징은 뭔가요?

- 2024년 출제기준에 최적화된 강의내용(12가지 타입 완벽분석 및 적용)
- 쉽고 간명한 코드가 고득점 합격과 안전정 합격을 보장
- 실무에 바로 쓸 수 있는 실력을 키우는 체계적인 강좌
- 총 30시간이 넘는 충실한 강의내용
- 현장에서 학생들을 직접 가르치고 있는 실력있는 강사가 진행하는 특별한 강의
- HTML+CSS+JQUERY 이론 학습서 PDF 교재파일 제공

💡 코딩웍스 웹디자인 기능사 실기시험 온라인 강좌 누가 하나요?

- 실무 웹퍼블리셔 겸 유명 학원에서 오프라인 강의를 진행하는 강사
- 좋은 강의를 위해 직접 가르쳐 본 경험과 노하우가 충분한 강사
- 수년간 웹디자인 기능사 자격증 실기시험 대비반 수업 진행한 강사로 특별한 합격 노하우 전수
- 웹기능사 자격증 실기시험 대비하는 학생들의 수준과 무엇이 필요한지 너무 잘 아는 강사
- 입문자와 초급자가 이해하기 쉬운 코드로 현실적이고 효율적인 학습방법을 제시하는 강사

🙋🏻‍♂️ 강사소개

(현재) 프리랜서 프론트엔드 퍼블리셔

그린 컴퓨터아카데미 웹 퍼블리싱 강사

더조은 컴퓨터아카데미 웹 퍼블리싱 강사

이젠 컴퓨터아카데미 웹 퍼블리싱 강사

프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사

이젠 컴퓨터아카데미 웹디자인 기능사 실기 자격증반

라크피아 ICT 트레이닝 센터프론트엔드 퍼블리싱 마스터 코스 강사

이지앤에듀프론트엔드 퍼블리싱, UI/UX 디자인

HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영

코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks

코딩웍스 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs

🙋🏻‍♂️ 질문하시기 전에 꼭! 읽어주세요~!!

학습하시면서 궁금하신 사항이 있으시면 질문해주세요. 질문 주실 때는 안되는 내용과 코드 그리고 브라우저 결과 화면 캡쳐를 올려주셔야 합니다. 코드의 경우 HTML, CSS, JS 코드를 복사해서 모두 올려주셔야 정확한 답변을 드릴 수 있습니다.

브라우저 결과 화면은 캡쳐로, 코드는 복사해서 올려주셔야 정확한 답변을 드릴수 있습니다.