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

안녕하세요. 코딩웍스입니다.

최종본 제작 유의사항 영상이 2가지 업데이트되었습니다.

첫번째 영상은 최종본 제작 후 네비게이션과 슬라이드가 켭치는 현상이 생길 경우와 네비게이션 서브메뉴가 나왔을 때 슬라이드가 아래로 밀리는 현상에 대한 해결 영상입니다. 

두번째 영상은 '수험자 세부 지시사항에서 갤러리 이미지 투명도 변화시키기'라는 부분을 만족하는 CSS 추가 부분입니다.

두 가지 영상은  섹션08. 웹디자인 기능사 실기시험 최종본 실전 제작에서 09번과 10번 영상입니다.

사회적으로 힘든 시기이지만 이번 6월에 보는 실기시험에 저희 수강생 모든 분들이 고득점으로 합격하시길 기원합니다. 화이팅~^^

안녕하세요. 코딩웍스입니다.

코딩웍스 웹디자인 기능사 실기 강의에 관심 있는 분이 인프런에 문의하신 내용이 있었습니다.
문의 내용은 2015년 영상으로 웹디자인 기능사 실기 강의하는 온라인 강의를 듣고 지난 실기시험 몇번 떨어져서 현 실기시험 기준과 부합하는 강의인지를 물어보시는 내용이었습니다.

인프런 대신 제가 답변 드렸는데 다른 분들도 공유하시면 좋을 것 같아서 글을 남깁니다.

웹디자인 기능사 실기시험이 2018년 7월부터 이전과 시험유형이 굉장이 많이 바뀌었습니다.
2018년 1월 이전에는 드림위버로 제작해도 충분히 소화할 수 있는 제작 유형이었고 특히, 슬라이드 제작도 플래시로 만들 수 있어서 크게 어렵지 않았습니다. 물론 지금 대비 어렵지 않았다는 말이니 오해가 없으시길 바랍니다.

그렇기 때문에 온라인 강의나 오프라인 강의를 수강하시는 분은 반드시 체크하셔야 할 부분이 강의 내용이 2018년 7월 이후에 바뀐 유형으로 강의 하는지 그렇지 않은지 입니다. 2018년 7월 이전 유형으로 시험준비하시면 지금의 실기 시험 유형에 적응하시기가 쉽지 않을거라 생각됩니다.

당연히 시험유형이 변경되기 전 영상들로 학습하시면 열심히 준비하셨더라도 지금의 변화된 유형이 적응을 못해서 떨어질 수 있다고 생각됩니다. 꼭! 현재 실기시험 출제 유형에 맞는 강의 영상인지 체크하시기 바랍니다.

제 강의는 2018년 1월부터 변경된 것 유형을 완벽하게 맞춰 2020년 초에 새로 제작된 강의 영상입니다. 
그렇기 때문에 실기시험에서 보시는 내용과 정확히 동일한 내용으로 수업합니다.
그리고 블라켓(Brackets)라는 텍스트에디터로 수업진행합니다.  무료 프로그램이며 기본적인 사용방법도 강의에서 자세히 보실 수 있습니다.

포토샵 이미지 제작 강의 영상은 포토샵 CS6 영문판 기준으로 제작되어 있습니다.
포토샵 CS6 영문판 기준으로 학습하시면 실기 시험에서 포토샵 작업에 지장이 없을거라 생각합니다.

■ 웹디자인 기능사 시험 주관 홈페이지

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

여기 들어가시면 '출제기준' 부분이 제가 말씀드린 2018년 7월부터 변경되었다는 내용에 대한 부분 Q-net에서 보실 수 입니다.

안녕하세요. 코딩웍스 입니다.
웹디자인 기능사 실기 준비는 잘되고 계신가요?
공부하시다가 어려움이 있으시면 질문과 답변 게시판에 남겨주세요. 화이팅~^^

코딩웍스 자체제작 핵심이론 PDF 교재가 전체적으로 모두 업데이트되었습니다.
웹디자인 기능사 실기시험 강좌 수강생 모든 분들께 무료 제공하고 있습니다.
웹디자인 기능사 실기시험에 반드시 필요한 내용 뿐만 아니라 실무에서 퍼블리싱할 때 반드시 알아야 하는 중고급 이론과 팁이 담겨있습니다.
PDF 교재와 실습예제가 잘 준비되어 있기 때문에 수강생 분들께 꼭! 필요한 자료가 될 것입니다.

