김버그의 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 실력을 확실히 다지고 싶은 분
- HTML, CSS 실력을 실무자 레벨로 스킬업! 하고 싶으신 분
- Sass/SCSS를 왜 써야 하는지, 어떻게 써야 하는지 배우고 싶은 분
- 복잡한 UI 프로젝트를 개발하며 의미있는 포트폴리오를 쌓고 싶으신 분
- 웹 퍼블리셔 또는 웹 프론트엔드 개발자로 취업하고자 준비하고 계신 분
- JavaScript를 공부하기 전에 HTML, CSS 실력을 확실히 다지고 싶은 분
Curriculum
Expand All
- 01개발 환경 설정
- 02Asset 준비
- 03Sass 100% 활용하기: 변수 Variable
- 04Sass 200% 활용하기: 믹스인 Mixin
- 05Sass 300% 활용하기: 모듈 Module
- 06Global Navigation Bar
- 07Sidebar
- 08Search (연재예정)
- 09Local Navigation Bar (연재예정)
- 10Main & Global Footer (연재예정)
- 11Product Overview (연재예정)
- 12Product Tab Menu (연재예정)
- 13Product Details (연재예정)
- 14Product Reviews (연재예정)
- 15Product Inquiries (연재예정)
- 16Product Card (연재예정)
- 17Order Form (연재예정)
- 18Modals & Toasts (연재예정)
- 19화룡점정: JavaScript 파티 (연재예정)
- 20포트폴리오 업데이트 (연재예정)
Figma & 코드 에디터 설정
Git 설정
node-sass 설치 & 설정
npm script 업데이트
Prettier & SCSS lint 설정
[공지] SCSS 린터가 작동 안 하시는 분들은 필독
Sass Q&A
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 업데이트
Sass를 배우는 우리의 자세
$ - 디자인을 코드로 옮기는 첫 걸음
색상 팔레트 Color Palettes
타이포그래피 Typography
그리드 시스템 Grid System
그리드 시스템 분석 훈련
반응형 그리드시스템 설계 1
반응형 그리드시스템 설계 2
반응형 그리드시스템 설계 3
자주 사용하는 것들은 미리미리 만듭시다
태그 Tags
아바타 Avatars
별점 Star Ratings
가격표 Prices
버튼 Buttons 1
버튼 Buttons 2
폼 요소 Forms 1
폼 요소 Forms 2
페이지네이션 Paginations
Utility 클래스 업데이트
레이아웃 분석
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 & 마무리
Sidebar 마크업 1
Sidebar 마크업 2
Sidebar Header
💅 굴욕없는 Sidebar Header (feat. truncate, overflow의 비밀)
Drawer Menu
💅 Drawer Menu 상태 디자인
Sidebar 레이아웃 마무리
💅 Scrollbar 스타일링 & 실무자처럼 z-index 관리하는 법
💅 디테일은 생명: Overscroll Behavior
💅 Sidebar & Overlay 인터렉션
Search Modal 마크업
Search Modal 스타일
💅 디테일은 생명
LNB 마크업
LNB 레이아웃 & 스타일
Instructor Introduction
김버그Teacher
Lecture Reviews
- No reviews have been written.
Ends in
ll:ll:ll
￦100,000
￦
40,000
(60%)Average Rating
5.0
Difficulty
Normal
Lecture Period
Unlimited