김버그의 UI 개발 부트캠프 - 경력같은 신입으로 레벨업
Lecture Introduction
Difficulty
Normal
Category
Web Programming - Programming
Tag
HTML, CSS, 자바스크립트
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 디플로이
Instructor Introduction
TipFor more detailed information, such as other courses and reviews from the instructor, you can view the instructor introduction page by clicking on their profile.
Lecture Reviews
￦100,000
￦
90,000
(10%)Average Rating
4.9
Difficulty
Normal
Lecture Period
Unlimited