메일 인증하면, 매일 특별한 선물💌
Thumbnail
인프런 추석할인 중(D-5)
개발 · 프로그래밍 웹 개발
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
(5.0)
5개의 수강평 ∙ 97명의 수강생

20%

44,880원

56,100원
지식공유자 : 코딩웍스(Coding Works)
총 120개 수업˙총 38시간 38분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
폴더에 추가 124 공유
초급자를 위해 준비한
[웹 개발, 웹앱 디자인] 강의입니다.

HTML+CSS+JS 실전 포트폴리오(시즌2)는 중급 퍼블리싱으로 다양한 실전 예제 학습을 통해 퍼블리싱 중급 실력을 위한 퍼블리싱 기본기를 익히시게 됩니다. 특히, 다양한 실전 예제와 전체 반응형 웹사이트 제작을 통해 중급 퍼블리싱에 자신감이 생기고 수업한 작업물을 통해 취업을 위한 개인 포트폴리오로 귀중한 자료가 툅니다. 38시간 가까운 충분한 학습량과 실전 예제를 통한 중급 퍼블리시 노하우를 익히게 되는 퍼블리싱 수업입니다.

✍️
이런 걸
배워요!
HTML+CSS+JS 실전 예제로 퍼블리싱 중급 스킬 향상
웹사이트 퍼블리싱 중급 실력과 노하우 향상
블럭요소와 인라인요소에 대한 정확한 개념과 활용
position과 transform에 대한 정확한 개념과 실전 활용
텍스트에디터 Visual Studio Code와 필수 Extension 사용법
퍼블리싱을 위한 jQuery & JavaScript 기본기
퍼블리셔에게 필수적인 제이쿼리 자바스크립트 활용 예제
다양한 반응형 웹사이트 제작을 통한 중급 실력 향상
전체 반응형 웹사이트 제작 과정을 통해 포트폴리오 제작

중급으로 올라서는 실전 웹 퍼블리싱!
HTML+CSS+JS 실전 포트폴리오 시즌 2.

드디어 기다리시던(?) 코딩웍스 퍼블리싱 강의,
HTML+CSS+JS 실전 포트폴리오 시즌2가 오픈되었습니다.

시즌2는 시즌1의 실전 퍼블리싱 예제와 겹치지 않는, 완전히 새로운 실전 예제를 중심으로 제작되었습니다. 취업을 위한 퍼블리싱 포트폴리오 결과물을 만들어보는 만큼, 퍼블리싱 실력을 중급 이상으로 Skill-Up하고 싶은 분들에게 알맞은 강의입니다.


HTML+CSS+JS
실전 포트폴리오 시즌2

HTML+CSS+JS 실전 포트폴리오 시즌2는 중급 퍼블리싱을 위한 퍼블리싱 필수이론 및 HTML+CSS 퍼블리싱 실전 예제와 jQuery(제이쿼리), Javascript(자바스크립트) 실전 예제 및 2가지 전체 반응형 웹사이트 제작 과정을 포함한 27가지 이상의 다양한 실전 예제 제작 과정으로 구성되어 있습니다. 총 38시간 정도의 강의 시간만큼이나 충실한 내용과 체계적인 이해를 돕는 설명으로 제작된 퍼블리싱 포트폴리오 실전 제작 영상을 시청하고 학습할 수 있게 됩니다.

학습 내용

  • 시즌2 - CSS 버튼 & 네비게이션
  • 시즌2 - CSS 키프레임 애니메이션
  • 시즌2 - CSS 호버이펙트
  • 시즌2 - CSS 섹션 UI 디자인
  • 시즌2 - 웹사이트 프로토타입(Web Site Prototype) 제작
  • 시즌2 - 자바스크립트 & 제이쿼리(JavaScript, jQuery) 실전 예제
  • 시즌2 - 실전 반응형 웹사이트 - 넷플릭스 공식사이트
  • 시즌2 - 실전 반응형 웹사이트 - 크롬 브라우저 다운로드

 


▲ 위의 수강생분처럼 힘든 독학이지만 항상 열심히 하시는 분들 보면 뿌듯하고 고맙습니다.

 


강의 관련 예상 질문 & 필독 사항 ⚡

Q. HTML+CSS+JS 실전 포트폴리오 시즌1을 듣지 않고 바로 시즌2를 수강해도 되나요?

시즌1을 반드시 들으실 필요는 없습니다. 다만 시즌1에서는 퍼블리싱 기초에 대한 설명들을 자세히 설명하고 있는 반면 시즌2에서는 그런 부분들은 최소화한 대신 좀 더 깊이 있는 내용을 다루고 있습니다. 시즌1의 예제를 먼저 살펴보신 다음 스스로 충분히 제작 가능한 수준이라면 바로 시즌2로 오셔도 됩니다. 하지만 시즌1을 통해서 설명하는 내용과 그리고 제작되는 예제는 시즌2와 중복되지 않기 때문에 시즌1 완강 후 시즌2를 수강하시는 것을 추천드립니다.

HTML+CSS+JQUERY 포트폴리오 실전 퍼블리싱(시즌1)
다양한 실전 예제로 배우는 퍼블리싱 기본기

Q. HTML+CSS+JS 실전 포트폴리오 시즌2에 제작된 완성본 HTML을 제공하나요?

네. 수강생 참고 자료 다운로드 섹션에서 영상에서 제작된 모든 실전 예제의 완성본이 포함된 압축 파일을 받으실 수 있습니다. (HTML, CSS, JS, 이미지, 참고 사이트, 소스텍스트, 와이어프레임 PDF 등)