업데이트된 PDF 교재 내용은 아래와 같습니다.
코딩웍스 자체제작한 핵심이론 PDF 교재에 대한 상세한 내용은 아래 내용을 참고하세요.

■ 교재 내용 상세보기

[코딩웍스] HTML+CSS+FLEX+JQUERY 핵심이론 PDF 교재 다운로드

1. 소개영상 - 코딩웍스 HTML+CSS+JQUERY+FLEX 퍼블리싱 핵심이론 PDF 교재
2. 다운로드 - [코딩웍스 01] HTML 핵심이론 PDF 교재
3. 다운로드 - [코딩웍스 02] CSS 핵심이론 PDF 교재
4. 다운로드 - [코딩웍스 03] FLEX 핵심이론 PDF 교재
5. 다운로드 - [코딩웍스 04] JQUERY 핵심이론 PDF 교재
6. 다운로드 - [코딩웍스 05] 예제파일(HTML+CSS+FLEX+JQUERY)

안녕하세요. 코딩웍스 입니다.

웹디자인 기능사 실기시험 레이아웃 제작 영상이 추가로 업데이트되었습니다.

추가된 영상은  배경색으로 레이아웃을 만드는 영상입니다.  배경색으로 레이아웃을 만들면 보더를 사용한 기존의 방식 보다 좀 더 쉽게 제작하실 수 있습니다. 배경색으로 만든 레이아웃 모듈 제작 완성본 파일은 모듈 제작 완성본 다운로드 자료실에서 다운 받으실 수 있습니다.

추가영상 목록

1. 가로 고정형 레이아웃(A1~A4) - 배경색 사용해서 HTML+CSS 구조만들기
2. 가로 100% 와이어프레임(B1~B4) - 배경색 사용해서 HTML+CSS 구조만들기
3. 세로 2컬럼 와이어프레임(C1~C4) - 배경색 사용해서 HTML+CSS 구조만들기

보더로 레이아웃 와이어프레임을 제작할 때 box-sizing: border-box를 반드시 사용해야 합니다. 하지만 box-sizing: border-box가 익숙하지 않은 분들에게는 생소할 수 있습니다.
그래서 배경색으로 사용해서 레이아웃 와이어 프레임을 만들면 보더를 사용하지 않기 때문에 box-sizing: border-box에 대해 신경쓰지 않아도 됩니다.

보더로 만들기와 배경색으로 만들기 2가지 다 장점이 있습니다.
수강생 분들께서 2가지 모두 경험해 보시고 본인에게 맞는 방식으로 제작하시기 바랍니다.

제 입장에서 추천해본다면...

보더로 레이아웃 만들기가 크게 어렵지 않은 분이면 보더로 레이아웃 만들기를 하시는 것이 좋고, 보더로 레이아웃 만들기가 어렵게 느껴지는 분은 배경색으로 레이아웃 만들기를 하시면 될 것 같습니다.

배경색으로 레이아웃 만들기할 때 어차피 배경색은 레이아웃 잡기 목적이고 안에 내용을 넣을 때 삭제될 부분이니 색상에 크게 신경 쓰면서 만드실 필요는 전혀 없습니다.
다만 구분할 수 있을 정도로 색상 차이만 있으면 됩니다.

※ 첨부된 그레이 색상 이미지를 참고하셔서 배경색으로 레이아웃 만들기 하시면 됩니다.

안녕하세요. 코딩웍스 입니다.

웹디자인 기능사 실기시험을 위한 포토샵 이미지 제작 영상이 모두 업로드 되었습니다.
웹디자인 기능사 실기시험을 위한 포토샵 강좌로 필수적인 포토샵 사용법과 수험자 지시사항에 명시되어 있는 이미지 제작 과정을 모두 담고 있습니다.

포토샵 강좌는 Adobe Photoshop CS6 영문판을 기준으로 제작된 영상입니다.
포토샵 강좌를 보시기 전에 Adobe Photoshop CS6 영문판을 먼저 설치하시기 바랍니다.
그리고 포토샵 강좌를 위한 실습 파일도 다운로드 받으시기 바랍니다. 실습파일은 수강생 참고자료 다운로드에 '포토샵-이미지제작-A01(학생-실습용).zip' 파일을 다운로드 받으시면 됩니다.

웹디자인 기능사 실기시험을 위한 포토샵 사용법 CS6  및 이미지 제작 강좌이므로 포토샵 입문자, 초보자에게 해당되는 영상입니다.

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

