HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌3)

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

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

• 시즌1,2를 반드시 들으실 필요는 없습니다. 다만 시즌1,2에서는 퍼블리싱 기초에 대한 설명들을 자세히 설명하고 있는 반면 시즌3에서는 이론 설명 부분을 빠르게 진행하는 편입니다. 하지만 초중급자를 대상으로 제작되었으니 충분히 따라 오실거라 생각됩니다.

• 시즌1의 예제를 먼저 살펴보신 다음 스스로 충분히 제작 가능한 수준이라면 바로 시즌3 학습을 하셔도 괜찮습니다. 참고로 이번 시즌3 강의는 시즌1, 2와 중복되지 않는 모두 새로운 예제 입니다.

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

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

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

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

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

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

  
  

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

• 예제 학습는 순서를 꼭 지키실 필요는 없습니다. 원하시는 섹션부터 학습하시면 됩니다.

• 다만 실전 예제를 제작하기 위한 이론을 이론 세션에 정리했으니 이론은 먼저 가볍게 학습하시고 실전 예제 제작 섹션을 학습하시기를 추천드립니다.

• 섹션에 따른 난이도는 크게 정해져 있지 않습니다. 하지만 섹션 내 개별 영상에 난이도를 별로 표시했으니 낮은 것 부터 하셔도 괜찮습니다.

  
  

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

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

• 수업 영상에서 제작된 모든 완성본 파일(html, css, js, 이미지 파일 등)은 아래 보이는 마지막 섹션(섹션 13)에 모든 완성본을 다운로드 받으실 수 있습니다

  .

Q. 추후 이론 예제와 실전 예제 업데이트가 있나요?

• 이론 예제 및 실전 예제 업데이트가 있는 경우 강의소개 가장 상단에 어떤 내용이 언제 업데이트 되었는지 공지합니다.

• 업데이트 후 섹션 13. [다운로드] 완성본 및 참고자료 다운로드에서 파일을 다시 다운로드해서 추가된 업데이트 폴더를 저장하시면 됩니다.

📖커리큘럼 - HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌3)

섹션 2. 텍스트 에디터 사용법(비주얼 스튜디오 코드)

• 비주얼 스튜디오 코드(Visual Studio Code) 사용법 및 환경설정

• 비주얼 스튜디오 코드(Visual Studio Code) 필수 Extension 설치 및 사용법

• 비주얼 스튜디오 코드(Visual Studio Code)에서 에밋(Emmet) 사용법

  
  

섹션 3. 웹 퍼블리싱 이론 및 이론 활용 예제

• CSS 카운터(counter) 함수로 목록 순번 넣기

• CSS filter with filter generator

• CSS accent-color with label tag

• CSS backdrop-filter with Glass Morphism(반투명 효과)

• CSS background-repeat, Multi background

• CSS mask-image, object-fit

• CSS min-content, max-content

• 글자에 테두리 적용하는 text-stroke

• CSS variables(변수)

• 반응형에 따른 이미지 변경(picture tag)

• 반응형 텍스트 사이즈 자동 조절하는 clamp 함수

• 반응형 텍스트 사이즈 clamp 함수

• 비율 자동 조절(aspect-ratio)

• 선택자 중복을 줄이는 is 가상클래스

• 스크롤 후 특정 엘리먼트 고정시키는 sticky

• 마우스 오버 업 다운(background, object-fit)

• 스크롤해서 숨어있던 푸터 보이기(z-index, fixed)

• 스프라이트(sprite) 이미지 사용법

• 요소를 안보이게 하는 3가지 방법(opacity, display, visibility)

• :has() :not() 가상클래스 사용법

• scroll-snap으로 컨텐츠 슬라이더 만들기

• 한 줄 말 줄임 표시 & 여러줄 말 줄임 표시

• 그라디언트(Gradient) 보더 버튼 만들기

• 뉴모피즘(Neumorphism)으로 그림자 입체감 만들기

• 순수 CSS 선택자 중첩(Nesting) 01 - 기본 사용법 without SCSS(SASS)

• 순수 CSS 선택자 중첩(Nesting) 02 - 활용예제(로그인 폼)

• 자바스크립트 문서 로딩 스크립트(괜찮은 2가지 익스텐션 설치)

• 모바일 브라우저 감지 자바스크립트(화살표 함수, User Agent)

• 폴더 구조 이해하기(절대주소 vs 상대주소)

• 레이아웃 제작 실력을 위해 Mondrian Layout 활용하기

• [필독 01] Position 속성의 완벽한 이해와 활용

• [필독 02] Display 속성의 완벽한 이해와 활용

  
  

섹션 4. 웹 퍼블리싱 실전 예제 제작 - Keyframe Animation & List Design

• 네온 텍스트 타이핑 이펙트

• 마우스 휠 에니메이션

• 지문 스캔 애니메이션

• 예스24 도서 랭킹 목록 디자인(CSS counter)

• 팬시(fancy)한 목록 디자인 - counter(), attr()

  
  

섹션 5. 웹 퍼블리싱 실전 예제 제작 - Fancy Section Design

• 로딩페이지 실플한 타이포 디자인

• 생생 리얼후기 헤더

• 다크모드(Dark Mode) 기본형(greeting)

• 반응형 멀티 컬럼 뉴스 레이아웃

• Fancy Section UI #01 - 이미지 도형 디자인 섹션

• Fancy Section UI #02 - 분리된 그리드 섹션

• Fancy Section UI #03 - 어코디언 콘텐츠 이펙트 섹션

  
  

섹션 6. 웹 퍼블리싱 실전 예제 제작 - Card UI & Tab Menu Content

• 플렉스 반응형 카드 UI 섹션(Best Cities)

• 그라디언트 호버 카드 UI(Best Crew)