※ 강의 영상 시작 전 다운로드 받으시신 압축 파일을 푸시고 index.html, style.css 파일을 삭제하고 시작하시면 됩니다. 소스 및 images 폴더를 제외하고 HTML 기본 구조부터 만들어가시면 됩니다. 혹시라도 완성본을 참고해야 할 경우, 언제든 압축 파일을 다시 풀어서 보시면 됩니다.

Q. 수강 전에 선행되는 웹 코딩 능력은 어느 정도인가요?

먼저 HTML+CSS에 대한 기본적인 이해가 필요합니다. 예를 들어 float, position 속성에 대한 이해가 부족하신 분은 따라오기 좀 버거우실 거예요. 시즌1에서는 이런 부분도 강의에서 반복적으로 설명하지만, 시즌2는 기본적인 퍼블리싱 능력을 갖춘 분들을 염두에 두고 제작된 강의입니다. 참고해주세요!

또한, 제이쿼리 자바스크립트 선행 능력은 크게 요구되지 않습니다. 단, 제이쿼리의 필수적인 핵심 이론에 대한 이해가 필요합니다. (클래스 제어, 요소 탐색 등) 강의 전체적으로 제이쿼리 기반으로 상호작용을 만들고 있고, 자바스크립트는 예제를 경험하는 측면에서 사용하기 때문에 자바스크립트 능력에 대한 부담은 갖지 않으셔도 됩니다.

Q. 강의에서 어떤 텍스트에디터를 사용하나요?

비주얼 스튜디오 코드(Visual Studio Code)로 제작된 강의입니다. 비주얼 스튜디오 코드는 사용제한이 없은 Free 프로그램입니다. 텍스트 에디터는 비주얼 스튜디오 코드(Visual Studio Code)를 사용하지 않으셔도 수강생 본인이 편하게 잘 사용하고 있는 텍스트 에디터가 있다면 그것을 사용하셔도 무방합니다.

비주얼 스튜디오 코드 다운로드 (클릭)

※ 아래 비주얼 스튜디오 코드(Visual Studio Code) 관련 영상을 꼭! 보시고 예제 제작을 시작하시기를 권해드립니다. 비주얼 스튜디오 코드 익스텐션 설치 PDF 파일에 있는 익스텐션은 가급적 모두 설치하세요. 

Q. 예제 제작에 사용된 이미지는 저작권이 있는 이미지인가요?

예제 제작에 사용된 이미지는 저작권이 없는 이미지를 사용했습니다. 픽사베이, 프리픽에서 검색해서 예제에 필요한 이미지로 사용했습니다. 수강생 분들께서는 강의 영상 예제 제작 1회차에는 첨부된 이미지로 하시되 개인 포트폴리오 홈페이지에 올리실 경우 픽사베이, 프리픽에서 이미지를 꼭 변경해서 올리시길 바랍니다.

Q. 예제 학습 순서는 처음부터 순서대로 학습하는건가요?

예제 학습는 순서를 꼭 지키실 필요는 없습니다. 원하시는 섹션에 원하시는 예제를 학습하시면 됩니다. 섹션의 순서가 난이도 낮음에서 높음으로 올라가는 것은 아닙니다. 예제의 종류가 다를 뿐입니다. 단, 웹사이트 프로토타입(Web Site Prototype) 제작 과정과 실전 반응형 웹사이트은 학습량이 많기 때문에 시작하시면 이어서 끝까지 학습하시는 것을 권해드립니다.

시즌2 [필수이론] 영상과 시즌1 [필수이론] 영상을 먼저 학습하고 실전 예제 제작으로 꼭 넘어오실 필요는 없습니다. 실전 예제 제작하다가 예제 제작에서 나온 내용이 필수이론 영상에 있으면 학습차원에서 한번 더 보시면 좋습니다. 실전 예제 제작에 사용되는 이론을 모두 필수이론에 담을 수는 없기 때문에 실전 예제와 필수이론을 병행해서 보시기 바랍니다.

[TMI] 퍼블리싱 공부하고 실전 예제 제작할 때 알아야 되는 이론이 굉장히 많습니다. 마음 같아선 이론적인 부분을 모두 정리하고 영상을 만들고 싶지만 현실적으로 어려운 부분이 있으니.. 시즌1, 시즌2 이론 영상과 코딩웍스 유튜브 채널에 있는 이론 영상 그리고 여러분들의 구글링을 통해서 부족한 부분은 채워 나가시기 바랍니다.

Q. 실전 예제 완성본과 이론 예제 완성본은 어디에서 다운 받나요?

완성본을 어디에서 다운받냐고 질문게시판에 문의하시는 분들이 가끔 있으십니다. 수업 영상에서 제작된 모든 완성본 파일(html, css, js, 이미지 파일 등)은 아래 보이는 마지막 섹션에 모든 완성본을 다운로드 받으실 수 있습니다.



🙋🏻‍♂️ 시즌2 강의 관련 예상되는 질문과 필독사항


Q) 예제 제작하면서 나오는 중급 CSS 이론 설명 영상이 있나요?
A)
지금 과정은 초급 퍼블리싱 예제 제작을 하는 과정은 아닙니다. 중급 퍼블리싱 예제를 제작하는 과정입니다. 그래서 CSS 초중급 이론은 어느 정도 알고 있으셔야 합니다. 그렇다고 꼭 잘 아실 필요는 없습니다. CSS 초중급 이론은 예제를 제작하면서 지속적으로 반복합니다. 그리고 코딩웍스 유튜브 퍼블리싱 채널에 [중급이론] CSS 중급이론 이라는 재생 목록에 예제 제작에 필요한 필수 중급 이론 영상이 자세히 있으니, 지금 과정을 들으시면서 중급 이론을 병행하시면 좋습니다.

