Family Service
goormEDU
Sign InSign Up
All Lectures
RouteNoticeQ&A

김버그의 UI 개발 부트캠프 - 경력같은 신입으로 레벨업

Lecture Introduction
Difficulty
Normal
Category
Web Programming - Programming
Tag
자바스크립트, CSS, HTML
Certificate
You can issue a certificate of completion
Target Audience
- 좀 더 체계적으로 UI를 구축하고 싶으신 분
- HTML, CSS 실력을 실무자 레벨로 스킬업! 하고 싶으신 분
- Sass/SCSS를 왜 써야 하는지, 어떻게 써야 하는지 배우고 싶은 분
- 복잡한 UI 프로젝트를 개발하며 의미있는 포트폴리오를 쌓고 싶으신 분
- 웹 퍼블리셔 또는 웹 프론트엔드 개발자로 취업하고자 준비하고 계신 분
- JavaScript를 공부하기 전에 HTML, CSS 실력을 확실히 다지고 싶은 분







여러분들이 만들게 될 최종 아웃풋은 😎

여기에서 확인 가능하십니다



.

.

.

.



"실례지만 누구세요...?"


.

.

.

.






https://www.youtube.com/c/kimbug


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