김버그의 UI 개발 부트캠프 - 경력같은 신입으로 레벨업
    • 01
      개발 환경 설정
    • Figma & 코드 에디터 설정
      Git 설정
      node-sass 설치 & 설정
      npm script 업데이트
      Prettier & SCSS lint 설정
      [공지] SCSS 린터가 작동 안 하시는 분들은 필독
      Sass Q&A
    • 02
      Asset 준비
    • 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 업데이트
    • 03
      Sass 100% 활용하기: 변수 Variable
    • Sass를 배우는 우리의 자세
      $ - 디자인을 코드로 옮기는 첫 걸음
      색상 팔레트 Color Palettes
      타이포그래피 Typography
      그리드 시스템 Grid System
      그리드 시스템 분석 훈련
      반응형 그리드시스템 설계 1
      반응형 그리드시스템 설계 2
      반응형 그리드시스템 설계 3
    • 04
      Sass 200% 활용하기: 믹스인 Mixin
    • @mixin - 터널 증후군을 예방합시다
      Text Style
      Responsive
      Positions
      Flexbox
    • 05
      Sass 300% 활용하기: 모듈 Module
    • 자주 사용하는 것들은 미리미리 만듭시다
      태그 Tags
      아바타 Avatars
      별점 Star Ratings
      가격표 Prices
      버튼 Buttons 1
      버튼 Buttons 2
      폼 요소 Forms 1
      폼 요소 Forms 2
      페이지네이션 Paginations
      Utility 클래스 업데이트
    • 06
      Global Navigation Bar
    • 레이아웃 분석
      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 & 마무리
    • 07
      Sidebar
    • Sidebar 마크업 1
      Sidebar 마크업 2
      Sidebar Header
      💅 굴욕없는 Sidebar Header (feat. truncate, overflow의 비밀)
      Drawer Menu
      💅 Drawer Menu 상태 디자인
      Sidebar 레이아웃 마무리
      💅 Scrollbar 스타일링 & 실무자처럼 z-index 관리하는 법
      💅 디테일은 생명: Overscroll Behavior
      💅 Sidebar & Overlay 인터렉션
    • 08
      Search Modal & Search History
    • Search Modal 마크업
      Search Modal 스타일
      Search History 스타일
      💅 Search History Item 상태 디자인
      💅 CSS Transition의 비밀
      🐛 My Menu 버그, 고치고 갑시다
      💅 Search History 데스크탑 레이아웃 & 인터렉션
    • 09
      Local Navigation Bar
    • LNB 마크업
      🙏 모바일 LNB, 제발 혼자 먼저 만들어보세요
      모바일 LNB 레이아웃 (feat. 왜 내가 만든 스크롤은 이상하게 생긴걸까)
      💅 화성에서 온 Block, 금성에서 온 Inline
      모바일 LNB 마무리
      ♻️ 리팩토링: 코드 가독성 Up
      LNB 반응형 레이아웃 마무리
    • 10
      Page Layout
    • 💅 페이지 구조 리팩토링
      Global Footer 마크업
      Global Footer 스타일
      Global Header 포지션
      💅 z-index의 심기를 건드리지 말 것
    • 11
      Breadcrumb & Product Carousel
    • Breadcrumb 마크업 & 스타일
      💅 Breadcrumb 상태 디자인
      Product Carousel 마크업
      💅 시맨틱 마크업 끝판왕: WAI-ARIA role
      Product Carousel 마크업 마무리
      💅 Carousel은 어떻게 만들까?
      🚀 선 사용 후 생각: tiny-slider.js
      🚀 Carousel을 커스터마이즈 해봅시다
      Product Carousel 모바일 레이아웃
      Product Carousel 태블릿 레이아웃
      Product Carousel 데스크탑 레이아웃
    • 12
      Product Info & Order Form
    • Product Info 마크업 1
      Product Info 마크업 2
      Product Info 모바일 레이아웃
      Product Info 태블릿 레이아웃
      💅 반응형 구현이 불가능한 디자인을 대처하는 우리의 자세
      Product Info 태블릿 & 데스크탑 레이아웃 마무리
      Order Form 마크업
      Order Form 스타일
      Checkout Card 마크업
      Checkout Card 스타일
      💅 Checkout Card 상태 디자인 & 마무리
    • 13
      Page Structure & Shared Components
    • 🏔 구조 분석 & 컴포넌트 설계 전략
      공통 컴포넌트: Product Section Header 1
      공통 컴포넌트: Product Section Header 2
      💅 애플이 권장한 버튼의 최소 사이즈는?
      💅 Table 스타일 필수 CSS 속성
      공통 컴포넌트: Product Table
      Product Tab 마크업
      Product Tab 스타일 (약간의 LNB 복습)
      💅 (CSS 100%) Fixed On Scroll 탭을 만들어 봅시다
      ✍️ 김버그의 caniuse.com 활용법
    • 14
      Product Specification Section
    • Product Spec 마크업
      🐛 Product Section Header가 Product Tab을 덮는 이유
      Product Section 공통 스타일
      모바일 레이아웃 마무리
      💅 CSS 스킬: 그라데이션
    • 15
      Product Review Section
    • 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 애니메이션) 스르륵 나타나는 막대 그래프
    • 16
      Product Inquiry Section
    • 💅 Inquiry Card의 경우의 수
      Inquiry Card 마크업
      Inquiry Card 스타일
      Inquiry Card 경우의 수 1: 비밀글일 경우
      Inquiry Card 경우의 수 2: 공개글 & 답변이 달린 경우
      💅 모바일 토글 레이아웃
      Inquiry가 없을 경우 (a.k.a. Empty State)
    • 17
      Product Shipment
    • Product Shipment 마크업
      Product Shipment 스타일
    • 18
      Product Recommendation Section
    • Product Card 마크업
      Product Card 스타일
      💅 반응형 Product Card (feat. calc)
      💅 Product Card 상태 디자인
      💅 (CSS 스킬) 반응형 이미지 종횡비 맞추기
      💅 (CSS 스킬) Line Clamp
    • 19
      Product User Gallery
    • 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 레이아웃 마무리
    • 20
      Order Forms
    • Order CTA 마크업 & 레이아웃
      Order CTA 스타일 & 상태 디자인
      Order Form Modal 마크업
      Order Form Modal 스타일
      💅 소소한 UX 개선 (feat. overscroll-behavior)
      Floating Order Form 마크업
      Floating Order Form 스타일
    • 21
      Dialogs
    • 💅 다양한 Dialog 컴포넌트 종류
      Cart Modal
      Bookmark Toasts 마크업 & 스타일
      Bookmark Toasts 마무리
    • 22
      Bonus: JavaScript 파티
    • 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로 퍼포먼스 개선
    • 23
      Bonus: 포트폴리오 업데이트
    • GitHub SSH Key 설정
      GitHub Pages 디플로이
    Sass Q&A
    01 개발 환경 설정
    Sass Q&A

    Syntactically Awesome =  문법적으로 🐕‍🦺 쩐다

    질문하기