Q) 이 과정 수강하면 실무에서 퍼블리셔로 일할 수 있을까요?
A) 이 과정에 있는 퍼블리싱 내용을 모두 이해하고 잘 활용할 수 있다면 가능합니다. 하지만 퍼블리싱이라는게 충분한 경험이 있어야 실무에서 일할 수 있습니다. 지금 과정과 같은 것들을 몇개 더 공부하시고 전체 웹사이트 제작 과정을 몇개 공부하시면 될 거라 생각됩니다. 물론 개인 포트폴리오 홈페이지 제작도 하셔야 됩니다. 퍼블리싱이 진입장벽이 생각보다 높은 편입니다. 영상 한번 보신다고 그 안에 내용과 노하우가 모두 학생에게 전해지는건 아니기 때문에 위에 설명한 학습방법을 통해서 내 것으로 만드는 과정을 하시기 바랍니다.
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)과 HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)를 충분히 이해하시면서 완강하셨다면 다음 학습 로드맵이 자연스럽게 생기실거에요.

Q. 공부하다가 모르는게 있으면 질문은 어디에 하나요? 
A. 질문이 있으시면 [질문&답변] 게시판에 글을 남기시면 바로는 아니어도 확인되면 답변을 드립니다. 그리고 
질문은 최대한 구체적으로 해주세요. 질문이 구체적이지 않았을 때 충분한 답변이  좀처럼 쉽지 않습니다. 그래서 질문하실 때는 궁금하신 내용과 함께 작성 중이신 HTML, CSS, JQUERY 코딩 화면 캡처해서 첨부해 주시면 답변드리기가 훨씬 수월합니다.

Q. 반응형 웹사이트 제작 강의가 있던데 어떤 것을 먼저 들어야 하나요? 
A. 반응형 웹사이트 전체를 제작하는 과정을 듣기 전에 지금 과정과 시즌2에서 충분히 이론과 실전 예제 제작에 대한 실력을 높이시고 반응형 웹사이트 전체 제작 과정으로 오시는 것을 추천드립니다.
반응형 웹사이트 전체 제작 과정이라 지금 과정처럼 부분 부분 상세하게 다루기가 어렵기 때문에 실전 퍼블리싱 과정에서 충분히 훈련되고 웹사이트 전체 제작과정으로 오시면 이해도가 훨씬 높을거라 생각됩니다.

Q. 강사님 수업 중에 퍼블리셔 취업 진짜 실전 가이드를 먼저 보면 좋을까요? 
A. 퍼블리싱 스킬를 더 익히는 것도 중요하지만 먼저 퍼블리셔로서 기본기를 갖추는 것이 우선되어야 합니다. 퍼블리셔 취업 실전가이드 전자책(PDF)에서는 퍼블리싱 기본기란 바람직한 코딩습관과 원칙, 경력자 처럼 퍼블리싱 하기 등 퍼블리셔로서 반드시 알아야 하는 내용을 꼼꼼히 정리했습니다. 퍼블리셔 취업 실전가이드 전자책(PDF)을 먼저 보시고 퍼블리싱 기본기에 대한 이해도를 충분히 갖고 학습하시기를 권해드립니다. 아래 이미지를 클릭하시면 수업 소개 내용을 보실 수 있습니다.

[질문] 작성 시 꼭 지켜주세요!

  • 질문은 구체적으로 남겨주시고, 강의 내용과 관련이 없는 질문은 삼가주세요.
  • [질문/답변]에서 질문하실 때 질문 내용이 명확하게 전달될 수 있도록 구체적으로 질문해주시고, 어떤 섹션, 어떤 토픽에 대한 질문이라고 표시해주세요. 강의 분량이 많기 때문에 정확히 어떤 섹션의 어떤 토픽인지 지정하지 않으시면 정확한 답변이 어려울 수 있습니다.
  • 강의 내용과 관계가 없는 내용은 질문을 삼가주세요. 예를 들어 수강생 분의 회사 내 퍼블리싱 작업에 문제가 있다고, 코드를 봐달라고 요청하시는 경우가 있습니다. 이런 질문에는 답변을 드리기 어렵습니다.

시즌2 퍼블리싱 실전 예제 미리보기 ⚡️

[01] CSS 버튼 & 네비게이션

3타입 상단 네비게이션
드롭다운 네비게이션 (CSS 방식, 3타입)
드롭다운 네비게이션 (jQuery 방식, 3타입)

[02] CSS 키프레임 애니메이션

서클 로딩 애니메이션
아시아나항공 로딩 애니메이션
폰트 아이콘 텍스트 섀도 Filter Animation
폰트 아이콘 텍스트 섀도 Filter Animation - 응용

[03] CSS 호버 이펙트

아웃라인 텍스트
클립패스(Clip-path) 이미지 오버레이
툴팁(Tooltip) 만들기 - 기본형
툴팁(Tooltip) 만들기 - 응용형

[04] CSS 섹션 UI 디자인

폰트어썸 UI
폰트어썸 그라디언트 서비스 가격표
Flex Grid 카드 UI (World Best Cities)
스마트 아이템 쇼핑몰
개인 프로필 카드 (다크모드)
예쁜 표(table) 디자인
커스텀 체크박스 로그인 폼

[05] CSS 웹사이트 프로토타입
(Web Site Prototype)

Website Prototype - 네이버 반응형 회원가입 폼
풀스크린 네비게이션 반응형 포트폴리오
with jQuery
풀스크린 네비게이션 반응형 포트폴리오 with jQuery
- 애니메이션 변형
English Academy 헤더 드롭다운 네비게이션
포트폴리오 CSS Grid 레이아웃(반응형) - PC ver.
포트폴리오 CSS Grid 레이아웃(반응형) - Tablet ver.
포트폴리오 CSS Grid 레이아웃(반응형) - Mobile ver.

