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

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

Lecture Introduction
Difficulty
Normal
Category
Web Programming - Programming
Tag
Sass, SCSS, HTML, CSS, 포트폴리오, 프론트엔드, 퍼블리싱, Frontend, JavaScript, DOM
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 스타일
    💅 (CSS 애니메이션) 스르륵 나타나는 막대 그래프
    Review Card 마크업
    Review Card 스타일
  • 16
    Product Inquiry Section (연재예정)
  • Inquiry Card 마크업
    Inquiry Card 스타일
  • 17
    Product Recommendation Section (연재예정)
  • Product Card 마크업
    Product Card 스타일
  • 18
    User Review Gallery (연재예정)
  • User Gallery 마크업
    🚀 돌아온 tiny-slider.js
    User Gallery 스타일
  • 19
    Order Forms (연재예정)
  • Bottom-Fixed Order Form 마크업
    Bottom-Fixed Order Form 스타일
    Order Form Modal 마크업
    Order Form Modal 스타일
    Floating Order Form 마크업
    Floating Order Form 스타일
  • 20
    Dialogs (연재예정)
  • 💅 다양한 Dialog 컴포넌트 종류
    Cart Modal
    Bookmark Toasts
  • 21
    ▼▼▼ JavaScript (연재예정) ▼▼▼
  • [필독] JavaScript 숙련도에 따른 강의 수강 안내
    (유형 1) 저는 아무것도 모르는 사람입니다
    (유형 2) 자바스크립트 문법'만' 대충 압니다
    (유형 3) 할 줄은 압니다만...ㅜ
  • 22
    화룡점정: JavaScript 파티 (연재예정)
  • 23
    포트폴리오 업데이트 (연재예정)
Instructor Introduction
user
김버그Teacher

Lecture Reviews
  • No reviews have been written.
100,000
50,000
(50%)

Average Rating
5.0
Difficulty
Normal
Lecture Period
Unlimited