01
개발 환경 설정
[공지] SCSS 린터가 작동 안 하시는 분들은 필독
02
Asset 준비
HTML Document 셋업 & Webfont 적용
이미지 Export 1: Raster Images
이미지 Export 2: Vector Images
Reset.css vs Normalize.css
03
Sass 100% 활용하기: 변수 Variable
04
Sass 200% 활용하기: 믹스인 Mixin
05
Sass 300% 활용하기: 모듈 Module
06
Global Navigation Bar
💅 디테일은 생명: hover, focus, active, disabled
💅 GNB Nav 상태 디자인 & 소소한 UX 개선
07
Sidebar
💅 굴욕없는 Sidebar Header (feat. truncate, overflow의 비밀)
💅 Scrollbar 스타일링 & 실무자처럼 z-index 관리하는 법
💅 디테일은 생명: Overscroll Behavior
08
Search Modal & Search History
💅 Search History Item 상태 디자인
💅 Search History 데스크탑 레이아웃 & 인터렉션
09
Local Navigation Bar
🙏 모바일 LNB, 제발 혼자 먼저 만들어보세요
모바일 LNB 레이아웃 (feat. 왜 내가 만든 스크롤은 이상하게 생긴걸까)
💅 화성에서 온 Block, 금성에서 온 Inline
10
Page Layout
11
Breadcrumb & Product Carousel
💅 시맨틱 마크업 끝판왕: WAI-ARIA role
🚀 선 사용 후 생각: tiny-slider.js
Product Carousel 모바일 레이아웃
Product Carousel 태블릿 레이아웃
Product Carousel 데스크탑 레이아웃
12
Product Info & Order Form
💅 반응형 구현이 불가능한 디자인을 대처하는 우리의 자세
Product Info 태블릿 & 데스크탑 레이아웃 마무리
💅 Checkout Card 상태 디자인 & 마무리
13
Page Structure & Shared Components
공통 컴포넌트: Product Section Header 1
공통 컴포넌트: Product Section Header 2
Product Tab 스타일 (약간의 LNB 복습)
💅 (CSS 100%) Fixed On Scroll 탭을 만들어 봅시다
14
Product Specification Section
🐛 Product Section Header가 Product Tab을 덮는 이유
15
Product Review Section
Review Card 경우의 수 1: Review Header & Body
Review Card 경우의 수 2: Review Footer
Review가 없을 경우 (a.k.a. Empty State)
💅 (CSS 애니메이션) 스르륵 나타나는 막대 그래프
16
Product Inquiry Section
Inquiry Card 경우의 수 1: 비밀글일 경우
Inquiry Card 경우의 수 2: 공개글 & 답변이 달린 경우
Inquiry가 없을 경우 (a.k.a. Empty State)
17
Product Shipment
18
Product Recommendation Section
💅 반응형 Product Card (feat. calc)
💅 (CSS 스킬) 반응형 이미지 종횡비 맞추기
19
Product User Gallery
♻️ 리팩토링: Truncate Mixin을 따로 뺍시다
💅 (퀵복습) 반응형 이미지 종횡비 맞추기 Again
🐈⬛ (Git 꿀팁) Commit 메세지를 수정하는 법
User Gallery Thumbnails 마무리
User Gallery Controls 마크업 & JS 연결
User Gallery Controls 스타일 마무리
🚀 반응형 User Gallery 레이아웃 (feat. DOM)
20
Order Forms
💅 소소한 UX 개선 (feat. overscroll-behavior)
21
Dialogs
Bookmark Toasts 마크업 & 스타일
22
Bonus: JavaScript 파티
DOM Crash: 이벤트 핸들러 Event Handler
Order CTA 2: Bookmark 버튼 토글
Order CTA 3: Bookmark 버튼 토글 (추가)
GNB Search 1: GNB Search History 토글+
GNB Search 2: 검색 기록 전체 삭제
Product Tab 1: toggleActiveTab
Product Tab 2: scrollToTabPanel
Product Tab 3: detectTabPanelPosition
Product Tab 4: updateProductTabOnScroll
Product Tab 6: Throttle로 퍼포먼스 개선
23
Bonus: 포트폴리오 업데이트
Recent Update|2022. 08. 16