[06] 자바스크립트(JavaScript) &
제이쿼리(jQuery)


제이쿼리 반응형 애니메이션 모달(Modal)

제이쿼리 Front Back 트랜지션 화면전환
사운드 재생 제어하기
유효성 체크 애니메이션 로그인폼
제이쿼리 Front Back 트랜지션 화면전환 (프로토타입 #01)
제이쿼리 Front Back 트랜지션 화면전환(프로토타입 #02)
검색창 확장하기
넷플릭스 FAQ with jQuery

[07] 실전 반응형 웹사이트-
넷플릭스 공식사이트

넷플릭스 공식사이트 PC ver.
넷플릭스 공식사이트 Mobile ver.

[08] 실전 반응형 웹사이트 -
크롬 브라우저 다운로드

크롬 브라우저 다운로드 공식사이트 PC ver.
크롬 브라우저 다운로드 공식사이트 Mobile ver.

[참고하시면 좋습니다!] HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1) 무료영상

 

 

 

아래 영상은 HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1) 강좌 무료 영상입니다.
시즌1을 수강하지 않으셔도 들으시면서 학습하실 수 있습니다. 아래 강의 영상들은 시즌2에서 필요한 내용도 많이 있으니 꼭! 보시기 권해드립니다.

 

 HTML+CSS+JQUERY 포트폴리오 실전 퍼블리싱(시즌1)
다양한 실전 예제로 배우는 퍼블리싱 기본기

 

 

 

 

 

 

 

 

  • 퍼블리싱의 모든 것! HTML 인라인 요소, 블록 요소, 인라인블록 요소
  • CSS로 HTML 가로 배치하기(float, overflow, clear, inline-block)
  • 제이쿼리(jQuery) 시작하기(폴더구조, 링크방법)
  • 제이쿼리(jQuery) 필수 핵심이론(기본 구문 만들기, 선택자)
  • 제이쿼리(jQuery) 필수 핵심이론(함수)
  • 제이쿼리(jQuery) 필수 핵심이론(메서드)
  • 제이쿼리(jQuery) 필수 핵심이론(효과 메서드 –slideDown, slideUp, fadeIn, fadeOut)
  • 제이쿼리(jQuery) 필수 핵심이론(클래스 제어 메서드 – addClass, removeClass, toggleClass)
  • 제이쿼리(jQuery) 필수 핵심이론(요소탐색 메서드 – children, siblings)
  • CSS 키프레임 애니메이션 활용한 실전 예제 제작 01(원형 크기 변경 로딩 애니메이션)
  • CSS 키프레임 애니메이션 활용한 실전 예제 제작 02(사각형 좌표 변경 로딩 애니메이션)
  • CSS 키프레임 애니메이션 활용한 실전 퍼블리싱 03(더블 보더 레디어스 애니메이션)
  • 가상클래스 hover를 제대로 이해하는 기본형 드롭다운 네비게이션
  • 가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 01(before after 기본 사용법)
  • 퍼블리셔라로서 꼭! 알아야 하는 자바스크립트, 변수(var)와 조건문(if) - 20세 성인 체크
  • 웹 퍼블리셔를 위한 크롬 확장 프로그램 추천(1탄)
  • 웹 퍼블리셔를 위한 크롬 확장 프로그램 추천(2탄)
  • a태그 앵커 만들고 2가지 방식으로 Smooth Scrolling 하기(제이쿼리 플러그인, CSS 속성)
  • 퍼블리싱 강사가 강의를 잘하는지 못하는지 구분하기(display속성의 이해도)
  • 상대적인 폰트 크기 em 단위와 rem 단위 이해하기
  • 부모요소의 값을 상속하는 inherit 이해하기
  • CSS calc() 산술식(사칙연산)
  • CSS에서 변수 var() 사용하기
  • 가상클래스의 꽃(:before :after) 사용법
  • 하드코딩으로 이미지맵(image map) 만들기

🙂 TMI... 인프런 코딩웍스 블로그

인프런 코딩웍스 블로그에서 퍼블리싱을 위한 소소한 팁(Tip)과 정보가 있습니다. 

인프런 코딩웍스 블로그 보러가기 : https://www.inflearn.com/users/@codingworks/blogs

커리큘럼

섹션 0. 시즌2 - 강의소개 및 완성본 미리보기 & 제작노트

  • [소개영상] 완성본 미리보기 및 제작노트

섹션 1. 비주얼 스튜디오 코드(Visual Studio Code) 사용법 및 필수 익스텐션

  • 비주얼 스튜디오 코드(Visual Studio Code) 사용법 및 환경설정
  • 비주얼 스튜디오 코드(Visual Studio Code)에서 에밋(Emmet) 사용법
  • 비주얼 스튜디오 코드에서 CSS 수정할 때 위로 올라가는 Full Reload 방지
  • 비주얼 스튜디오 코드 필수 세팅, 단축키 변경, 필수 Extension 설치(PDF)

섹션 2. [필수이론] 퍼블리싱 실전예제 제작을 위한 이론 및 팁(Tip)

  • 플렉스(Flex) 속성으로 자유롭게 자식요소 정렬하기
  • 비디오 백그라운드 섹션(Flex 레이아웃)
  • 앵커(anchor) 만들고 부드럽게 스크롤해서 찾아가기(플러그인, CSS 속성)
  • 반응형 웹 제작을 위한 미디어 쿼리(Media Query)
  • 폰트 아이콘 사용법(FontAwesome 4.7)
  • 폰트 아이콘 사용법(XEICON)
  • 웹 폰트 사용법(구글 웹 폰트, 눈누 한글 웹 폰트)
  • 서버에 업로드 전 필수적인 이미지 용량 최적화(Image Optimize)
  • body 안에 또 다른 html 불러오는 iframe 활용하기
  • filter 속성으로 이미지 색상을 자유자재로 변경하기
  • object-fit과 object-position으로 img를 배경처럼 사용하기
  • 탭 메뉴 제작을 위한 input 속성선택자, 인접선택자, 형제선택자
  • 인라인 자바스크립트 활용하기(onclick 자바스크립트 이벤트)