1. 웹디자인 기능사 실기시험을 위한 포토샵 - 인터페이스 설명 및 필수 환경설정
2. 웹디자인 기능사 실기시험을 위한 포토샵 - 파일 다루기(새 파일,불러오기,저장,선택영역)
3. 웹디자인 기능사 실기시험을 위한 포토샵 - 툴바 다루기(이동툴,문자툴,변형하기)
4. 웹디자인 기능사 실기시험을 위한 포토샵 - 이미지 제작하기(로고,SNS아이콘)
5. 웹디자인 기능사 실기시험을 위한 포토샵 - 이미지 제작하기(갤러리,배너,바로가기)
6. 웹디자인 기능사 실기시험을 위한 포토샵 - 이미지 제작하기(슬라이드 이미지)

안녕하세요. 코딩웍스입니다~

수강생 분들께서 모든 모듈 제작 완성본 다운로드하실 수 있습니다.
실기시험에 필요한 모든 모듈의 모든 타입이 제작된 완성본입니다.
영상보면서 공부하실 때 코드리뷰(Code Review) 용도로 사용하시기 바랍니다.

커리큘럼 마지막 섹션에서 다운로드 받으실 수 있습니다.

모듈 제작 완성본 다운로드

1. [모듈 제작 원성본] 네비게이션
2. [모듈 제작 원성본] 레이아웃
3. [모듈 제작 원성본] 레이어 팝업
4. [모듈 제작 원성본] 슬라이드 - CSS 방식
5. [모듈 제작 원성본] 슬라이드 - 제이쿼리 방식
6. [모듈 제작 원성본] 탭 메뉴(공지사항, 갤러리)

제이쿼리 방식 슬라이드 제작 영상이 추가

안녕하세요. 코딩웍스입니다~

제이쿼리 방식 슬라이드 제작 영상이 추가되었습니다.
제이쿼리 방식 슬라이드 제작은 가로 슬라이드, 세로 슬라이드, 크로스페이드 슬라이드 3가지 타입으로 수험자 지시사항에 완벽하게 맞춘 슬라이드 제작 영상입니다.

수험생의 혼돈을 주지 않기 위해서 html 구조는 CSS 슬라이드 제작 방식과 정확히 동일합니다.
업로드된 제이쿼리 슬라이드 제작 영상은 슬라이드 타입별로 제이쿼리가 달라지지 않습니다.
1개의 제이쿼리 구문으로 슬라이드 3가지 타입을 완벽하게 소화합니다.
슬라이드 3가지 타입을 다르게 만드는건 CSS 속성을 2~3가지 추가한 것으로 간명하고 이해하기 쉽게 제작되었습니다.

CSS 제작 방식이 좋은 분은 CSS 슬라이드로 제작하시고,
제이쿼리 제작 방식이 좋은 분은 제이쿼리 방식으로 개인 의향에 따라 자유롭게 선택하셔서 실기시험 준비하시면 됩니다.

수강생 여러분~ 안녕하세요. 코딩웍스 입니다.

최종본 제작 전까지 이론 공부, 모듈별 제작 학습하실 때 참고사항

- 최종본 제작 전까지 이론공부, 모듈 제작 학습할 때 [다운로드] 이론학습 및 모듈제작 실습 폴더  받으세요.
- 받은 파일을 압축 풀고 폴더명 변경해서 모듈별로 연습하실 때 사용하세요.
- 개인 학습한 폴더와 파일은 코드리뷰(Code Review)를 위해서 항상 유지하시기 권해드립니다.
- 포함내용 : 이미지 파일, 제이쿼리 오픈소스 파일, 제공텍스트

다운로드 받은 연습폴더 사용방법

1. 참고자료에 있는 [다운로드] 이론학습 및 모듈제작 실습 폴더.zip 다운로드 받기
2. 다운로드 받은 zip 파일을 압축 풀기
3. 압축 푼 폴더의 폴더 이름 변경하기(ex. 레이아웃 제작하기)
4. 이름 변경한 폴더를 Brackets에서 open하고 index.html, style.css, custom.js 생성하고 영상 보면서 학습하기
5. 다른 모듈을 학습할 때 다시 압축 풀고 폴더 이름 변경하기(ex. 슬라이드 모듈제작 연습하기)

안녕하세요. 코딩웍스 입니다.
2020년 웹디자인 기능사 자격증 시험일정입니다.
2020년에 꼭! 원하는 웹디자인 기능사 자격증 취득하시길 바랍니다.

상세내용 보기(Q-net)
http://www.q-net.or.kr/crf005.do?id=crf00503&jmCd=7798