Thumbnail
깜짝 할인 중(D-1)
BEST 크리에이티브 웹 퍼블리싱
[2021년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
(5.0)
40개의 수강평 ∙ 281명의 수강생
20% 166,100원 132,000원

월 26,400원

5개월 할부 시
지식공유자 : 코딩웍스(Coding Works)
총 109개 수업˙총 30시간 24분
평생 무제한 수강
수료증 발급 강의
입문 대상 초급 중급이상
폴더에 추가 666 공유
입문자를 위해 준비한
[웹 퍼블리싱, 웹 개발] 강의입니다.

2021년 12월말까지 시행되는 출제기준에 정확히 맞춘 웹디자인 기능사 실기 시험 내용에 최적화 되어 있는 실기시험 전문 강의로서, HTML+CSS+JQUERY 퍼블리싱, 코딩웍스 웹디자인 기능사 실기시험 강의는 다릅니다.

✍️
이런 걸
배워요!
HTML+CSS+JQUERY 핵심이론
웹 퍼블리싱 취업을 위한 개인 포트폴리오 웹사이트를 제작
웹사이트 제작 실력과 노하우 향상
웹디자인 기능사 실기시험에 고득점 합격

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

2022년 웹디자인 기능사 실기시험 시험정보가 발표되었습니다. 필기 실기 모두 웹디자인기능사 출제기준은 2021년 말까지 출제기준과 완벽하게 동일합니다. 다만, 실기시험에서 공개도면이 아직 2022년도 출제기준이 업데이트가 되지 않아서 확실하지는 않지만 거의 대동소이할 것으로 예상합니다.

만약 2022년도 공개도면의 유형이 바뀌는 부분은 다시 영상을 제작해서 업데이트할 예정이니 이런 부분은 걱정하지 마시고 수강하시면 됩니다.

 

코딩웍스와 함께!
2021년 출제기준에 맞춘 웹디자인 기능사 실기시험 완벽 가이드

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

 

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

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

 

 

▲ 웹디자인 기능사 필기/실기 출제기준(현재 출제기준은 2021년 12월 31일까지 유효함)

현행 웹디자인기능사 출제기준 적용기간은 2018.7.1.부터  2021.12.31 까지 입니다.
내년에는 어떻게 바뀔지 모르니까 가능하면 2021년 올해 꼭! 웹디자인 기능사 자격증 취득하시기 바랍니다. 실기 합격율이 점점 올라가니까 아마도 2022년부터는 난이도를 올리지 않을까 예상됩니다. 물론 저의 뇌피셜입니다.

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

2021년 3회차 실기시험부터 비주얼 스튜디오 코드(Visual Studio Code) 텍스트 에디터 사용 가능해졌습니다. 자세한 사항은 코딩웍스 인프런 블로그에서 확인해주세요.
https://www.inflearn.com/blogs/728

 

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


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

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

 

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

 


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

 

 


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

  • 총 27시간, 총 68개의 영상강의와 18개 핵심자료로 실기시험 합격을 자부하는 맞춤 강의
  • 총 27개의 HTML+CSS+JQUERY 핵심이론 강의
  • 실기시험 제작 모듈 완벽분석 강의(레이아웃,슬라이드,네비게이션,탭 메뉴, 레이어팝업)
  • 웹디자인 기능사 실기시험 통과의 가장 큰 난관! 슬라이드 제작
  • 코딩웍스 강의는 제이쿼리 제작 뿐만 아니라 순수 CSS로 슬라이드 완벽하게 구현
  • 학생 성향에 따라 제이쿼리 슬라이드 또는 CSS 슬라이드 제작 방식을 선택 가능
  • CSS 슬라이드 에니메이션(가로 슬라이드, 세로 슬라이드, 크로스페이드 슬라이드)
  • 제이쿼리 슬라이드 애니메이션(가로 슬라이드, 세로 슬라이드, 크로스페이드 슬라이드)
  • 모든 제작 모듈이 포함된 실기시험 최종본 3가지 제작 영상
  • 웹디자인 기능사 실기시험을 위한 필수적인 포토샵 CS6 사용법 및 이미지 제작 영상 
  • HTML+CSS 이론 교재 뿐만 아니라 모든 제작 모듈과 최종본 3가지 제작 파일을 다운로드
  • 코딩웍스 강의는 수강생의 합격여부가 아니라 얼마나 고득점으로 합격하느냐를 위한 진짜 강의
  • 실기시험 당일에 시험장 분위기, 절차, 요령, 제출방법, 자격증 신청 방법 등 상세한 영상까지~!


💡 수강대상

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


💡 수업목표

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


💡 준비사항

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


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

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


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

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


🙋🏻‍♂️ 강사소개

  • (현재) 프리랜서 프론트엔드 퍼블리셔
  • 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
  • 이젠 컴퓨터아카데미 웹 퍼블리싱 강사
  • 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
  • 이젠 컴퓨터아카데미 웹디자인 기능사 실기 자격증반
  • 라크피아 ICT 트레이닝 센터프론트엔드 퍼블리싱 마스터 코스 강사
  • 이지앤에듀프론트엔드 퍼블리싱, UI/UX 디자인
  • HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
  • 코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks



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


 

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

▼ 가로 슬라이드

▼ 세로 슬라이드

▼ 크로스 페이드 슬라이드

 

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

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

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

 

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

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

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

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

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

 

📝 최종본 제작 미리보기 

 

▼ 가로 고정형 최종본

▼ 가로 100% 최종본

▼ 세로 2컬럼 최종본

 


[필독] 블라켓(Brackets) 확장기능관리자 서비스 불가

블라켓(Brackets) 확장기능관리자 서비스 불가해졌습니다. 일시적인 것인지 영구적인 것인지 모르겠지만 현재로서는 영구적인 서비스 불가라고 생각됩니다. 좋은 텍스트 에디터였는데 Adobe 서비스가 중단되면서 여러가지로 사용중 문제도 생고 지금은 확장기능관리자 서비스 불가해졌습니다. 다른 익스텐션은 몰라도 에밋(Emmet)을 설치할 수 없습니다.

저도 오랬동안 애정하면서 사용했던 텍스트 에디터인데 아쉽지만 이제 비주얼 스튜디오 코드(Visual Studio Code)를 쓸 수 밖에 없네요. 

강의에 있는 블라켓츠 사용법 영상은 보지 마시고 비주얼 스튜디오 코드(Visual Studio Code)를 사용법을 충분히 학습하시고 학습 영상을 보시기 바랍니다. 만약 강의에 비주얼 스튜디오 코드(Visual Studio Code) 사용법이 커리큘럼에 없다면 아래에 코딩웍스 퍼블리싱 유튜브 채널 비주얼 스튜디오 코드(Visual Studio Code) 사용법 영상을 보시기 바랍니다.


  1. 비주얼 스튜디오 코드 사용법 및 환경설정 : https://youtu.be/ovbAh681j8o
  2. 비주얼 스튜디오 코드에서 에밋(Emmet) 사용법 : https://youtu.be/u1tFhCB9krY
  3. 비주얼 스튜디오 코드 필수 Extension 설치 및 사용법 : https://youtu.be/0j--ATQP2Qw
  4. 비주얼 스튜디오 코드에서 CSS 수정할 때 위로 올라가는 Full Reload 방지 : https://youtu.be/NWOxSd4ZuUk

💡 수업내용(커리큘럼)

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

  1. 코딩웍스 웹디자인 기능사 자격증 실기시험 강좌 소개
  2. 웹디자인 기능사 실기시험 당일에 시험장 분위기, 절차, 요령, 제출방법

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

  1. 블라켓츠(Brackets) 사용법 및 단축키 활용
  2. 블라켓츠(Brackets)에서 에밋(Emmet) 사용법 및 단축키 활용)
  3. 블라켓츠(Brackets) 실시간 미리보기(웹디자인 기능사 실기시험 폴더 구조 만들기)

