패밀리 서비스
EDU
LEVEL
DEVTH
IDE
회사소개
블로그
English
한국어
日本語
로그인
회원가입
전체
루트
공지사항
Q&A
김버그의 UI 개발 부트캠프 - 경력같은 신입으로 레벨업
강좌 소개
체험하기
교육 과정
강의자 소개
강좌 후기
클래스 소개
난이도
보통
카테고리
웹 프로그래밍 - 프로그래밍
태그
자바스크립트, CSS, HTML
수료증
발급 가능
추천 학습대상
- 좀 더 체계적으로 UI를 구축하고 싶으신 분
- HTML, CSS 실력을 실무자 레벨로 스킬업! 하고 싶으신 분
- Sass/SCSS를 왜 써야 하는지, 어떻게 써야 하는지 배우고 싶은 분
- 복잡한 UI 프로젝트를 개발하며 의미있는 포트폴리오를 쌓고 싶으신 분
- 웹 퍼블리셔 또는 웹 프론트엔드 개발자로 취업하고자 준비하고 계신 분
- JavaScript를 공부하기 전에 HTML, CSS 실력을 확실히 다지고 싶은 분
여러분들이 만들게 될 최종 아웃풋은 😎
여기
에서 확인 가능하십니다
.
.
.
.
"실례지만 누구세요...?"
.
.
.
.
https://www.youtube.com/c/kimbug
체험하기
모두 펼치기
01
개발 환경 설정
Sass Q&A
체험하기
08:27
02
Asset 준비
10개 (01:36:19)
Reset.css vs Normalize.css
체험하기
09:39
03
Sass 100% 활용하기: 변수 Variable
9개 (01:47:07)
$ - 디자인을 코드로 옮기는 첫 걸음
체험하기
11:56
04
Sass 200% 활용하기: 믹스인 Mixin
5개 (50:52)
Text Style
체험하기
13:16
05
Sass 300% 활용하기: 모듈 Module
11개 (01:49:23)
아바타 Avatars
체험하기
10:03
교육 과정
모두 펼치기
01
개발 환경 설정
Figma & 코드 에디터 설정
07:20
Git 설정
05:51
node-sass 설치 & 설정
11:34
npm script 업데이트
08:50
Prettier & SCSS lint 설정
06:45
[공지] SCSS 린터가 작동 안 하시는 분들은 필독
Sass Q&A
체험하기
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
체험하기
09:39
김버그의 Reset 픽
17:21
npm script 업데이트
02:08
03
Sass 100% 활용하기: 변수 Variable
9개 (01:47:07)
Sass를 배우는 우리의 자세
04:46
$ - 디자인을 코드로 옮기는 첫 걸음
체험하기
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
체험하기
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
체험하기
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
마지막 업데이트
|
2022년 08월 16일
강의자 소개
김버그
캡틴
김버그 강의자의 소개 페이지
안녕하세요. 구름에듀 캡틴 김버그입니다. 함께 학습을 시작해봐요!
강좌 후기
₩
100,000
₩
90,000
(
10%
)
평균평점
4.9
난이도
보통
수강기간
평생 무제한
공유
357
결제하기