• 탭 메뉴 콘텐츠(쇼핑몰 상품 Card UI 싱글아이템)

• 탭 메뉴 콘텐츠(쇼핑몰 상품목록 Tab Menu Content)

  
  

섹션 7. 웹 퍼블리싱 실전 예제 제작 - Navigation & Hover Effect

• Awesome 버튼 호버 이펙트 버튼 4종

• 가로 툴팁(개발언어 앰블럼 아이콘 호버)

• 세로 툴팁(쇼핑몰 바로가기 아이콘 호버)

• 우측으로 펼쳐지는 햄버거 네비게이션

• 네비게이션 호버 배경이미지 변경(쿠팡)

• 아이콘폰트 3D 플립(Flip) 호버이펙트

• SNS 아이콘 3D 호버이펙트(skew 속성)

• 모바일 네비게이션 애니메이션 인디케이터

• [CSS Perspective 기본 이론] CSS Perspective Card Flip

• [CSS Perspective 실전 예제 01] 카드 플립(Member Profile)

• [CSS Perspective 실전 예제 02] 카드 플립(Movie Poster)

• [CSS Perspective 실전 예제 03] 카드 플립(Ocean Beach)

• 글래스모피즘(Glassmorphism) 신용카드 UI #01(HTML, 앞면)

• 글래스모피즘(Glassmorphism) 신용카드 UI #02(뒷면, Tilt.js)

• 플렉스 이미지 갤러리 호버 이펙트(Accordion Hover Navigation)

  
  

섹션 8. 웹 퍼블리싱 실전 예제 제작 - Naver Tab Login Content

• [Naver Login] HTML 와이어 프레임 제작하기 with PPT & NotePad++

• [Naver Login] HTML 와이어 프레임 코딩하기 with 텍스트에디터

• [Naver Login] 상세 CSS 디자인 #01

• [Naver Login] 상세 CSS 디자인 #02

• [Naver Login] 상세 CSS 디자인 #03

• [Naver Login] 상세 CSS 디자인 & 최종 마무리 #04

  
  

섹션 9. 웹 퍼블리싱 실전 예제 제작 - Login Form Design

• 비번 Show Hide 로그인 폼 #01(HTML 와이어 프레임 제작)

• 비번 Show Hide 로그인 폼 #02(상세 CSS 디자인)

• 비번 Show Hide 로그인 폼 #03(비번 보이기 감추기 제이쿼리)

• 듀얼(Dual) 로그인 폼 #01((HTML 와이어 프레임 제작)

• 듀얼(Dual) 로그인 폼 #02(상세 CSS 디자인)

• 듀얼(Dual) 로그인 폼 #03(상세 CSS 디자인)

  
  

섹션 10. 웹 퍼블리싱 실전 예제 제작 - Jump Up(웹 퍼블리싱 이것 저것)

• 로딩(Loading) 애니메이션 with CSS 변수 var(--i) 반복문

• 순수 HTML 어코디언 만들기(details, summary)

• 타이핑 애니메이션 JS 플러그인(Typed.js)

• [CSS Mockup Design] - MacBook

• [CSS Mockup Design] - iPhoneX

• 순수 CSS 페이지 스크롤 효과(Page Scroll Effects)

• 폼요소 라벨 애니메이션(Input Label Animation)

• CSS 스크롤 애니메이션(Infinite Scrolling Animation Gradient Overlay)

• CSS 원뿔 그라디언트 로딩(Conic Gradient)

• CSS 파이 도넛 챠트(Conic Gradient Pie & Donuts Chart)

• 로그인 폼 CSS 유효성 검사(Form Validation) without JavaScript

• 커스텀 체크박스 스타일(Custom Checkbox) with CSS variables

• 스크롤 패딩, 스크롤 후 디자인 변경(jQuery), 임시 이미지 활용

• 교육사항 커리어 타임라인(CSS Education Career Timeline)

• 보더 애니메이션 with Lightbox Slide Gallery

• 심플한 탭 메뉴 콘텐츠(jQuery Only)

• 심플한 이미지 갤러리(JavaScript & jQuery)

  
  

섹션 11. 퍼블리싱의 시작이자 완성! HTML 와이어프레임 구조 제작

• HTML 와이어프레임 구조 with Class Name - 제작 순서 및 방법

• 다크모드(Dark Mode) 웹페이지 - HTML 와이어프레임 제작

• 다크모드(Dark Mode) 웹페이지 - CSS 선택자 중첩(Nesting) 퍼블리싱 제작

• 트랜지션 교차 로그인 회원가입 - HTML 와이어프레임 제작

• 트랜지션 교차 로그인 회원가입 - CSS 선택자 중첩(Nesting) 퍼블리싱 제작

• 개인 이력서 포트폴리오 홈페이지 - UI 디자인 아이디어 찾기

• 개인 이력서 포트폴리오 홈페이지 - HTML 와이어프레임 제작

  
  

섹션 12. [참고] 웹 퍼블리싱에 학습에 도움되는 웹사이트 공부하기

• [참고 웹사이트] 10015 Tools 주요기능 요약(10015.io)

• [참고 웹사이트] CSS 모든 속성 미리보기

• [참고 웹사이트] 백그라운드 & 그라디언트 제너레이터

• [참고 웹사이트] 색상 값 추출하기

• [참고 웹사이트] 임시 이미지 사용하기

  
  

섹션 13. [다운로드] 완성본 및 참고자료 다운로드

• [다운로드] 시즌3 강의 예제 완성본 모음

• [참고자료] [참고자료] 필독 사항 & 핵심이론

• [참고자료] 비주얼 스튜디오 코드(Visual Studio Code) 필수 세팅

• [참고자료] 전체 웹사이트 퍼블리싱을 위한 기능정의서(예시)