김버그의 UI 개발 부트캠프 - 경력같은 신입으로 레벨업 - goormEDU
오늘은 9름데이!
지금 모든 강좌 10% 추가 할인10% 추가 할인받으세요.
ll:ll:ll후에 종료됩니다.
All Lectures
RouteNoticeQ&A

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

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








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

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



.

.

.

.



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


.

.

.

.






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


Preview
Expand All
  • 01
    개발 환경 설정
  • Sass Q&A
  • 02
    Asset 준비
  • Reset.css vs Normalize.css
  • 03
    Sass 100% 활용하기: 변수 Variable
  • $ - 디자인을 코드로 옮기는 첫 걸음
  • 04
    Sass 200% 활용하기: 믹스인 Mixin
  • Text Style
  • 05
    Sass 300% 활용하기: 모듈 Module
  • 아바타 Avatars
Curriculum
Expand All
  • 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 디플로이
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