섹션 3. 시즌2 - CSS 버튼 & 네비게이션

  • CSS 버튼 & 네비게이션 - 3타입 상단 네비게이션
  • CSS 버튼 & 네비게이션 - 드롭다운 네비게이션(CSS+JQUERY)

섹션 4. 시즌2 - CSS 키프레임 애니메이션

  • CSS 애니메이션 - 폰트 아이콘 텍스트쉐도우 filter Animation
  • CSS 애니메이션 - 아시아나 항공 로딩
  • CSS 애니메이션 - 써클 로딩(1)
  • CSS 애니메이션 - 써클 로딩(2)

섹션 5. 시즌2 - CSS 호버이펙트

  • CSS 호버이펙트 - 아웃라인 텍스트
  • CSS 호버이펙트 - 툴팁(Tooltip) 만들기(기본형)
  • CSS 호버이펙트 - 툴팁(Tooltip) 만들기(응용형)
  • CSS 호버이펙트 - 클립패쓰(Clip-path) 이미지 오버레이

섹션 6. 시즌2 - CSS 섹션 UI 디자인

  • CSS 섹션 UI 디자인 - 폰트어썸 UI
  • CSS 섹션 UI 디자인 - 예쁜 표(table) 디자인
  • CSS 섹션 UI 디자인 - 폰트어썸 그라디언트 서비스 가격표
  • CSS 섹션 UI 디자인 - 스마트 아이템 쇼핑몰
  • CSS 섹션 UI 디자인 - Flex Grid 카드 UI(World Best Cities)
  • CSS 섹션 UI 디자인 - 개인 프로필 카드(다크모드)
  • CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼

섹션 7. 시즌2 - 웹사이트 프로토타입(Web Site Prototype) 제작

  • WebSite Prototype - 네이버 반응형 회원가입 폼
  • WebSite Prototype - 풀스크린 네비게이션 반응형 포트폴리오 with jQuery
  • WebSite Prototype - English Academy 헤더 드롭다운 네비게이션
  • WebSite Prototype - 포트폴리오 CSS Grid 레이아웃(반응형)

섹션 8. 자바스크립트 & 제이쿼리(JavaScript, jQuery) 실전 예제

  • 제이쿼리 vs 자바스크립트의 차이, 바닐라 자바스크립트란?
  • 제이쿼리 반응형 애니메이션 모달
  • JavaScript & jQuery - 제이쿼리 Front Back 트랜지션 화면전환
  • JavaScript & jQuery - 푸터 패밀리사이트 셀렉트 커스텀 스타일
  • JavaScript & jQuery - 검색창 확장하기
  • JavaScript & jQuery - 넷플릭스-FAQ with jQuery
  • JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼
  • JavaScript & jQuery - 사운드 재생 제어하기

섹션 9. 시즌2 - 실전 반응형 웹사이트 - 넷플릭스 공식사이트

  • 실전 반응형 웹사이트 - 넷플릭스 공식사이트(1) - 제작노트 및 필수사항
  • 실전 반응형 웹사이트 - 넷플릭스 공식사이트(2) - 기본구조만들기
  • 실전 반응형 웹사이트 - 넷플릭스 공식사이트(3) - Header & Welcome
  • 실전 반응형 웹사이트 - 넷플릭스 공식사이트(4) - 동일한 형식의 4개 섹션
  • 실전 반응형 웹사이트 - 넷플릭스 공식사이트(5) - FAQ Section
  • 실전 반응형 웹사이트 - 넷플릭스 공식사이트(6) - Footer
  • 실전 반응형 웹사이트 - 넷플릭스 공식사이트(7) - Login Modal
  • 실전 반응형 웹사이트 - 넷플릭스 공식사이트(8) - 모바일 변환작업

섹션 10. 시즌2 - 실전 반응형 웹사이트 - 크롬 브라우저 다운로드

  • 실전 반응형 웹사이트 - 크롬 브라우저 다운로드(0) - 제작노트 및 필수사항
  • 실전 반응형 웹사이트 - 크롬 브라우저 다운로드(1) - 기본구조-Header
  • 실전 반응형 웹사이트 - 크롬 브라우저 다운로드(2) - Welcome Section
  • 실전 반응형 웹사이트 - 크롬 브라우저 다운로드(3) - Feature Section
  • 실전 반응형 웹사이트 - 크롬 브라우저 다운로드(4) - CallAction & Footer
  • 실전 반응형 웹사이트 - 크롬 브라우저 다운로드(5) - Footer Copyright
  • 실전 반응형 웹사이트 - 크롬 브라우저 다운로드(6) - 제이쿼리 상호작용
  • 실전 반응형 웹사이트 - 크롬 브라우저 다운로드(7) - 모바일 레이아웃 변환(1)
  • 실전 반응형 웹사이트 - 크롬 브라우저 다운로드(8) - 모바일 레이아웃 변환(2)
  • 실전 반응형 웹사이트 - 크롬 브라우저 다운로드(9) - 모바일 레이아웃 변환(3)

