김버그의 UI 개발 부트캠프 - 경력같은 신입으로 레벨업
Lecture Introduction
Difficulty
Normal
Category
Web Programming - Programming
Tag
자바스크립트, CSS, HTML
Target Audience
- 좀 더 체계적으로 UI를 구축하고 싶으신 분
- HTML, CSS 실력을 실무자 레벨로 스킬업! 하고 싶으신 분
- Sass/SCSS를 왜 써야 하는지, 어떻게 써야 하는지 배우고 싶은 분
- 복잡한 UI 프로젝트를 개발하며 의미있는 포트폴리오를 쌓고 싶으신 분
- 웹 퍼블리셔 또는 웹 프론트엔드 개발자로 취업하고자 준비하고 계신 분
- JavaScript를 공부하기 전에 HTML, CSS 실력을 확실히 다지고 싶은 분
- HTML, CSS 실력을 실무자 레벨로 스킬업! 하고 싶으신 분
- Sass/SCSS를 왜 써야 하는지, 어떻게 써야 하는지 배우고 싶은 분
- 복잡한 UI 프로젝트를 개발하며 의미있는 포트폴리오를 쌓고 싶으신 분
- 웹 퍼블리셔 또는 웹 프론트엔드 개발자로 취업하고자 준비하고 계신 분
- JavaScript를 공부하기 전에 HTML, CSS 실력을 확실히 다지고 싶은 분
Curriculum
Expand All
- 01개발 환경 설정
- 02Asset 준비
- 03Sass 100% 활용하기: 변수 Variable
- 04Sass 200% 활용하기: 믹스인 Mixin
- 05Sass 300% 활용하기: 모듈 Module
- 06Global Navigation Bar
- 07Sidebar
- 08Search Modal & Search History
- 09Local Navigation Bar
- 10Page Layout
- 11Breadcrumb & Product Carousel
- 12Product Info & Order Form
- 13Page Structure & Shared Components
- 14Product Specification Section
- 15Product Review Section
- 16Product Inquiry Section
- 17Product Shipment
- 18Product Recommendation Section
- 19Product User Gallery
- 20Order Forms
- 21Dialogs
- 22Bonus: JavaScript 파티
- 23Bonus: 포트폴리오 업데이트
Figma & 코드 에디터 설정
Git 설정
node-sass 설치 & 설정
npm script 업데이트
Prettier & SCSS lint 설정
[공지] SCSS 린터가 작동 안 하시는 분들은 필독
Sass Q&A
HTML Document 셋업 & Webfont 적용
이미지 Export 1: Raster Images
이미지 Export 2: Vector Images
이미지 Export 3
SVG가 갑인 진짜 이유
Icon Font 생성 & 적용
Favicon 설정
Reset.css vs Normalize.css
김버그의 Reset 픽
npm script 업데이트
Sass를 배우는 우리의 자세
$ - 디자인을 코드로 옮기는 첫 걸음
색상 팔레트 Color Palettes
타이포그래피 Typography
그리드 시스템 Grid System
그리드 시스템 분석 훈련
반응형 그리드시스템 설계 1
반응형 그리드시스템 설계 2
반응형 그리드시스템 설계 3
자주 사용하는 것들은 미리미리 만듭시다
태그 Tags
아바타 Avatars
별점 Star Ratings
가격표 Prices
버튼 Buttons 1
버튼 Buttons 2
폼 요소 Forms 1
폼 요소 Forms 2
페이지네이션 Paginations
Utility 클래스 업데이트
레이아웃 분석
GNB 마크업 1
GNB 마크업 2
GNB 마크업 3
GNB 레이아웃: 모바일
GNB 레이아웃: 태블릿 & 데스크탑
💅 디테일은 생명: hover, focus, active, disabled
💅 GNB Nav 상태 디자인 & 소소한 UX 개선
💅 GNB Icon Button 상태 디자인
💅 로그인 / 비로그인 사용자
My Menu 마크업
My Menu Content
💅 CSS 스킬: 툴팁 뾰족이(▲)
My Menu Button & 마무리
Sidebar 마크업 1
Sidebar 마크업 2
Sidebar Header
💅 굴욕없는 Sidebar Header (feat. truncate, overflow의 비밀)
Drawer Menu
💅 Drawer Menu 상태 디자인
Sidebar 레이아웃 마무리
💅 Scrollbar 스타일링 & 실무자처럼 z-index 관리하는 법
💅 디테일은 생명: Overscroll Behavior
💅 Sidebar & Overlay 인터렉션
Search Modal 마크업
Search Modal 스타일
Search History 스타일
💅 Search History Item 상태 디자인
💅 CSS Transition의 비밀
🐛 My Menu 버그, 고치고 갑시다
💅 Search History 데스크탑 레이아웃 & 인터렉션
LNB 마크업
🙏 모바일 LNB, 제발 혼자 먼저 만들어보세요
모바일 LNB 레이아웃 (feat. 왜 내가 만든 스크롤은 이상하게 생긴걸까)
💅 화성에서 온 Block, 금성에서 온 Inline
모바일 LNB 마무리
♻️ 리팩토링: 코드 가독성 Up
LNB 반응형 레이아웃 마무리
💅 페이지 구조 리팩토링
Global Footer 마크업
Global Footer 스타일
Global Header 포지션
💅 z-index의 심기를 건드리지 말 것
Breadcrumb 마크업 & 스타일
💅 Breadcrumb 상태 디자인
Product Carousel 마크업
💅 시맨틱 마크업 끝판왕: WAI-ARIA role
Product Carousel 마크업 마무리
💅 Carousel은 어떻게 만들까?
🚀 선 사용 후 생각: tiny-slider.js
🚀 Carousel을 커스터마이즈 해봅시다
Product Carousel 모바일 레이아웃
Product Carousel 태블릿 레이아웃
Product Carousel 데스크탑 레이아웃
Product Info 마크업 1
Product Info 마크업 2
Product Info 모바일 레이아웃
Product Info 태블릿 레이아웃
💅 반응형 구현이 불가능한 디자인을 대처하는 우리의 자세
Product Info 태블릿 & 데스크탑 레이아웃 마무리
Order Form 마크업
Order Form 스타일
Checkout Card 마크업
Checkout Card 스타일
💅 Checkout Card 상태 디자인 & 마무리
🏔 구조 분석 & 컴포넌트 설계 전략
공통 컴포넌트: Product Section Header 1
공통 컴포넌트: Product Section Header 2
💅 애플이 권장한 버튼의 최소 사이즈는?
💅 Table 스타일 필수 CSS 속성
공통 컴포넌트: Product Table
Product Tab 마크업
Product Tab 스타일 (약간의 LNB 복습)
💅 (CSS 100%) Fixed On Scroll 탭을 만들어 봅시다
✍️ 김버그의 caniuse.com 활용법
Product Spec 마크업
🐛 Product Section Header가 Product Tab을 덮는 이유
Product Section 공통 스타일
모바일 레이아웃 마무리
💅 CSS 스킬: 그라데이션
Review Scoreboard 마크업
Review Scoreboard 레이아웃
Review Summary 스타일
Bar Graph 스타일
Review Summary 데스크탑 레이아웃
💅 Review Card의 경우의 수
Review Card 마크업
Review Card 스타일
Review Card 경우의 수 1: Review Header & Body
Review Card 경우의 수 2: Review Footer
Review List 마무리
Review가 없을 경우 (a.k.a. Empty State)
💅 (CSS 애니메이션) 스르륵 나타나는 막대 그래프
💅 Inquiry Card의 경우의 수
Inquiry Card 마크업
Inquiry Card 스타일
Inquiry Card 경우의 수 1: 비밀글일 경우
Inquiry Card 경우의 수 2: 공개글 & 답변이 달린 경우
💅 모바일 토글 레이아웃
Inquiry가 없을 경우 (a.k.a. Empty State)
Product Shipment 마크업
Product Shipment 스타일
Product Card 마크업
Product Card 스타일
💅 반응형 Product Card (feat. calc)
💅 Product Card 상태 디자인
💅 (CSS 스킬) 반응형 이미지 종횡비 맞추기
💅 (CSS 스킬) Line Clamp
User Gallery 마크업
User Gallery 스타일
♻️ 리팩토링: Truncate Mixin을 따로 뺍시다
💅 (퀵복습) 반응형 이미지 종횡비 맞추기 Again
🐈⬛ (Git 꿀팁) Commit 메세지를 수정하는 법
🚀 돌아온 tiny-slider.js
User Gallery Thumbnails
User Gallery Thumbnails 마무리
User Gallery Controls 마크업 & JS 연결
User Gallery Controls 스타일 마무리
🚀 반응형 User Gallery 레이아웃 (feat. DOM)
User Gallery 레이아웃 마무리
Order CTA 마크업 & 레이아웃
Order CTA 스타일 & 상태 디자인
Order Form Modal 마크업
Order Form Modal 스타일
💅 소소한 UX 개선 (feat. overscroll-behavior)
Floating Order Form 마크업
Floating Order Form 스타일
💅 다양한 Dialog 컴포넌트 종류
Cart Modal
Bookmark Toasts 마크업 & 스타일
Bookmark Toasts 마무리
JavaScript 섹션 인트로
DOM Crash: 빅 픽쳐
DOM Crash: querySelector
DOM Crash: Event
DOM Crash: 이벤트 핸들러 Event Handler
Sidebar 메뉴 토글
Sidebar Drawer 토글
모바일 Section Header
Search Modal 토글
Order Modal 토글
Order CTA 2: Bookmark 버튼 토글
Order CTA 3: Bookmark 버튼 토글 (추가)
MyMenu 토글+
GNB Search 1: GNB Search History 토글+
GNB Search 2: 검색 기록 전체 삭제
GNB Search 3: 검색 내역 삭제
Review 버튼 1: 토글
Review 버튼 2: 카운트 텍스트
Product Tab 1: toggleActiveTab
Product Tab 2: scrollToTabPanel
Product Tab 3: detectTabPanelPosition
Product Tab 4: updateProductTabOnScroll
Product Tab 5: 디버깅
Product Tab 6: Throttle로 퍼포먼스 개선
GitHub SSH Key 설정
GitHub Pages 디플로이
Recent Update|2022. 08. 16
Lecture Reviews
￦100,000
￦
90,000
(10%)Average Rating
4.9
Difficulty
Normal
Lecture Period
Unlimited