성장의 계절, 모든 강의 30% 할인!

Thumbnail
진짜 시작, 봄맞이 30% 할인 중(D-8)
BEST
디자인 자격증 (디자인)

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

(5)
82개의 수강평 ∙  621명의 수강생
30% 166,100원 116,270원

월 23,254원

5개월 할부 시
지식공유자: 코딩웍스(Coding Works)
총 148개 수업 (37시간 46분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

입문자를 위해 준비한
[웹 퍼블리싱, 웹 개발] 강의입니다.

웹디자인기능사 출제기준(2024.1.1~2024.12.31)까지 시행되는 출제기준에 정확히 맞춘 웹디자인 기능사 실기 시험 내용에 최적화 되어 있는 실기시험 전문 강의로서, HTML+CSS+JQUERY 퍼블리싱, 코딩웍스 웹디자인 기능사 실기시험 강의는 다릅니다. 2023년도에 추가된 D유형, E유형 완벽 제작 수업영상과 2024년도에 추가된 F유형 완벽 제작 수업영상이 모두 반영되어 있습니다.

✍️
이런 걸
배워요!
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

 

🚩2023년 공개문제 vs 2024년 공개문제

 

🚩새롭게 추가된 2024년 공개문제 F타입 4가지 소개

▼ F1 레이아웃 및 모듈 제작 내용

▼ F2 레이아웃 및 모듈 제작 내용

▼ F3 레이아웃 및 모듈 제작 내용

▼ F4 레이아웃 및 모듈 제작 내용

 

😊 제이쿼리 슬라이드 제작 업데이트 완료(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줄입니다.

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

 

😊 D타입과 E타입 제작 강의 업데이트 완료(2023.1.12)

2023년부터 웹디자인 기능사 실기 시험에 새롭게 추가된 D,E 유형 제작 강의 업데이트 완료되었습니다. 추가된 영상은 7시간 가까운 분량입니다. D,E 유형 제작 난이도도 올라가고 학습량이 많아졌으니까 미리 준비하셔서 학습하시기 바랍니다.

2023년에 새롭게 추가된 D타입과 E타입 제작 강의 업데이트 완료되었습니다. D타입과 E타입 제작 강의는 섹션 09에 있습니다. 제작 영상에도 있지만 반드시 A,B,C 타입을 모두 완료한 후 D타입과 E타입 제작 강의를 학습하셔야 합니다.

2024년 웹디자인 기능사 실기 시험
새롭게 추가된 D타입과 E타입 제작 강의 업데이트 소개영상

 

🚩새롭게 추가된 2023년 공개문제 8가지 추가사항 소개

▼ D1 레이아웃 및 모듈 제작 내용

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


▼ D2 레이아웃 및 모듈 제작 내용

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

▼ D3 레이아웃 및 모듈 제작 내용

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

▼ D4 레이아웃 및 모듈 제작 내용

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

 

▼ E1 레이아웃 및 모듈 제작 내용

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

 

▼ E2 레이아웃 및 모듈 제작 내용

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

 

▼ E3 레이아웃 및 모듈 제작 내용

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

 

▼ E4 레이아웃 및 모듈 제작 내용

▼ 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년 출제기준에 맞춘 웹디자인 기능사 실기시험 완벽 가이드

- 웹디자인 기능사 실기시험, 결코 쉬운 시험이 아닙니다!!
- 웹디자인 기능사 자격증 고득점 합격! 쉽고 간명한 코드가 보장합니다.
- 웹디자인 기능사 자격증 취득하시고 웹디자이너 취업 후 연봉도 올리세요~!!

🚩 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) 텍스트 에디터만 사용 가능해졌습니다. 기존에 텍스트에디터로 설치되어 있던 BracketsDreamweaver는 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

 

▲ 인프런 코딩웍스 웹디자인 기능사 실기 강좌 수강생 합격 후기입니다. 보람있네요~^^

 


▲ 인프런에서 코딩웍스 웹디자인 기능사 실시 과정 학생이 합격했다고 올린 글입니다. 이럴 때 뿌듯합니다.~!!

8월 실기 시험 후기입니다!
작성일 : 2023년 09월 13일

안녕하세요! 오랜만에 질문글을 작성하게 되었습니다! 결론부터 말씀드리면 89점으로 합격했다고 오늘 연락을 받고 수첩형 자격증 신청을 마친 상태입니다 :)
사실 다른 일과 병행을 하느라 공부를 제대로 하지 못하다가 급하게 한 달 벼락치기를 했는데요.. 현재 웹디자인 기능사를 준비하시는 분들에게 제가 했던 방법이 조금이라도 도움이 되면 좋을 것 같아 길게 작성하게 되었습니다.
한 달 벼락치기라는 말에 의아하실 수 있을 것 같아 먼저 말씀드리면, 저는 영상, 광고, 디자인 계열 전공을 해서 작년 여름 웹디자인을 하기 위해 공부하고 필기를 따놓고 실기 준비보다 (디자인 계열로)취업을 먼저 해버려서 늦게 딴 케이스입니다 ^-^;;
이전에 공부한게 있었기 때문에 한 달 벼락치기가 가능했습니다ㅜㅜ

제가 공부한 방법에 대해 말씀드리면 저는 강의를 보며 따라하는 방법이 아닌,
제가 가진 정보로 직접 만들어보고 강의를 보며 선생님이 어떻게 하는지 보고 배우는 방식으로 공부했습니다.

구체적인 예시를 들자면,

A유형 레이아웃을 배웠다면 B유형은 직접 만들어보고 와이어프레임 이론을 배웠다면, 그 이론만 가지고 제가 직접 먼저 만들었습니다. 당장 공부할 때는 시간이 오래 걸리기는 하지만, 외워지는 정도도 빠르고 이렇게 한 번이라도 직접 만들게 되면 2-3번째 즈음엔 혼자서 만들 수 있게 되었습니다.

또 영상 중간중간 선생님께서 말씀하신 것처럼 선생님께선 이전에 만든 것들을 복사해 넣더라도 저는 매번 하나하나 직접 쳐서 틀을 만들었던 것도 컸던 것 같습니다.

어쩌면 당연한 공부방식일지 모르겠지만 시간을 많이 잡아먹고 제가 먼저 만들어보기 때문에 처음엔 안되는 것들이 생기는데 그때 왜일까? 생각하게 되고 선생님 강의를 들으며 왜 안되었는지 알게 되는 부분이 공부가 되는데 크다고 생각합니다.
조금이라도 도움이 되었으면 하는 마음에 길게 작성하게 되었습니다. 감사합니다 :)

2021년 웹디자인 기능사 4회차 실기시험 후기 

덕분에 시험 잘 보고 왔습니다!
작성자 : f1rstf1y9  / 2021.12.05 오후 10:28

수강후기는 합격 후에 쓰려고 우선 커뮤니티에 감사 인사글 올려요! 

