10-1. 부트스트랩 적용 방식 이해하기 | 코드덤

Autoplay
Autocomplete

Previous Lesson Complete and Continue

[부트스트랩5] 보다 빠르고 스마트하게 웹사이트 만들기

Welcome!

부트스트랩5 강좌에 오신 것을 환영합니다! (9:08)
[공지사항] 강의 공지사항 업데이트

[챕터1] About 웹 프로그래밍

1-1. HTML, CSS, 자바스크립트란? (4:39)
1-2. 정적 사이트와 동적 사이트 (4:03)
1-3. 프론트 엔드와 백 엔드 (3:56)
1-4. vs code 설치하기 (4:52)

[챕터2] HTML이란

2-1. html이란? (5:25)
2-2. html 체험하기 - h 태그 (9:17)
2-3. html 기본 세팅 (11:40)
2-4. html 예제 소스 코드 다운로드

[챕터3] html 예제 - 원데이 클래스 웹 페이지 만들기

3-1. 원데이 클래스 예제 소개 (2:33)
3-2. p 태그란? (9:11)
3-3. hr 태그와 br 태그 (7:38)
3-4. 웹 페이지에 CSS 적용하기 (4:23)

[챕터4] html 예제 - 김소월의 엄마야 누나야

4-1. 김소월 시 웹 페이지 소개 (2:23)
4-2. html 복습 솔루션 (3:31)
4-3. 텍스트 굵게/ 이탤릭체/ 밑줄 (5:08)
4-4. 이미지 추가하기 (7:26)
4-5. 컬러 코드와 앵커 태그 (5:05)

[챕터5] html 예제 - 버거 레시피 소개 페이지

5-1. 통새우 버거 레시피 예제 소개 (3:53)
5-2. html 복습 솔루션 (5:36)
5-3. 목록 태그 (8:26)
5-4. 테이블 태그 (표) (13:33)
5-5. 표 구조 나누기 (6:10)
5-6. 앵커 태그 및 유튜브 비디오 삽입하기 (5:25)

[챕터6] 케이터링 예약 접수 페이지 만들기

6-1. 케이터링 예약 접수 페이지 소개 (3:06)
6-2. 입력 양식(폼)이란? (8:38)
6-3. 다양한 input 타입 (8:17)
6-4. 라디오 버튼과 체크 박스 (10:05)
6-5. 버튼 태그 및 input 태그의 기타 속성 (8:35)
6-6. textarea 태그 및 CSS 스타일 적용 (6:44)

[챕터7] html - 시맨틱(semantic) 태그

7-1. 시맨틱(semantic) 태그란? (7:03)
7-2. header, nav, section 태그 (7:17)
7-3. article, main 태그 (4:49)

[챕터8] CSS - Step 1

8-1. CSS 적용 방식 3가지 (13:53)
8-2. 글꼴 변경하기 - 웹 폰트 (10:34)
8-3. font-weight 및 font-size (11:20)
8-4. 줄 간격 및 텍스트 정렬 (5:54)
8-5. 색상 적용하기 (7:12)
8-6. 배경 이미지 (13:16)

[챕터9] CSS - Step 2

9-1. 마진(margin)과 패딩(padding)이란? (8:03)
9-2. 마진과 패딩 속성 지정하기 (16:19)
9-3. 테두리 속성 지정하기 (11:26)
9-4. CSS 선택자 - 클래스와 ID (13:20)
9-5. CSS 우선순위 (7:12)
9-6. 연결 선택자 (9:54)
9-7. 뷰포트 단위 vw/vh (15:00)
9-8. 플렉스박스(flexbox)란? (5:27)
9-9. 주축 정렬 (justify-content) (7:46)
9-10. 플렉스박스 교차축 정렬 (align-속성) (11:40)
9-11. 플렉스박스 주축/교차축 전환 - column (5:34)

[챕터10] 부트스트랩 기초

10-1. 부트스트랩 적용 방식 이해하기 (8:04)
10-2. 부트스트랩 파일 가져오기 (12:04)
10-3 버튼 스타일 지정하기 (13:16)
10-4. 색상 적용하기 (6:03)
10-5. 글자 크기 조정하기 (font-size) (8:42)
10-6. 기타 텍스트 속성 지정하기 (7:23)
10-7. 마진 (margin)과 패딩 (padding) (9:50)
10-8. 테두리(border) 스타일 지정하기 (8:20)

[챕터11] 부트스트랩 - 플렉스 박스 및 그리드 시스템

11-1. 컨테이너 클래스 (container) (5:44)
11-2. 플렉스 박스 (d-flex) (13:16)
11-3. 그리드(grid) 시스템이란? (5:38)
11-4. 기본 그리드 연습하기 (8:55)
11-5. 그리드 - 반응형 레이아웃 (8:23)
11-6. 반응형 레이아웃 연습하기 (9:45)
11-7. 에밋(emmet)이란? (10:41)

[실전 프로젝트 1] 코드덤 ART COOK 포트폴리오 사이트

실전 1-1. ART Cook 포트폴리오 웹 사이트 소개 (3:25)
실전 프로젝트 1 예제 소스 코드 다운로드
실전 1-2. 헤더 영역 내용 채우기 (7:34)
실전 1-3. 헤더 영역 배경 이미지 넣기 (5:13)
실전 1-4. 헤더 영역 아이템 배치하기 (3:41)
실전 1-5. 쉐프 소개 섹션 만들기 (12:35)
실전 1-6. 포트폴리오 섹션 만들기 (8:51)
실전 1-7. SNS 섹션 만들기 (13:23)
실전 1-8. 연락처 섹션 만들기 (7:53)
실전 1-9. 서비스 섹션 만들기 (11:20)
실전 1-10. 블로그 섹션 만들기 (8:09)
실전 1-11. 뉴스 섹션 모달 만들기 (23:42)
실전 1-12. 헤더 섹션 모달 띄우기 (4:26)
실전 1-13. 기본 네비게이션 바 만들기 (13:12)
실전 1-14. 네비게이션 버튼, 색상 효과 및 스크롤스파이 (13:26)
실전 1-15. 풋터 만들기 (4:32)

[실전 프로젝트 2] 코드덤 인테리어 포트폴리오 사이트

실전 2-1. 두 번째 프로젝트 소개 (2:57)
실전 프로젝트 2 예제 소스 코드 다운로드
실전 2-2. Home - 프로필 영역 만들기 (9:53)
실전 2-3. Home - 자격 사항 및 경력 사항 추가하기 (5:52)
실전 2-4. Home - 포트폴리오 영역 만들기 (8:47)
실전 2-5. Home - 배너 및 모달 만들기 (10:35)
실전 2-6. Home - 풋터 만들기 (9:34)
실전 2-7. Home - 네비게이션 바 만들기 (12:13)
실전 2-8. Home - 헤더 영역 캐러셀 만들기 (11:15)
실전 2-9. 프로필 페이지 - Tab 버튼 만들기 (22:33)
실전 2-10. 프로필 페이지 - Tab 패널 만들기 (8:05)
실전 2-11. 개인 공간 인테리어 페이지 만들기 (14:34)
실전 2-12. 비즈니스 인테리어 만들기 (16:39)
실전 2-13. 연락처 페이지 만들기 (21:51)
실전 2-14. 웹 사이트 배포하기 (13:53)
실전 2-15. 개인 도메인 연결하기 (10:32)

완강을 축하합니다!

부트스트랩5라는 새로운 도구의 획득을 축하드립니다! (14:31)

10-1. 부트스트랩 적용 방식 이해하기

Complete and Continue

Discussion

0 comments