섹션 11. 완성본 및 참고자료 다운로드

  • [완성본 다운로드] 시즌2 - [01]CSS 버튼 & 네비게이션
  • [완성본 다운로드] 시즌2 - [02]CSS 키프레임 애니메이션
  • [완성본 다운로드] 시즌2 - [03]CSS 호버이펙트
  • [완성본 다운로드] 시즌2 - [04]CSS 섹션 UI 디자인
  • [완성본 다운로드] 시즌2 - [05]웹사이트 프로토타입(Web Site Prototype
  • [완성본 다운로드] 시즌2 - [06]자바스크립트 & 제이쿼리(JavaScript, jQuery)
  • [완성본 다운로드] 시즌2 - [07]실전 반응형 웹사이트 - 넷플릭스 공식사이트
  • [완성본 다운로드] 시즌2 - [08]실전 반응형 웹사이트 - 크롬 브라우저 다운로드

연관 강의 함께 보기 📚

HTML+CSS+JQUERY 포트폴리오
실전 퍼블리싱 시즌 1
 (클릭)

반응형 웹사이트 포트폴리오
(Architecture Agency)
 (클릭)

반응형 웹사이트 포트폴리오
(App Official Landing Website)
 (클릭)

플렉스(Flex) 반응형 웹사이트 포트폴리오
(The World's Best Cities)
 (클릭)

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
웹 코딩을 어느 정도 알고 있는 분
중급 퍼블리싱 스킬을 높이고 싶은 퍼블리셔 & 개발자
웹 퍼블리셔로 취업 또는 이직을 희망하는 분
📚
선수 지식,
필요한가요?
HTML, CSS, jQuery 기본

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

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

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

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

커리큘럼 총 120 개 ˙ 38시간 38분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 시즌2 - 강의소개 및 완성본 미리보기 & 제작노트
섹션 2. [필수이론] 퍼블리싱 실전예제 제작을 위한 이론 및 팁(Tip)
섹션 3. 시즌2 - CSS 버튼 & 네비게이션
CSS 버튼 & 네비게이션 - 3타입 상단 네비게이션 35:23
CSS 버튼 & 네비게이션 - 드롭다운 네비게이션(CSS 3가지 방식, jQuery 3가지 방식)-01 16:19
CSS 버튼 & 네비게이션 - 드롭다운 네비게이션(CSS 3가지 방식, jQuery 3가지 방식)-02 22:38
CSS 버튼 & 네비게이션 - 드롭다운 네비게이션(CSS 3가지 방식, jQuery 3가지 방식)-03 20:01
섹션 4. 시즌2 - CSS 키프레임 애니메이션
CSS 애니메이션 - 폰트 아이콘 텍스트쉐도우 filter Animation 미리보기 11:31
CSS 애니메이션 - 아시아나 항공 로딩 24:27
CSS 애니메이션 - 써클 로딩(1) 15:29
CSS 애니메이션 - 써클 로딩(2) 14:54
섹션 5. 시즌2 - CSS 호버이펙트
CSS 호버이펙트 - 아웃라인 텍스트 미리보기 20:43
CSS 호버이펙트 - 툴팁(Tooltip) 만들기(기본형) 20:29
CSS 호버이펙트 - 툴팁(Tooltip) 만들기(응용형) 24:16
CSS 호버이펙트 - 클립패쓰(Clip-path) 이미지 오버레이(1) 17:53
CSS 호버이펙트 - 클립패쓰(Clip-path) 이미지 오버레이(2) 15:52
섹션 6. 시즌2 - CSS 섹션 UI 디자인
CSS 섹션 UI 디자인 - 폰트어썸 UI(1) 미리보기 13:22 CSS 섹션 UI 디자인 - 폰트어썸 UI(2) 미리보기 20:13
CSS 섹션 UI 디자인 - 예쁜 표(table) 디자인 26:22
CSS 섹션 UI 디자인 - 폰트어썸 그라디언트 서비스 가격표(1) 23:11
CSS 섹션 UI 디자인 - 폰트어썸 그라디언트 서비스 가격표(2) 18:05
CSS 섹션 UI 디자인 - 폰트어썸 그라디언트 서비스 가격표(3) 19:19
CSS 섹션 UI 디자인 - 스마트 아이템 쇼핑몰(1) 25:27
CSS 섹션 UI 디자인 - 스마트 아이템 쇼핑몰(2) 23:19
CSS 섹션 UI 디자인 - Flex Grid 카드 UI(World Best Cities)(1) 10:45
CSS 섹션 UI 디자인 - Flex Grid 카드 UI(World Best Cities)(2) 13:35
CSS 섹션 UI 디자인 - Flex Grid 카드 UI(World Best Cities)(3) 19:12
CSS 섹션 UI 디자인 - Flex Grid 카드 UI(World Best Cities)(4) 18:56
CSS 섹션 UI 디자인 - 개인 프로필 카드(다크모드)-01 14:22
CSS 섹션 UI 디자인 - 개인 프로필 카드(다크모드)-02 15:07
CSS 섹션 UI 디자인 - 개인 프로필 카드(다크모드)-03 23:26
CSS 섹션 UI 디자인 - 개인 프로필 카드(다크모드)-04 19:53
CSS 섹션 UI 디자인 - 개인 프로필 카드(다크모드)-05 20:59
CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼(1) 12:08
CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼(2) 17:40
CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼(3) 17:29
CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼(4) 23:34
CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼(5) 21:10
섹션 7. 시즌2 - 웹사이트 프로토타입(Web Site Prototype) 제작
네이버 반응형 회원가입 폼(1) 26:33
네이버 반응형 회원가입 폼(2) 25:57
네이버 반응형 회원가입 폼(3) 26:45
네이버 반응형 회원가입 폼(4) 14:58
풀스크린 네비게이션 반응형 포트폴리오 with jQuery(1) 19:14
풀스크린 네비게이션 반응형 포트폴리오 with jQuery(2) 19:53
풀스크린 네비게이션 반응형 포트폴리오 with jQuery(3) 24:48
풀스크린 네비게이션 반응형 포트폴리오 with jQuery(4) 22:21
풀스크린 네비게이션 반응형 포트폴리오 with jQuery(5) - 오버레이 애니메이션 변형 17:54
English Academy 헤더 드롭다운 네비게이션(1) 20:14
English Academy 헤더 드롭다운 네비게이션(2) 15:50
English Academy 헤더 드롭다운 네비게이션(3) 27:06
English Academy 헤더 드롭다운 네비게이션(4) 28:47
포트폴리오 CSS Grid 반응형 레이아웃(0) - 제작노트 미리보기 07:01
포트폴리오 CSS Grid 반응형 레이아웃(1) - HTML 구조 및 Grid 배치 29:30
포트폴리오 CSS Grid 반응형 레이아웃(2) - 상세 CSS 및 호버이펙트 23:22
포트폴리오 CSS Grid 반응형 레이아웃(3) - 반응형 작업 및 object-fit 22:10
포트폴리오 CSS Grid 반응형 레이아웃(4) - 풀스크린 모달 featherligh.js 15:38
섹션 8. 자바스크립트 & 제이쿼리(JavaScript, jQuery) 실전 예제
제이쿼리 vs 자바스크립트의 차이, 바닐라 자바스크립트란? 미리보기 27:47 제이쿼리 반응형 애니메이션 모달(1) 미리보기 24:43 제이쿼리 반응형 애니메이션 모달(2) 미리보기 31:13
JavaScript & jQuery - 제이쿼리 Front Back 트랜지션 화면전환 26:40
JavaScript & jQuery - 푸터 패밀리사이트 셀렉트 커스텀 스타일(1) 27:15
JavaScript & jQuery - 푸터 패밀리사이트 셀렉트 커스텀 스타일(2) 27:37
JavaScript & jQuery - 검색창 확장하기(1) 18:28
JavaScript & jQuery - 검색창 확장하기(2) 15:41
JavaScript & jQuery - 검색창 확장하기(3) 18:54
JavaScript & jQuery - 넷플릭스-FAQ with jQuery(1) 19:34
JavaScript & jQuery - 넷플릭스-FAQ with jQuery(2) 25:27
JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(1) 10:05
JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(2) 21:56
JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(3) 12:24
JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(4) 17:15
JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(5) 19:58
JavaScript & jQuery - 사운드 재생 제어하기(1) 20:51
JavaScript & jQuery - 사운드 재생 제어하기(2) 22:09
JavaScript & jQuery - 사운드 재생 제어하기(3) 19:57
섹션 9. 시즌2 - 실전 반응형 웹사이트 - 넷플릭스 공식사이트
실전 반응형 웹사이트 - 넷플릭스 공식사이트(1) - 제작노트 및 필수사항 미리보기 15:22
실전 반응형 웹사이트 - 넷플릭스 공식사이트(2) - 기본구조만들기 16:04
실전 반응형 웹사이트 - 넷플릭스 공식사이트(3) - Header & Welcome 30:02
실전 반응형 웹사이트 - 넷플릭스 공식사이트(4) - 동일한 형식의 4개 섹션 13:08
실전 반응형 웹사이트 - 넷플릭스 공식사이트(5) - FAQ Section 37:34
실전 반응형 웹사이트 - 넷플릭스 공식사이트(6) - Footer 14:54
실전 반응형 웹사이트 - 넷플릭스 공식사이트(7) - Login Modal 31:00
실전 반응형 웹사이트 - 넷플릭스 공식사이트(8) - 모바일 변환작업 28:58
섹션 10. 시즌2 - 실전 반응형 웹사이트 - 크롬 브라우저 다운로드
실전 반응형 웹사이트 - 크롬 브라우저 다운로드(0) - 제작노트 및 필수사항 미리보기 25:30
실전 반응형 웹사이트 - 크롬 브라우저 다운로드(1) - 기본구조-Header 13:31
실전 반응형 웹사이트 - 크롬 브라우저 다운로드(2) - Welcome Section 27:20
실전 반응형 웹사이트 - 크롬 브라우저 다운로드(3) - Feature Section 29:49
실전 반응형 웹사이트 - 크롬 브라우저 다운로드(4) - CallAction & Footer 30:27
실전 반응형 웹사이트 - 크롬 브라우저 다운로드(5) - Footer Copyright 14:37
실전 반응형 웹사이트 - 크롬 브라우저 다운로드(6) - 제이쿼리 상호작용 18:46
실전 반응형 웹사이트 - 크롬 브라우저 다운로드(7) - 모바일 레이아웃 변환(1) 34:35
실전 반응형 웹사이트 - 크롬 브라우저 다운로드(8) - 모바일 레이아웃 변환(2) 13:21
실전 반응형 웹사이트 - 크롬 브라우저 다운로드(9) - 모바일 레이아웃 변환(3) 20:41
섹션 11. 완성본 및 참고자료 다운로드
[완성본 다운로드] 시즌2 - [01]CSS 버튼 & 네비게이션
[완성본 다운로드] 시즌2 - [02]CSS 키프레임 애니메이션
[완성본 다운로드] 시즌2 - [03]CSS 호버이펙트
[완성본 다운로드] 시즌2 - [04]CSS 섹션 UI 디자인
[완성본 다운로드] 시즌2 - [05]웹사이트 프로토타입(WebSite Prototype)
[완성본 다운로드] 시즌2 - [06]자바스크립트 & 제이쿼리(JavaScript, jQuery)
[완성본 다운로드] 시즌2 - [07]실전 반응형 웹사이트 - 넷플릭스 공식사이트
[완성본 다운로드] 시즌2 - [08]실전 반응형 웹사이트 - 크롬 브라우저 다운로드
[다운로드] 비주얼 스튜디오 코드 필수 세팅, 단축키 변경, 필수 Extension 설치, Emmet 단축키
[시즌2] 이론예제 완성본 다운로드
강의 게시일 : 2021년 07월 06일 (마지막 업데이트일 : 2021년 07월 13일)
수강평 총 5개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5.0
5개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
mhlyu63 thumbnail
몇달 전에 면접과 취업을 부르는 퍼블리셔 개인 포트폴리오 홈페이지 강의 수강했습니다. 코딩웍스 새소식 보고 이번에 시즌2 오픈한신거 강의 신청하면서 시즌1 먼저해야 하나 고민했는데 신청했어요. 시즌2 강의 1/4쯤 들었어요. 초반에 의욕적으로 열심히 학습한 것 같은데 아직도 1/4이라니ㅠㅠ 퍼블리싱 초급에게 학습량도 많아서 좀 어려운 듯 하지만 도전 정신을 가지고 알찬 강의 잘 듣고 있습니다. 선생님.. 혹시 시즌1을 먼저 듣고 이 강의를 듣는게 나을까요? 아니면 병행하는게 좋을까요? :)
2021-07-22
지식공유자코딩웍스(Coding Works)
mhlyu63님~ 수강평 감사드립니다. 시즌1도 그렇지만 시즌2도 수업량이 38시간 정도 되니까 꽤 많습니다. 퍼블리셔 준비하는 분들을 위한 강의라서 시간을 줄이고 싶지만 알려드려야 할 것들이 많아서 어쩔 수 없이 시간이 길어졌네요. 완강도 중요하지만 예제 하나 하나 영상 도움없이 스스로 만드시는게 더욱 중요합니다. 늘 건강 조심하시고 화이팅입니다~!!
2021-07-22
lololo thumbnail
드디어넷플릭스와 크롬 클론강의만 들으면 완강입니다.ㅠ 시즌1과 합쳐서 약 40개의 위젯을 쌓았고요. 홈페이지는 여기 클론2개, 기존방식 사이트 2개, 플렉스 그리드 각1개 모바일웹앱 서브페이지 하나로 만들 생각이에요. 언제 완성될지 모르겠지만... 다 코딩웍스님 덕분입니다ㅠㅠㅠㅠㅠ 인프런에서 퍼블리셔 어떻게 준비할지 막막할 때에 단비같은 분이세요. 제가 이직해서 연봉 확 오르면 다 코웍님 덕분이에요ㅠㅠ감사합니다 지금 연봉은 낮은데,ㅠ 아직 9개월차 디자이너거든요. 소규모에이전시에 딱 최저받아요. 최종목표가 프론트엔드 개발자입니다...tmi.. 아무튼 열심히 정진해서 연봉 꼭 올리고 해외취업도 성공하겠습니다. 껄껄 최고의강의
2021-08-27
지식공유자코딩웍스(Coding Works)
lololo님 수강평 감사드립니다. 시즌2 학습내용이 많은데 부지런히 하셨군요. 남들 놀 때 노력하신 보람이 곧 있으실거에요. 언제나 응원할게요. 화이팅~!!
2021-08-27
kwon하늘바람 thumbnail
재미나게 잘 배웠습니다. 감사합니다.
2021-09-16
지식공유자코딩웍스(Coding Works)
kwon하늘바람님 수강평 감사드립니다. 재밌었다는 말씀 들으니 저도 기분 좋습니다~!!
2021-09-16
Webdi thumbnail
시즌 1 에서 정말 하나하나 자세하게 알려주셔서 많이 배웠습니다. 시즌 2 수강 신청하고 보고 있는데 역시! 하나하나 자세하게 알려주셔서 이해하기 쉽습니다. 믿고 보는 강의입니다.
2021-08-01
지식공유자코딩웍스(Coding Works)
Webdi님 수강평 감사드립니다. 시즌2도 꼭! 완강하시고 응용해서 포트폴리오 결과물로 사용하세요~
2021-08-01
lawesome1 thumbnail
온라인 강의로 퍼블리싱을 배운다는 게 많이 걱정되어서 수강을 망설였는데요. 배우다 보니 의외로 재밌어서 집중도 잘되고 설명도 천천히 잘해주셔서 너무 좋았어요:) 직접 만드신 수업 교재도 진짜 고퀄이어서 깜짝 놀랐습니다ㅎㅎㅎ 열심히 듣고 가르쳐주시는 예제 따라 하다 보면 제께 하나둘씩 쌓이는 느낌이라 너무 뿌듯하고 잘 응용해서 취업 성공할 수 있을 것 같아요♥ 좋은 강의 감사드리고 더 다양한 강의 많이많이 만들어 주세요~ 취업하고도 계속 듣고 싶어요!
2021-07-15
지식공유자코딩웍스(Coding Works)
lawesome1님~ 퍼블리셔 취업가이드 PDF는 모두 읽고 내용처럼 잘 하고 계시죠? 이번 시즌2 퍼블리싱 실전 예제 재밌게 공부하시고 하시다가 안되시는 것 있으시면 질문글 주세요. 수강평 고맙습니다~!!
2021-07-15
인프런 추석할인 중(D-5)

20%

44,880원

56,100원
폴더에 추가 124 공유
지식공유자 : 코딩웍스(Coding Works)
총 120개 수업˙총 38시간 38분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
수강 전 궁금한 점이 있나요?
문의하기
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스