저는 사실 이쪽 관련 전공 대학생이라 html, css 관련 강의를 전공수업으로만 두번은 들었어요. 전공수업에서는 귀에도 잘 들어오지않는 강의 내용에 오로지 시험을 위해 달달 외우고 시험이 끝나면 잊어버리게 되어서 웹디자인기능사 실기를 준비할때도 뭘 어떻게 준비해야할지 모를 정도로 기초지식이 많이 부족한 상태였는데, 코딩웍스님 강의를 들으니 이제서야 제대로 된 수업을 받았다는 생각이 듭니다. 오늘 시험은 끝났지만 이 강의를 통해 배운 내용은 제 기억 속에 오래 갈 것 같아요. 

시험 접수 후 유튜브 강의로 독학을 하다가 전공강의를 듣던 때처럼 도저히 머리에 들어오지 않아 헤매다 이 강의를 발견했는데 무료 강의를 듣다가 본거라 시험 한 달 정도밖에 남지 않은 시점에 이 강의에 돈을 투자하는게 맞는걸까 고민도 했었거든요. 고민할 필요도 없었던 것 같아요ㅎㅎ 

개인적인 시험 후기도 혹시나 다른분들이 보실까 싶어 남겨두자면, 저는 강의를 듣기 전부터 비주얼 스튜디오를 잘 써왔어서 계속 비주얼 스튜디오 코드로 공부했고, 브라켓 관련 강의는 패스했었어요. 시험장도 일부러 vscode가 있는 곳으로 접수했구요. 그런데 오늘 시험장에 가보니 브라켓만 있더라구요..처음엔 당황했지만 단축키도 강의에서 배운 그대로였고 무엇보다 강의내용이 브라켓이어서 오히려 익숙한 인터페이스라 어렵지않게 적응하고 무사히 시험을 칠 수 있었어요! 시험은 JUST 쇼핑몰로 나왔고, 최종본 제작 강의에도 있던 유형이라 대부분 막힘없이 코드 작성하고 여러번 점검 후에 첫순서로 제출했습니다! 이 강의가 아니었다면 저도 몇몇 분들처럼 중간에 나갔어야했을지도....ㅠㅠ 정말 코딩웍스님 강의를 들어서 다행이에요ㅎㅎ

좋은 강의 감사드리고 합격 결과 나오면 수강후기 작성할게요:)
------------------------------------------------------------------------------------
합격했습니다!

코딩웍스 웹디자인 기능사 실기시험 강의는 다릅니다. 최고라 자부합니다!

 

💡 강의특징

  • 총 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


▲ 수강생에게 무료로 제공되는 코딩웍스 퍼블리싱 PDF 교재 상세보기


 

📝모듈 제작 미리보기 - 슬라이드(Slide)

▼ 가로 슬라이드

▼ 세로 슬라이드

▼ 크로스 페이드 슬라이드

 

📝모듈 제작 미리보기 - 레이어팝업(Modal)

📝모듈 제작 미리보기 - 공지사항 탭 메뉴

📝모듈 제작 미리보기 - 네비게이션 5종류

 

▼ 네비게이션 왼쪽 개별로 아래로 떨어지는 서브메뉴

▼ 네비게이션 왼쪽 개별로 오른쪽으로 떨어지는 서브메뉴

▼ 네비게이션 상단 개별로 아래로 떨어지는 서브메뉴

▼ 네비게이션 상단 모든 서브메뉴가 아래로 떨어지는 메가메뉴

▼ 네비게이션 상단 모든 서브메뉴가 배경과 함께 아래로 떨어지는 메가메뉴

 

📝 최종본 제작 미리보기 

 

▼ 가로 고정형 최종본

▼ 가로 100% 최종본

▼ 세로 2컬럼 최종본

 



💡 수업내용(커리큘럼)

섹션00. 코딩웍스 웹디자인 기능사 자격증 실기시험 강좌 소개

  1. 코딩웍스 웹디자인 기능사 자격증 실기시험 강좌 소개
  2. [필독] 학습 전 꼭! 보고 시작하세요.(블라켓, 비주얼스튜디오 관련, 코드 오류 체크)
  3. [필독] 시험 보기 얼마 전에 꼭! 보고 가세요.(시험장 분위기, 절차, 요령, 제출방법)
  4. [참고] HTML, CSS의 charset는 utf-8로 해야 한다... 에 관한 상세한 내용
  5. [필독] 2024년 웹디자인 기능사 실기 텍스트에디터 및 익스텐션 설치 관련

섹션01. HTML+CSS+JQUERY 퍼블리싱 작업환경 만들기

  1. 비주얼 스튜디오 코드(Visual Studio Code) 사용법 및 환경설정
  2. 비주얼 스튜디오 코드(Visual Studio Code)에서 에밋(Emmet) 사용법
  3. 비주얼 스튜디오 코드(Visual Studio Code) 필수 Extension 설치 및 사용법
  4. 비주얼 스튜디오 코드에서 CSS 수정할 때 위로 올라가는 Full Reload 방지

섹션02. 웹디자인 기능사 실기시험 합격을 위한 HTML+CSS+JQUERY 퍼블리싱 필수 이론

  1. HTML5 핵심 태그 사용법(문단, 텍스트 서식)
  2. HTML5 핵심 태그 사용법(목록 만들기)
  3. HTML5 핵심 태그의 사용법(링크, 이미지)
  4. CSS 핵심이론(CSS란, CSS 링크하기, 기본 문법)
  5. CSS 핵심이론(선택자, 선택자 적용 우선순위)
  6. CSS 서식관련 속성(텍스트 스타일)
  7. CSS 서식관련 속성(목록 스타일)
  8. CSS 자손선택자 vs 자식선택자, 부모요소 vs 자식요소
  9. 상세 디자인을 위한 CSS 박스모델(border, border-radius)
  10. 상세 디자인을 위한 CSS 박스모델(width, height, padding, margin, box-sizing)
  11. 상세 디자인을 위한 CSS 박스모델(box-shadow, text-shadow)
  12. 퍼블리싱의 모든 것! HTML 인라인 요소, 블록 요소, 인라인블록 요소
  13. CSS로 HTML 가로 배치하기(float, overflow, clear, inline-block)
  14. HTML5 시멘틱 태그로 CSS 레이아웃 설계하기(부모요소, 자식요소, 형제요소)
  15. CSS 포지션 속성 완벽하게 이해하기(1편) – 부모요소 vs 자식요소
  16. CSS 포지션 속성 완벽하게 이해하기(2편) – 자동으로 수평 수직 중앙 위치시키기
  17. CSS 포지션 속성 완벽하게 이해하기(3편) – 부모요소 밖으로 위치시키기
  18. CSS 필수 가상클래스 – 마우스 오버 효과(hover, transition)
  19. CSS 필수 가상클래스 – 순서를 만드는 가상클래스 (nth-child, nth-of-type)
  20. CSS 필수 가상클래스 – 순서를 만드는 가상클래스 (first-child, last-child)
  21. 제이쿼리(jQuery) 시작하기(폴더구조, 링크방법)
  22. 제이쿼리(jQuery) 필수 핵심이론(기본 구문 만들기, 선택자)
  23. 제이쿼리(jQuery) 필수 핵심이론(함수)
  24. 제이쿼리(jQuery) 필수 핵심이론(메서드)
  25. 제이쿼리(jQuery) 필수 핵심이론(효과 메서드 –slideDown, slideUp, fadeIn, fadeOut)
  26. 제이쿼리(jQuery) 필수 핵심이론(클래스 제어 메서드 – addClass, removeClass, toggleClass)
  27. 제이쿼리(jQuery) 필수 핵심이론(요소탐색 메서드 – children, siblings)