섹션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. 웹디자인 실기시험 최종 점검하기 / 포토샵 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. [다운로드] 2021년 출제기준 웹디자인 기능사 실기시험 공개문제
  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

 

▲ 퍼블리셔 취업을 위한 코딩웍스 퍼블리싱 강의 로드맵

면접과 취업을 부르는 퍼블리셔 개인 포트폴리오 홈페이지 제작, 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.youtube.com/codingworks

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

커리큘럼 총 109 개 ˙ 30시간 24분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 코딩웍스 웹디자인 기능사 자격증 실기시험 강좌 소개
코딩웍스 웹디자인 기능사 자격증 실기시험 강좌 소개 미리보기 12:28
[필독] 학습 전 꼭! 보고 시작하세요.(블라켓, 비주얼스튜디오 관련, 코드 오류 체크) 39:08
[필독] 시험 보기 얼마 전에 꼭! 보고 가세요.(시험장 분위기, 절차, 요령, 제출방법) 54:26
[참고] HTML, CSS의 charset는 utf-8로 해야 한다... 에 관한 상세한 내용 미리보기 웹디자인 기능사 실기시험 텍스트에디터 필수 팁(tip) 미리보기
섹션 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
섹션 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
6. 제이쿼리 제작 방식 슬라이드(3가지 타입) 35:04
섹션 8. 웹디자인 기능사 실기시험 최종본 실전 제작
1. 최종본 제작 준비작업(폴더 파일 구조 만들기) 04:51
2. 공개문제 수험자 지시사항 주요항목 체크(A타입~C타입 공통) 미리보기 21:35
3. [최종본 제작] 가로 고정형(A1타입) – Part1 40:21
4. [최종본 제작] 가로 고정형(A1타입) – Part2 44:33
5. [최종본 제작] 가로 100%형(B4타입) – Part1 48:29
6. [최종본 제작] 가로 100%형(B4타입) – Part2 44:05
7. [최종본 제작] 세로 2컬럼(C2타입) – Part1 39:57
8. [최종본 제작] 세로 2컬럼(C2타입) – Part2 36:30
9.[최종본 제작 유의사항] 상단 네비게이션의 서브메뉴가 슬라이드 아래로 숨는 문제 해결하기 06:57
10.[최종본 제작 유의사항] 수험자 세부 지시사항에서 갤러리 이미지 투명도 변화시키기 03:27
섹션 9. 실기시험 최종 점검하기, 포토샵 CS6 사용법 및 이미지 제작하기(Photoshop CS6 영문판)
1. 웹디자인 실기시험 고득점을 위한 필수 항목들(팁, 감점사항, 오류체크 등) 27:57
2. 웹디자인 기능사 실기시험을 위한 포토샵 - 인터페이스 설명 및 필수 환경설정 미리보기 21:15
3. 웹디자인 기능사 실기시험을 위한 포토샵 - 파일 다루기(새 파일,불러오기,저장,선택영역) 24:45
4. 웹디자인 기능사 실기시험을 위한 포토샵 - 툴바 다루기(이동툴,문자툴,변형하기) 18:47
5. 웹디자인 기능사 실기시험을 위한 포토샵 - 이미지 제작하기(로고,SNS아이콘) 21:43
6. 웹디자인 기능사 실기시험을 위한 포토샵 - 이미지 제작하기(갤러리,배너,바로가기) 25:18
7. 웹디자인 기능사 실기시험을 위한 포토샵 - 이미지 제작하기(슬라이드 이미지) 24:12
섹션 10. 수강생 다운로드 참고자료
[다운로드] 2021년 출제기준 웹디자인 기능사 실기시험 공개문제
[다운로드] 코딩웍스 CSS 슬라이드 제작노트(3타입)
[다운로드] 최종본 제작 파일 완성본(가로형 고정형 - A1타입)
[다운로드] 최종본 제작 파일 완성본(가로 100퍼센트 - B4타입)
[다운로드] 최종본 제작 파일 완성본(세로 2컬럼 - C2타입)
블라켓 단축키(Brackets Shortcuts)
웹디자인기능사 실기 연습용 텍스트.txt
[다운로드] 이론학습 및 모듈제작 실습 폴더.zip
포토샵-이미지제작-A01(학생-실습용)
섹션 11. 모듈 제작 완성본 다운로드(슬라이드,네비게이션,레이아웃,레이어 팝업,탭 메뉴)
[모듈 제작 완성본] 레이아웃(3가지 타입) - 보더 사용
[모듈 제작 완성본] 레이아웃(3가지 타입) - 배경색 사용
[모듈 제작 완성본] 네비게이션
[모듈 제작 완성본] 레이어 팝업
[모듈 제작 완성본] 슬라이드 - CSS 방식
[모듈 제작 완성본] 슬라이드 - 제이쿼리 방식
[모듈 제작 완성본] 탭 메뉴(공지사항, 갤러리)
섹션 12. [코딩웍스] 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) 단축키
섹션 13. 강의 관련 오류 수정 및 자주 묻는 질문들(FAQ)
[필독] 웹디자인 기능사 실기시험 폴더 구조 만들기
[FAQ] 블라켓(Brackets)에서 생기는 표시 오류
[FAQ] Brackets에서 Emmet 코드힌트 안생기는 오류 해결 방법
[FAQ] 블라켓(Brackets) 실시간 미리보기 크롬으로 열리게 하기(기본 브라우저 설정)
[오류수정] section 태그와 article 태그 사용에 관한 오류
[FAQ] HTML 내에 파일 링크할 때 꼭! 상대주소로 하셔야 합니다.
[FAQ] 블라켓(Brackets)에서 에밋(Emmet) 수동 설치하기
강의 게시일 : 2020년 03월 05일 (마지막 업데이트일 : 2021년 10월 25일)
수강평 총 40개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5.0
40개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
My own life thumbnail
덕분에 웹디자인기능사 합격했습니다! 4번 떨어지고 이제서야 선생님 강의 결제하고 시험봤는데 합격했어요.... 이기적웹디자인 기능사 교제 들고간 제 옆자리의 친구는 그냥 슬라이드 만들다가 그만두고 기권하더라고요....이기적 웹디자인 기능사 유튜브 강의는 뭔가 설명과 코드의 일관성이 없다고 할까......무튼 돈을 써야할때 안쓰고 버티면 그 이상의 시간과 비용이 든다는 것을 깨달았습니다
2021-09-17
지식공유자코딩웍스(Coding Works)
My own life님 수강평 감사합니다. 합격 진심으로 축하합니다. 끈기가 대단하시네요~!! 실기시험 보기도 바쁜데 옆사람 상황도 체크했네요. 시험 볼 때 여유있게 시험보신 것 같아요~ 다시 한번 축하합니다~
2021-09-17
Leo Yeo thumbnail
드디어 정확히 1년만에 완강을 하게 되었네요. 이 강좌는 웹디자이너가 도실분들에게 기본의 정석과도 같은 강좌입니다.추천 합니다. 정말 도움 많이됩니다
2021-03-25
지식공유자코딩웍스(Coding Works)
Leo 님~ 드디어 완강하셨군요. 축하드립니다~ 웹 퍼블리싱으로 취업하시는데 도움이 되었기를 바랍니다. 수강평 감사드려요~^^
2021-03-25
kingey thumbnail
강의듣고 3회차 시험봐서 실기 합격 했습니다~! 기능도 다 넣고 구현도 잘 됐는데 점수가.. 62점으로 턱걸이 합격했는데 도대체 어디서 감점인지 모르겠어요... ㅠㅠ 그래도 합격해서 다행이고 강의 정말 좋고 실기시험보는 분들께 추천합니다! 친절하게 설명해주시고 이해도 정말 잘돼요!
2021-09-17
지식공유자코딩웍스(Coding Works)
kingey 님~ 먼저 합격 축하드려요. 다 잘 만드셨는데 감점이 너무 많이 나왔네요. 그래도 말씀처럼 턱걸이지만 합격하셨으니까 된거요. 걱정 많이 하셨을텐데 다행이에요. 고생하셨습니다!!
2021-09-17
헤일리 thumbnail
꼼꼼하게 알려주시고 도움 많이 되었습니다! 다만 html을 아예 모르는 생초보가 들으면 따라가기 어려운 부분들도 있을 것 같아요 한번은 개념 익히고 보시는 것을 추천
2020-03-09
지식공유자코딩웍스(Coding Works)
코딩웍스입니다. 먼저 수강평 감사합니다~ HTML 이론 영상이 많으면 학습 초반 부분이 너무 길어질 것 같아서 HTML 이론 부분을 간소화 했는데 이 점이 아위우셨군요. 부족하다고 생각되시는 HTML 이론 부분은 저의 유튜브 채널에 길게 자세히 되어 있는 영상들이 많이 있으니까 그 영상들을 참고해주세요. 코딩웍스 온라인 강의가 도움이 되고 있다니 기쁘니다~^^ 웹디자인 기능사 실기시험에 고득점으로 합격하시길을 기원합니다.
2020-03-10
하이콜리 thumbnail
믿고 배우는 선생님!!! 유튜브 보고 넘어왔습니다!! 웹디자인 가르쳐주시는 분들 중에 가장 깔끔하게 가르쳐주시는것같아요ㅜㅜ 덕분에 헷갈리는것도 줄고 시간단축도 꽤나 도움되었습니다ㅜㅜ요즘은 제가 만들어놓은 코딩들 보면서 참 뿌듯합니당!!두고두고 복습하면서 실기때 좋은 점수로 합격할것같아요ㅜㅠ~!!!!
2020-03-09
지식공유자코딩웍스(Coding Works)
안녕하세요. 코딩웍스입니다. 코딩웍스 유튜브 채널을 통해서 온라인 강의 수강하신 거군요. 수강신청 감사드립니다. 웹디자인 기능사 실기시험에서 디자인 하는 작업, 포토샵으로 이미지 편집하는 부분은 크게 부담되지은 않으시겠지만 그래도 실기시험 전에 유튜브 통해서 포토샵으로 이미지 편집하는 기본은 미리 배워두시길 권해드립니다. 지금 학습진도가 많지는 않으신데 실기시험 전에는 영상 보시면서 여러번 반복하시길 바랄게요~^^ 4월초에서 중순에 있는 웹디자인 기능사 실기시험에서 꼭! 고득점으로 합격하시길을 기원합니다.
2020-03-10
깜짝 할인 중(D-1)
20% 166,100원 132,000원

월 26,400원

5개월 할부 시
폴더에 추가 666 공유
지식공유자 : 코딩웍스(Coding Works)
총 109개 수업˙총 30시간 24분
평생 무제한 수강
수료증 발급 강의
입문 대상 초급 중급이상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스