섹션03. 모듈 제작하기(레이아웃)

  1. 레이아웃 12가지 타입 완벽분석(가로 고정형, 가로 100%, 세로 2컬럼)
  2. 가로 고정형 레이아웃(A1~A4) - 보더를 사용해서 HTML+CSS 구조만들기
  3. 가로 100% 와이어프레임(B1~B4) - 보더를 사용해서 HTML+CSS 구조만들기
  4. 세로 2컬럼 와이어프레임(C1~C4) - 보더를 사용해서 HTML+CSS 구조만들기
  5. 가로 고정형 레이아웃(A1~A4) - 배경색 사용해서 HTML+CSS 구조만들기
  6. 가로 100% 와이어프레임(B1~B4) - 배경색 사용해서 HTML+CSS 구조만들기
  7. 세로 2컬럼 와이어프레임(C1~C4) - 배경색 사용해서 HTML+CSS 구조만들기

섹션04. 모듈 제작하기(공지사항, 갤러리 탭 메뉴)

  1. 공지사항, 갤러리 탭으로 구성, 탭으로 구성 완벽분석
  2. 공지사항, 갤러리 별도로 구성하기(HTML+CSS)
  3. 공지사항, 갤러리 탭으로 구성하기(HTML+CSS+JQUERY)
  4. 공지사항 넘치는 텍스트 CSS로 깔끔하게 자르고 말 줄임 처리하기

섹션05. 모듈 제작하기(레이어 팝업)

  1. 레이어 팝업 제작 완벽분석
  2. 레이어 팝업 제작 HTML+CSS 구조 만들기, 레이어 팝업 제이쿼리

섹션06. 모듈 제작하기(네비게이션 5개 타입)

  1. 드롭다운 네비게이션 5가지 타입 완벽분석, 모듈 제작 세부사항
  2. 왼쪽 드롭다운 네비게이션(2가지 타입 - 왼쪽 개별, 왼쪽 개별 우측서브)
  3. 상단 드롭다운 네비게이션(3가지 타입 - 상단 개별, 상단 메가메뉴, 상단 배경 메가메뉴)

섹션07. 모듈 제작하기(슬라이드 애니메이션)

  1. CSS 애니메이션 필수 핵심 이론(keyframes, animation)
  2. CSS 슬라이드 애니메이션 3가지 타입 html 구조 만들기
  3. CSS 슬라이드 애니메이션(가로 슬라이드)
  4. CSS 슬라이드 애니메이션(세로 슬라이드)
  5. CSS 슬라이드 애니메이션(크로스페이드 슬라이드)
  6. 제이쿼리 제작 방식 슬라이드 애니메이션(3가지 타입)

섹션08. 웹디자인 기능사 실기시험 최종본 실전 제작

  1. 최종본 제작 준비작업(폴더 파일 구조 만들기)
  2. 공개문제 수험자 지시사항 주요항목 체크(A타입~C타입 공통)

  3. [최종본 제작] 가로 고정형(A1타입) – Part1
    - 최종본 제작 주요 지시사항(레이아웃, 슬라이드, 네비게이션, 탭 메뉴, 레이어 팝업)
    - 모듈제작(레이아웃 와이어프레임)
    - 모듈 외 컨텐츠 구성하기
    - 모듈제작(세로 슬라이드 애니메이션)
    - 모듈제작(상단 네비게이션 제작 : 상단 메가메뉴)

  4. [최종본 제작] 가로 고정형(A1타입) – Part2
    - 모듈제작(공지사항 갤러리 탭으로 제작)
    - 모듈변경(메가메뉴 → 상단 개별메뉴)
    - 모듈 제작 방식 변경(세로 슬라이드 제작방식, Position → Margin Top)
    - 마무리 상세 CSS 디자인
    - HTML 파일 전체 코드 W3C 유효성 검사하기
    - 크로스브라우징(크롬, IE, 엣지 브라우저에서 최종본 확인)

  5. [최종본 제작] 가로 100%형(B4타입) – Part1
    - 최종본 제작 주요 지시사항(레이아웃, 슬라이드, 네비게이션, 푸처 상세 컨텐츠 구성)
    - 모듈제작(레이아웃 와이어프레임)
    - 모듈 외 컨텐츠 구성하기
    - 모듈제작(가로 슬라이드 애니메이션)
    - 모듈 제작 방식 변경(세로 슬라이드 제작방식, Position → Margin Left)
    - 모듈제작(공지사항 갤러리 별도로 제작)

  6. [최종본 제작] 가로 100%형(B4타입) – Part1
    - 최종본 제작 주요 지시사항(레이아웃, 슬라이드, 네비게이션, 푸처 상세 컨텐츠 구성)
    - 모듈제작(레이아웃 와이어프레임)
    - 모듈 외 컨텐츠 구성하기
    - 모듈제작(가로 슬라이드 애니메이션)
    - 모듈 제작 방식 변경(세로 슬라이드 제작방식, Position → Margin Left)
    - 모듈제작(공지사항 갤러리 별도로 제작)

  7. [최종본 제작] 세로 2컬럼(C2타입) – Part1
    - 최종본 제작 주요 지시사항(레이아웃, 슬라이드, 탭 별도로, 레이어 팝업, 네비게이션)
    - 모듈제작(레이아웃 와이어프레임)
    - 모듈 외 컨텐츠 구성하기
    - 모듈제작(크로스 페이드 슬라이드 애니메이션)

  8. [최종본 제작] 세로 2컬럼(C2타입) – Part2
    - 모듈제작(왼쪽 네비게이션 2타입 제작 – 왼쪽 개별 → 왼쪽 개별 우측고정)
    - 모듈제작(레이어 팝업 제작)
    - HTML 파일 전체 코드 W3C 유효성 검사하기
    - 크로스브라우징(크롬, IE, 엣지 브라우저에서 최종본 확인)

  9. [최종본 제작 유의사항] 상단 네비게이션의 서브메뉴가 슬라이드 아래로 숨는 문제 해결하기
  10. [최종본 제작 유의사항] 수험자 세부 지시사항에서 갤러리 이미지 투명도 변화시키기

섹션09. 새롭게 추가된 D,E 유형 제작(레이아웃, 네비게이션, 최종본)

  • [필독] calc 함수, vh vw 단위, object-fit 속성, 가상클래스, Flex 사용법
  • D유형 및 E유형 공개 문제 와이어프레임 분석
  • D유형 및 E유형 플렉스(Flex) 레이아웃 HTML 구조 분석
  • D유형(HTML 전체 레이아웃 제작 with Flex) – D1
  • D유형(HTML 전체 레이아웃 제작 with Flex) – D2
  • D유형(HTML 전체 레이아웃 제작 with Flex) – D3
  • D유형(HTML 전체 레이아웃 제작 with Flex) – D4
  • E유형(HTML 전체 레이아웃 제작 with Flex) – E1
  • E유형(HTML 전체 레이아웃 제작 with Flex) – E2
  • E유형(HTML 전체 레이아웃 제작 with Flex) – E3
  • E유형(HTML 전체 레이아웃 제작 with Flex) – E4
  • D유형 E유형 네비게이션 제작 01(왼쪽 개별 아래, 왼쪽 개별 오른쪽)
  • D유형 E유형 네비게이션 제작 02(우측 메가 배경 메뉴)
  • [필독] D유형 E유형 최종본 제작 전 알아야 할 사항들
  • D유형(D1 최종본 제작) - 왼쪽 개별 아래 메뉴, 상하 슬라이드, 뉴스 갤러리 탭 메뉴 #01
  • D유형(D1 최종본 제작) - 왼쪽 개별 아래 메뉴, 상하 슬라이드, 뉴스 갤러리 탭 메뉴 #02
  • D유형(D2 최종본 제작) - 왼쪽 개별 아래 메뉴, 좌우 슬라이드, 뉴스 갤러리 분리 #01
  • D유형(D2 최종본 제작) - 왼쪽 개별 아래 메뉴, 좌우 슬라이드, 뉴스 갤러리 분리 #02
  • D유형(D3 최종본 제작) - 우측 메가 배경 메뉴, 크로스페이드 슬라이드, 뉴스 갤러리 탭 메뉴 #01
  • D유형(D3 최종본 제작) - 우측 메가 배경 메뉴, 크로스페이드 슬라이드, 뉴스 갤러리 탭 메뉴 #02
  • D유형(D4 최종본 제작) - 우측 메가 배경 메뉴, 크로스페이드 슬라이드, 뉴스 갤러리 탭 별도
  • E유형(E1 최종본 제작) - 왼쪽 개별 아래 메뉴, 좌우 슬라이드, 뉴스 갤러리 분리
  • E유형(E2 최종본 제작) - 왼쪽 개별 아래 메뉴, 상하 슬라이드, 뉴스 갤러리 분리
  • E유형(E3 최종본 제작) – 왼쪽 개별 오른쪽 메뉴, 상하 슬라이드, 뉴스 갤러리 분리
  • E유형(E4 최종본 제작) - 왼쪽 개별 오른쪽 메뉴, 좌우 슬라이드, 뉴스 갤러리 분리
  • [D유형 및 E유형 수강생 다운로드] 강의자료 PDF 
  • [D유형 및 E유형] 수험자제공파일(D, E타입 공통) 및 공개문제 요약
  • [D유형 및 E유형 수강생 다운로드] 모듈 제작(네비게이션, 레이아웃)
  • [D유형 및 E유형 수강생 다운로드] 최종본(D1~4, E1~E4)

 

섹션10. 웹디자인 실기시험 최종 점검하기 / 포토샵 CS6 이미지 제작하기

  1. 웹디자인 실기시험 고득점을 위한 필수 항목들(팁, 감점사항, 오류체크 등)
    - 에밋(Emmet) 기능 활성화 체크하기
    - lang=”ko” 그리고 title 내용 넣기
    - CSS 코딩 시작할 때 charset ‘utf-8’; 넣기
    - HTML 코딩 전에 반드시 외부 파일 링크 먼저!
    - script 안에 type 속성
    - a태그 href 속성에 임시링크 # 또는 #none
    - img 태그의 alt 속성에 내용 넣기
    - CSS 코딩 시작할 때 기본서식 넣기
    - HTML 태그 오타 체크 하기
    - 주조색 보조색 사용하기
    - 블라켓 코드힌트(CodeHints) 활성화 하기
  2. 웹디자인 기능사 실기시험을 위한 포토샵 - 인터페이스 설명 및 필수 환경설정
  3. 웹디자인 기능사 실기시험을 위한 포토샵 - 파일 다루기(새 파일,불러오기,저장,선택영역)
  4. 웹디자인 기능사 실기시험을 위한 포토샵 - 툴바 다루기(이동툴,문자툴,변형하기)
  5. 웹디자인 기능사 실기시험을 위한 포토샵 - 이미지 제작하기(로고,SNS아이콘)
  6. 웹디자인 기능사 실기시험을 위한 포토샵 - 이미지 제작하기(갤러리,배너,바로가기)
  7. 웹디자인 기능사 실기시험을 위한 포토샵 - 이미지 제작하기(슬라이드 이미지)

※ 수강생 다운로드 참고자료

  1. [다운로드] 2022년 출제기준 웹디자인 기능사 실기시험 공개문제
  2. [다운로드] 코딩웍스 CSS 슬라이드 제작노트(3타입)
  3. [다운로드] 최종본 제작 파일 완성본(가로형 고정형 - A1타입)
  4. [다운로드] 최종본 제작 파일 완성본(가로 100퍼센트 - B4타입)
  5. [다운로드] 최종본 제작 파일 완성본(세로 2컬럼 - C2타입)
  6. [다운로드] 블라켓 단축키(Brackets Shortcuts)
  7. [다운로드] 웹디자인기능사 실기 연습용 텍스트
  8. [다운로드] 이론학습 및 모듈제작 실습 폴더
  9. [다운로드] 코딩웍스 웹디자인 기능사 실기시험 - HTML 핵심이론
  10. [다운로드] 코딩웍스 웹디자인 기능사 실기시험 - CSS 핵심이론

※ 모듈 제작 완성본 다운로드

  1. [모듈 제작 완성본] 네비게이션(5가지 타입)
  2. [모듈 제작 완성본] 레이아웃(3가지 타입) - 보더 사용
  3. [모듈 제작 완성본] 레이아웃(3가지 타입) - 배경색 사용
  4. [모듈 제작 완성본] 레이어 팝업
  5. [모듈 제작 완성본] 슬라이드 - CSS 방식(3가지 타입)
  6. [모듈 제작 완성본] 슬라이드 - 제이쿼리 방식(3가지 타입)
  7. [모듈 제작 완성본] 탭 메뉴(공지사항, 갤러리)-(3가지 타입)

🙋🏻‍♂️ PDF 교재 관련 필독사항

Q. PDF 교재에서 제이쿼리 파트가 내용이 많지 않던데요?

A) 제이쿼리는 특성상 내용이 너무 방대하기 때문에 PDF 교재에 모든 내용을 담기에는 무리가 있어서 기본적인 사용법과 필수 함수, 이벤트, 메서드 사용법에 대한 내용이 있습니다. 그리고 퍼블리싱 입문자 초보자에게는 무엇보다 CSS와 FLEX가 중요하기 때문에 PDF 교재의 90%에 해당되는 170페이지가 배정되어 있습니다. 

Q. 코딩웍스 퍼블리싱 핵심이론 PDF 교재는 시중교재와 다른 점이 뭔가요?

A. 당장 몰라도 되는 내용, 중요도가 떨어지는 내용은 빼고 꼭! 필요한 핵심만 담았습니다. 코딩웍스 교재는 수년간 오프라인 학원에서 사용한 교재를 더욱 보강해서 만든 PDF 교재입니다. 특히 시중 교재에 없는 코딩웍스 강의 팁(Tip)이 많이 담겨 있습니다.

Q. 다운로드 컨텐츠 용량은 얼마인가?

A) 다운로드 하시는 컨텐츠의 총 용량은 42메가 입니다.  PDF 이론교재는 보시기 편하게 5개로 분리해서 업로드 되었습니다. 개별적으로 받으시면 됩니다. 그리고 실습예제 파일은 압축 푸시면 폴더로 잘 정리되어 있습니다.

Q. 출력해서 보기도 할건데 PDF 교재는 고화질인가요?

A) PDF 파일은 300dpi 고화질로 제작되어 있기 때문에 출력하셔도 깨끗한 프린트를 하실 수 있습니다.

Q. 다운받은 컨텐츠 사용용도가 어떻게 되나요?

A) 다운로드 하신 모든 컨텐츠는 코딩웍스에서 자체제작한 파일들입니다. 코딩웍스 PDF 교재는 수강신청하신 본인의 개인 학습용도 이외에 다른 어떤 목적으로도 사용 또는 타인에게 배포되어서는 안됩니다. 그리고 PDF 파일에 코딩웍스를 표시하는 부분을 편집하여 강의용 자료로 사용하시는 것도 안됩니다.

l, cs

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

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

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

면접과 취업을 부르는 퍼블리셔 개인 포트폴리오 홈페이지 제작, scss, sass, flex, grid, html, css, html/css,  website, 웹 퍼블리셔, 퍼블리셔 취업, 웹사이트, 코딩, coding, jquery, javascript, 제이쿼리, 자바스크립트, 레이아웃, 인터렉티브웹, interactive web, web design, 웹디자인, 포트폴리오,  퍼블리싱, 반응형 웹, 웹디자인기능사 실기시험, bootstrap, 부트스트랩, css frameworks, 프레임워크

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
웹 코딩을 처음 시작하시는 분
웹디자인 기능사 자격증 실기시험 합격을 원하는 분
웹사이트 유지보수 수정보완을 자체적으로 하고자 하시는 분
웹디자인에서 웹퍼블리셔로 직업을 전환하거나 HTML+CSS+JQUERY 퍼블리싱 강화하려는 분
웹 퍼블리싱에 대한 이해도를 높이고 싶은 웹 기획자
프론트엔드 퍼블리싱에 대한 이해도를 높이고 싶은 개발자
📚
선수 지식,
필요할까요?
기본적인 컴퓨터 활용능력과 인터넷 브라우저 사용능력
코딩(Coding)을 위한 기본적인 영어타자 능력

안녕하세요
코딩웍스(Coding Works) 입니다.
코딩웍스(Coding Works)의 썸네일

■ [현재] 국비 퍼블리싱 & 프론트엔드 강사 
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

 

🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704

커리큘럼 총 148 개 ˙ 37시간 46분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 2. 웹디자인 기능사 실기시험 합격을 위한 HTML+CSS+JQUERY 필수 이론
1. HTML5 핵심 태그 사용법(문단, 텍스트 서식) 19:08
2. HTML5 핵심 태그 사용법(목록 만들기) 11:08
3. HTML5 핵심 태그의 사용법(링크, 이미지) 23:10
4. CSS 핵심이론(CSS란, CSS 링크하기, 기본 문법) 21:31
5. CSS 핵심이론(선택자, 선택자 적용 우선순위) 23:20
6. CSS 서식관련 속성(텍스트 스타일) 27:47
7. CSS 서식관련 속성(목록 스타일) 10:49
8. CSS 자손선택자 vs 자식선택자, 부모요소 vs 자식요소 12:10
9. 상세 디자인을 위한 CSS 박스모델(border, border-radius) 25:06
10. 상세 디자인을 위한 CSS 박스모델(width, height, padding, margin, box-sizing) 21:43
11. 상세 디자인을 위한 CSS 박스모델(box-shadow, text-shadow) 17:43
12. 퍼블리싱의 모든 것! HTML 인라인 요소, 블록 요소, 인라인블록 요소 미리보기 23:16 13. CSS로 HTML 가로 배치하기(float, overflow, clear, inline-block) 미리보기 34:20
14. HTML5 시멘틱 태그로 CSS 레이아웃 설계하기(부모요소, 자식요소, 형제요소) 27:58
15. CSS 포지션 속성 완벽하게 이해하기(1편) – 부모요소 vs 자식요소 11:09
16. CSS 포지션 속성 완벽하게 이해하기(2편) – 자동으로 수평 수직 중앙 위치시키기 20:48
17. CSS 포지션 속성 완벽하게 이해하기(3편) – 부모요소 밖으로 위치시키기 14:10
18. CSS 필수 가상클래스 – 마우스 오버 효과(hover, transition) 15:07
19. CSS 필수 가상클래스 – 순서를 만드는 가상클래스 (nth-child, nth-of-type) 12:53
20. CSS 필수 가상클래스 – 순서를 만드는 가상클래스 (first-child, last-child) 16:23
21. 제이쿼리(jQuery) 시작하기(폴더구조, 링크방법) 미리보기 12:59 22. 제이쿼리(jQuery) 필수 핵심이론(기본 구문 만들기, 선택자) 미리보기 17:35 23. 제이쿼리(jQuery) 필수 핵심이론(함수) 미리보기 11:42 24. 제이쿼리(jQuery) 필수 핵심이론(메서드) 미리보기 04:46 25. 제이쿼리(jQuery) 필수 핵심이론(효과 메서드 –slideDown, slideUp, fadeIn, fadeOut) 미리보기 21:01 26. 제이쿼리(jQuery) 필수 핵심이론(클래스 제어 메서드 – addClass, removeClass, toggleClass) 미리보기 09:04 27. 제이쿼리(jQuery) 필수 핵심이론(요소탐색 메서드 – children, siblings) 미리보기 28:17
섹션 3. 모듈 제작하기(레이아웃)
1. 레이아웃 12가지 타입 완벽분석(가로 고정형, 가로 100%, 세로 2컬럼) 14:15
2. 가로 고정형 레이아웃(A1~A4) - 보더를 사용해서 HTML+CSS 구조만들기 30:21
3. 가로 100% 와이어프레임(B1~B4) - 보더를 사용해서 HTML+CSS 구조만들기 24:01
4. 세로 2컬럼 와이어프레임(C1~C4) - 보더를 사용해서 HTML+CSS 구조만들기 25:49
5. 가로 고정형 레이아웃(A1~A4) - 배경색 사용해서 HTML+CSS 구조만들기 16:42
6. 가로 100% 와이어프레임(B1~B4) - 배경색 사용해서 HTML+CSS 구조만들기 25:39
7. 세로 2컬럼 와이어프레임(C1~C4) - 배경색 사용해서 HTML+CSS 구조만들기 22:18
[업데이트] Flex 배치 전체 레이아웃 - 필독사항 10:18
[업데이트] Flex 기본 사용법 - 가로배치 및 수직 수평 정렬 22:21
[업데이트] Flex 배치 전체 레이아웃 - A1, A2, A3, A4 14:05
[업데이트] Flex 배치 전체 레이아웃 - B1, B2, B3, B4 22:21
[업데이트] Flex 배치 전체 레이아웃 - C1, C2, C3, C4 13:21
섹션 4. 모듈 제작하기(공지사항, 갤러리 탭 메뉴)
1. 공지사항, 갤러리 탭으로 구성, 탭으로 구성 완벽분석 미리보기 19:08
2. 공지사항, 갤러리 별도로 구성하기(HTML+CSS) 32:53
3. 공지사항, 갤러리 탭으로 구성하기(HTML+CSS+JQUERY) 43:53
4. 공지사항 넘치는 텍스트 CSS로 깔끔하게 자르고 말 줄임 처리하기 16:55
섹션 5. 모듈 제작하기(레이어 팝업)
1. 레이어 팝업 제작 완벽분석 12:47
2. 레이어 팝업 제작 HTML+CSS 구조 만들기, 레이어 팝업 제이쿼리 31:38
섹션 6. 모듈 제작하기(네비게이션 5개 타입)
1. 드롭다운 네비게이션 5가지 타입 완벽분석, 모듈 제작 세부사항 미리보기 19:11
2. 왼쪽 드롭다운 네비게이션(2가지 타입) - HTML+CSS+JQUERY 35:29
3. 상단 드롭다운 네비게이션(3가지 타입) – HTML+CSS+JQUERY 33:06
섹션 7. 모듈 제작하기(슬라이드 애니메이션 - CSS 제작 방식, 제이쿼리 제작 방식)
1. CSS 애니메이션 필수 핵심 이론(keyframes, animation) 미리보기 35:06
2. CSS 슬라이드 애니메이션 3가지 타입 html 구조 만들기 15:29
3. CSS 슬라이드 애니메이션(가로 슬라이드) 20:51
4. CSS 슬라이드 애니메이션(세로 슬라이드) 14:24
5. CSS 슬라이드 애니메이션(크로스페이드 슬라이드) 21:53
■ 제이쿼리 슬라이드 제작(1) - 핵심 이론 14:23
■ 제이쿼리 슬라이드 제작(2) - 슬라이드 구동방식 15:07
■ 제이쿼리 슬라이드 제작(3) - 슬라이드 제작 31:24
■ [다운로드] 제이쿼리 방식 슬라이드(A,B,C,D,E 타입) 완성본
섹션 8. 웹디자인 기능사 실기시험 최종본 실전 제작(A,B,C 유형)
최종본 제작 준비작업(폴더 파일 구조 만들기) 04:51
공개문제 수험자 지시사항 주요항목 체크(A타입~C타입 공통) 미리보기 21:35
[최종본 제작] 가로 고정형(A1타입) – Part1 40:21
[최종본 제작] 가로 고정형(A1타입) – Part2 44:33
[최종본 제작] 가로 100%형(B4타입) – Part1 48:29
[최종본 제작] 가로 100%형(B4타입) – Part2 44:05
[최종본 제작] 세로 2컬럼(C2타입) – Part1 39:57
[최종본 제작] 세로 2컬럼(C2타입) – Part2 36:30
섹션 9. 새롭게 추가된 D,E 유형 제작(레이아웃, 네비게이션, 최종본)
[필독] calc 함수, vh vw 단위, object-fit 속성, 가상클래스, Flex 사용법 20:29
D유형 및 E유형 공개 문제 와이어프레임 분석 08:05
D유형 및 E유형 플렉스(Flex) 레이아웃 HTML 구조 분석 15:21
D유형(HTML 전체 레이아웃 제작 with Flex) – D1 21:33
D유형(HTML 전체 레이아웃 제작 with Flex) – D2 11:28
D유형(HTML 전체 레이아웃 제작 with Flex) – D3 10:35
D유형(HTML 전체 레이아웃 제작 with Flex) – D4 09:45
E유형(HTML 전체 레이아웃 제작 with Flex) – E1 14:04
E유형(HTML 전체 레이아웃 제작 with Flex) – E2 11:05
E유형(HTML 전체 레이아웃 제작 with Flex) – E3 08:38
E유형(HTML 전체 레이아웃 제작 with Flex) – E4 09:13
D유형 E유형 네비게이션 제작 01(왼쪽 개별 아래, 왼쪽 개별 오른쪽) 11:24
D유형 E유형 네비게이션 제작 02(우측 메가 배경 메뉴)-더 쉽게 제작하기 21:29
[필독] D유형 E유형 최종본 제작 전 알아야 할 사항들 12:15
D유형(D1 최종본 제작) - 왼쪽 개별 아래 메뉴, 상하 슬라이드, 뉴스 갤러리 탭 메뉴 #01 23:46
D유형(D1 최종본 제작) - 왼쪽 개별 아래 메뉴, 상하 슬라이드, 뉴스 갤러리 탭 메뉴 #02 33:00
D유형(D2 최종본 제작) - 왼쪽 개별 아래 메뉴, 좌우 슬라이드, 뉴스 갤러리 분리 #01 16:55
D유형(D2 최종본 제작) - 왼쪽 개별 아래 메뉴, 좌우 슬라이드, 뉴스 갤러리 분리 #02 17:39
D유형(D3 최종본 제작) - 우측 메가 배경 메뉴, 크로스페이드 슬라이드, 뉴스 갤러리 탭 메뉴 #01 21:11
D유형(D3 최종본 제작) - 우측 메가 배경 메뉴, 크로스페이드 슬라이드, 뉴스 갤러리 탭 메뉴 #02 08:55
D유형(D4 최종본 제작) - 우측 메가 배경 메뉴, 크로스페이드 슬라이드, 뉴스 갤러리 탭 별도 15:07
E유형(E1 최종본 제작) - 왼쪽 개별 아래 메뉴, 좌우 슬라이드, 뉴스 갤러리 분리 26:08
E유형(E2 최종본 제작) - 왼쪽 개별 아래 메뉴, 상하 슬라이드, 뉴스 갤러리 분리 18:34
E유형(E3 최종본 제작) – 왼쪽 개별 오른쪽 메뉴, 상하 슬라이드, 뉴스 갤러리 분리 11:38
E유형(E4 최종본 제작) - 왼쪽 개별 오른쪽 메뉴, 좌우 슬라이드, 뉴스 갤러리 분리 10:14
[D유형 및 E유형 수강생 다운로드] 강의자료 PDF
[D유형 및 E유형] 수험자제공파일(D, E타입 공통) 및 공개문제 요약
[D유형 및 E유형 수강생 다운로드] 모듈 제작(네비게이션, 레이아웃)
[D유형 및 E유형 수강생 다운로드] 최종본(D1~4, E1~E4)
섹션 10. 2024년에 새롭게 추가된 F유형 제작 with Flex(레이아웃, 최종본)
2024년에 추가된 F유형 제작방식 및 레이아웃 분석 미리보기 10:26
F유형 HTML 플렉스 레이아웃 구조 제작(F1, 2, 3, 4) 25:10
F유형 최종본 제작(F1, 2, 3, 4) 15:53
[수강생 다운로드] F유형 강의 PDF, 레이아웃, 최종본 제작 파일
섹션 11. 실기시험 최종 점검하기, 포토샵 CS6 사용법 및 이미지 제작하기(Photoshop CS6 영문판)
[최종본 제작 유의사항] 상단 네비게이션의 서브메뉴가 슬라이드 아래로 숨는 문제 해결하기 06:57
[최종본 제작 유의사항] 수험자 세부 지시사항에서 갤러리 이미지 투명도 변화시키기 03:27
[최종본 제작 유의사항] 웹디자인 실기시험 고득점을 위한 필수 항목들(팁, 감점사항, 오류체크 등) 27:57
웹디자인 기능사 실기시험을 위한 포토샵 - 인터페이스 설명 및 필수 환경설정 미리보기 21:15
웹디자인 기능사 실기시험을 위한 포토샵 - 파일 다루기(새 파일,불러오기,저장,선택영역) 24:45
웹디자인 기능사 실기시험을 위한 포토샵 - 툴바 다루기(이동툴,문자툴,변형하기) 18:47
웹디자인 기능사 실기시험을 위한 포토샵 - 이미지 제작하기(로고,SNS아이콘) 21:43
웹디자인 기능사 실기시험을 위한 포토샵 - 이미지 제작하기(갤러리,배너,바로가기) 25:18
웹디자인 기능사 실기시험을 위한 포토샵 - 이미지 제작하기(슬라이드 이미지) 24:12
섹션 12. [A,B,C유형] 모듈 제작 완성본 다운로드(슬라이드,네비게이션,레이아웃,레이어 팝업,탭 메뉴)
[모듈 제작 완성본] 네비게이션
[모듈 제작 완성본] 레이아웃(3가지 타입) - 보더 사용
[모듈 제작 완성본] 레이아웃(3가지 타입) - 배경색 사용
[모듈 제작 완성본] Flex 배치를 이용한 전체 레이아웃
[모듈 제작 완성본] 레이어 팝업
[모듈 제작 완성본] 슬라이드 - CSS 방식
[모듈 제작 완성본] 슬라이드 - 제이쿼리 방식
[모듈 제작 완성본] 탭 메뉴(공지사항, 갤러리)
섹션 13. 수강생 다운로드 참고자료
[다운로드] 2024년 출제기준 웹디자인 기능사 실기시험 공개문제 미리보기 [다운로드] 2023년 출제기준 웹디자인 기능사 실기시험 공개문제 미리보기
[다운로드] 코딩웍스 CSS 슬라이드 제작노트(3타입)
[다운로드] 최종본 제작 파일 완성본(가로형 고정형 - A1타입)
[다운로드] 최종본 제작 파일 완성본(가로 100퍼센트 - B4타입)
[다운로드] 최종본 제작 파일 완성본(세로 2컬럼 - C2타입)
[다운로드] 이론학습 및 모듈제작 실습 폴더.zip
블라켓 단축키(Brackets Shortcuts)
웹디자인기능사 실기 연습용 텍스트
포토샵-이미지제작-A01(학생-실습용)
섹션 14. [코딩웍스] HTML+CSS+FLEX+JQUERY 핵심이론 PDF 교재 다운로드
소개영상 - 코딩웍스 HTML+CSS+JQUERY+FLEX 퍼블리싱 핵심이론 PDF 교재 미리보기 12:27
다운로드 - [코딩웍스 01] HTML 핵심이론 PDF 교재
다운로드 - [코딩웍스 02] CSS 핵심이론 PDF 교재
다운로드 - [코딩웍스 03] FLEX 핵심이론 PDF 교재
다운로드 - [코딩웍스 04] JQUERY 핵심이론 PDF 교재
다운로드 - [코딩웍스 05] 예제파일(HTML+CSS+FLEX+JQUERY)
[다운로드] 비주얼 스튜디오 코드 필수 세팅, 단축키 변경, 필수 Extension 설치, 에밋(Emmet) 단축키
섹션 15. 강의 관련 오류 수정 및 자주 묻는 질문들(FAQ)
[필독] 웹디자인 기능사 실기시험 폴더 구조 만들기
[FAQ] 블라켓(Brackets)에서 생기는 표시 오류
[FAQ] Brackets에서 Emmet 코드힌트 안생기는 오류 해결 방법
[FAQ] 블라켓(Brackets) 실시간 미리보기 크롬으로 열리게 하기(기본 브라우저 설정)
[오류수정] section 태그와 article 태그 사용에 관한 오류
[FAQ] HTML 내에 파일 링크할 때 꼭! 상대주소로 하셔야 합니다.
[FAQ] 블라켓(Brackets)에서 에밋(Emmet) 수동 설치하기
강의 게시일 : 2020년 03월 05일 (마지막 업데이트일 : 2024년 01월 16일)
수강평 총 82개
수강생분들이 직접 작성하신 수강평입니다.
5
82개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
seohyeon thumbnail
5
안녕하세요! 오늘 3회차 실기 시험 결과 나왔는데 92점으로 합격해서 후다닥 수강평적으러 왔습니다! 일단 강사님, 좋은 강의 너무 감사드립니다. 질문도 정말 빨리 답변해주시고 강의내용도 비전공자가 공부하기에 기초부터 차근차근 설명해주셔서 좋았습니다. (특히 저는 강사님이 올려놓으신 유튜브 강의와 병행하며 들었는데 이해가 더 빨랐습니다.) 빠른 시간안에 이해할 수 있는데 특화된 수업이라고 생각합니다. 수강료가 전혀 아깝지 않은 수업이었어요! 감사합니다. 시험볼때도 1시간 40분만에 클리어하고 1등으로 위풍당당하게 나왔답니다. 감사합니다 쌤 :) 강의 다른거 또 들으러 올게요!
2021-09-17
지식공유자 코딩웍스(Coding Works)
seohyeon님 수강평 감사드립니다. 그리고 진심으로 고득점 합격 축하드립니다. 저도 시험볼 때 2시간에 클리어 했는데 1시간 40분만에 클리어 하셨다니 대단하시네요. 강의의 도움도 있었겠지만 본인이 열심히 하신 결과라고 생각합니다~!!
2021-09-17
dancoffee thumbnail
5
1. 강의 내용이 쉽다. 2. 마크업이 깔끔하다. 매번 의미없는 width,height의 반복이 없다. 묻지마 그냥 이렇게 써 라는 식이 아니라 자세한 설 명을 들을 수 있어서 좋았다. 3.예제로 사용하는 와이어프레임 자체가 세련됐다. 4.이미지 슬라이드를 CSS만으로 작성하는 등의 새로운 방법을 배울 수 있어서 좋았다. 5. 질문을 할 수 있어서 좋았다.
2022-09-30
지식공유자 코딩웍스(Coding Works)
수강평이 길진 않지만 이렇게 구체적이고 이해하기 쉽게 적어주신 분은 처음인 듯 합니다. 고득점으로 합격하실거에요. 화이팅입니다~!!
2022-09-30
yemee thumbnail
5
디자이너라 코딩은 완전 노베이스였고, 유튜브 강의들 다 찾아봤는데 하나도 이해가 안가서 포기하고 있었던 자격증이었습니다. 필기 면제 기한이 이번 23년도 1분기까지라 미루고 미루다가 그냥 도전이라도 해보자는 심정으로 실기공부를 시작했는데, 본격적으로 각잡고 한건 원서접수 후 1~2달인 것 같아요. 진짜 왜 선생님 강의가 후기가 많은지 공부하면서 느꼈습니다. 개념을 정말정말 쉽게 설명해주셔서 똥멍청이인 저도 개념을 이해하면서 문제를 풀 수 있었습니다. 레이아웃 + 1번 문제 수업 듣고 풀어보면 어? 2번 ~ 4번은 이렇게 변형하면 되겠구나 감이 생기고, 그러다 보니 어려운 구문들을 크게 외울 필요가 없었던 것 같아요. 공부 도중에 취업이 되어 후반에는 빡세게 못해서 선택과 집중으로 신유형만 연습했습니다. D,E에서 반드시 나올 거라는 믿음 하나로... 다행히도 D유형이 나왔고, 2시간 정도? 만에 시험장을 나올 수 있었습니다. 결과는 91점으로 합격했습니다! 생각보다 엄청 높게 받아서 기분이 좋았습니다 ㅎㅎ 여담으로, 저는 선생님께서 가르쳐주시는 코딩이 정답이라고 생각하며 공부했는데, 다른 강의를 보니 같은 결과를 정말정말 다양한 방법으로 만들 수 있더라구요. 그걸 알고나서야 이 강의가 초보자의 시선으로 바라본, 아주 잘 만들어진 강의임을 깨달았습니다. 이 계기를 시작으로 코딩 놓지 않고 계속 공부해보려고 합니다 :-) 좋은 결과를 얻게 해주셔서 감사합니다~
2023-04-23
지식공유자 코딩웍스(Coding Works)
수강평 감사합니다. 짧은 기간이었는데 고득점으로 합격하셨네요. 축드립니다~!!
2023-04-23
에겜이 thumbnail
5
정말 잘 배우고갑니다! 우선, 처음으로 말씀드릴 부분은 "독학하기 어렵다" 라는 주제입니다! 어떤 공부를 하더라도 물론 시도는 해볼 수 있지만 아시다시피 난이도가 있다면 금방 포기하게 됩니다(혹은 미루게 되거나) 저는 이X적 책을 구매하여 시험을 준비하였으나... 필기까지만 책 보고 실기는 그쪽 영상도 어디서 복사해온 텍스트를 붙여넣기 하면서 설명할 뿐이더군요... 참 답답했습니다. 하지만 카카오톡 요새 잘되어있으니까 오픈톡방 이곳저곳 다녀보다가 솔직히 잘 알려주는곳도 없었고... 저같아도 합격한지 오래되었으면 현직자 질문에 더 대답을 많이 해줄꺼라고 생각은 합니다! 그래서 그분들중에 한분이 이쪽 "코딩웍스 선생님" 을 추천하시더군요! 저는 덕분에 소개글 이런거 안보고 기초부터 다져준다고 하니 바로 칼결제 했습니다. (실화입니다) 그리고나서 1강부터 천천히 보기 시작하는데 팩트는 이해가 쉽게 될 수 없겠죠... 하지만, 저는 꼭 따야겠다라는 생각 하나만 가지고 이론부터 쭉 [순서대로] 강의를 보다보니 어느새 직접 영상을 따라하지 않고 혼자서 미리 만들어 두더군요. 딱 이때 느꼈습니다. 아 이건 지금부터가 시작이구나... A유형이 제일 쉬운편에 속하며 제일 여러가지 관점에서 이해할 수 있는 포인트가 많습니다! 즉, 다른걸 만들 때 마저도 응용해야하는 프로세서를 도중에 파악을 빨리 하는사람이 쉽게 배우는데 제가 모르는게 많았어도 그냥 머리박으면서 기출문제 따라하면서 왜 그럴수밖에 없었는지 대체 왜 이렇게해야 결과값이 나오는지 꾸준히 고민하고 공부했습니다. 3일차가 되니 A, B, C의 레이아웃을 만드는데 성공하였고 7일차가 되니 A, B, C의 완성본을 스스로 혼자서 아무 길라잡이도 안보고 오직 강의 하나 들었던 그 경험으로만 끝내버렸습니다. 이후 D, E 유형은 C 유형만 안보고 만들 수 있는 사람이면 무조건 할 수 밖에 없는 단계로 이루어져있어서 아마 지금 조급해 하시는분들은 C가 제대로 안되어있어서 D, E를 못넘어가시는거다 이렇게 생각할수도 있을거라고 봅니다! 결국 합격하였으며 고득점은 아니지만 (디테일 다버림) 코딩웍스 선생님의 강의 하나만으로 1시간 20분만에 시험장 끊고 바로 나올 수 있었습니다. (질문도 정말 자기가 이도저도 안될때 그런것만 물어봤음) 여기까지가 제 경험담입니다! 정리하겠습니다 1. 당신이 코딩웍스 강의를 결제해야하는 이유 : 주변에 눈씻고 찾아봐도 1:1로 알려줄 사람이 없다. 2. 독학은 아무리 네임드 책 사서봐도 이해가 안되고 어려워서 중간에 무조건 포기하게 될 것이다. 3. 이곳저곳 좋은 강의를 찾아보다가 이 댓글을 보게되었을때 1초의 망설임없이 그냥 결제버튼부터 눌러라 4. 다양한 변수에 대처 가능한 방법들도 많고 당신이 간절하다면 최소 7일 최대 14일 안쪽으로는 빡세게 공부하여 합격할 확률이 80%정도는 된다고 생각한다.. 아니? 90%로 생각한다 5. 이해가 안되고 그냥 뭔가 잘 안된다 싶으면 기출문제 그 부분만 자동으로 타이핑 될 때까지 연습해보자. 6. 신규문제는 시험장에 자주 안나올뿐더러 강의에서 알려주는 D, E 유형 또한 고퀄리티의 프로세서이다. 7. 컴퓨터는 당신보다 똑똑하다. 안될때는 자신을 탓하며 꾸준히 연습하자. 8. 합격을 의심하지 말 것이다. 구매 누른 순간부터 모든 선택에서의 최대를 맛볼 수 있을 것이다.
2023-09-13
지식공유자 코딩웍스(Coding Works)
길고 구체적인 수강평 정말 감사드립니다~!!
2023-09-13
헤일리 thumbnail
5
꼼꼼하게 알려주시고 도움 많이 되었습니다! 다만 html을 아예 모르는 생초보가 들으면 따라가기 어려운 부분들도 있을 것 같아요 한번은 개념 익히고 보시는 것을 추천
2020-03-09
지식공유자 코딩웍스(Coding Works)
코딩웍스입니다. 먼저 수강평 감사합니다~ HTML 이론 영상이 많으면 학습 초반 부분이 너무 길어질 것 같아서 HTML 이론 부분을 간소화 했는데 이 점이 아위우셨군요. 부족하다고 생각되시는 HTML 이론 부분은 저의 유튜브 채널에 길게 자세히 되어 있는 영상들이 많이 있으니까 그 영상들을 참고해주세요. 코딩웍스 온라인 강의가 도움이 되고 있다니 기쁘니다~^^ 웹디자인 기능사 실기시험에 고득점으로 합격하시길을 기원합니다.
2020-03-10