패밀리 서비스

전체

루트 공지사항 Q&A

[ 부트스트랩 5 ] 빠르고 스마트하게 웹사이트 만들기 | 입문용

전세계적으로 가장 많이 사용되고 있는 웹 디자인 툴킷! 부트스트랩5로 웹 사이트 제작부터 배포까지!

클래스 소개

난이도

쉬움

카테고리

웹 프로그래밍 - 프로그래밍

태그

부트스트랩, CSS, HTML

Bootstrap5

전세계적으로 가장 많이 사용되고 있는 웹 디자인 툴킷!

부트스트랩을 통해 보다 빠르고 스마트하게 나만의 포트 폴리오 웹 사이트를 만들어 보세요!

본 강의는 보다 실용적이고 빠르게 웹 사이트를 만들고자 하는 분들을 위한 강의입니다.

웹 사이트를 만들기 위한 가장 기본 언어인, HTML과 CSS만 보더라도 상당한 수준의 학습량을 요구합니다.

하지만, 보다 빠르고 효율적으로 웹사이트를 만드는 길을 선택할 수도 있습니다.

바로 부트스트랩입니다.

우리는 부트스트랩을 통해서 상당한 수준의 웹 사이트를 빠르고 스마트하게 만들 수 있습니다.

[ 본 강좌를 통해 만들게 될 프로젝트 예시]

HTML이나, 코딩에 대한 경험이 전혀 없어도 걱정하지 마세요!

본 과정은 입문과정으로 html을 처음 접하는 분들을 위해 완전 기초 개념부터 시작해서 전문가 수준의 웹 사이트까지 만들어 볼 수 있도록 준비된 과정입니다.

이제 부트스트랩을 통해 빠르고 스마트하게 웹 사이트를 만들어 나가세요. 본 강의를 통해서 여러분은 나만의 색을 입힌 웹 사이트를 세상과 공유하게 될 거예요!

함께 만들어 볼 프로젝트

본 강좌를 통해 부트스트랩5로 총 2개의 포트폴리오 웹 사이트를 함께 만들어 나가게 됩니다. 또한 완성된 최종 웹 사이트는 깃허브를 통해 무료로 배포하는 방법도 소개해 드리니까요. 본 과정이 마무리되면, 여러분만의 색을 입힌 포트폴리오 웹 사이트를 갖게 되실 거예요!

부트스트랩 프로젝트 1

부트스트랩을 배워나가면서 첫번째로 만들어 볼 포트폴리오 웹 사이트를 영상으로 먼저 만나 보세요!

부트스트랩 프로젝트 2

부트스트랩의 기초를 다진 후 최종적으로 만들어 볼 포트폴리오 웹 사이트입니다. 두번째 작품에서는 이미지 슬라이더, 사이드 바 레이아웃, Tab과 아코디언 기능이 추가되고, 구글 맵과 폼 디자인도 적용해 봅니다.

Why 부트스트랩?

웹 사이트를 쉽고 빠르게 디자인할 수 있도록 도와주는 도구!
부트스트랩은 이미 전세계적으로 프론트엔드 개발자들 사이에서 가장 많이 사용되고 있는 css/자바스크립트 프레임 워크입니다. 쉽게 말해 웹 사이트를 쉽고 빠르게 디자인할 수 있도록 도와주는 도구예요.
부트스트랩의 최대 장점 중 하나가, 바로 반응형 웹 디자인입니다.
우리는 컴퓨터나 태블릿, 스마트 폰 뿐만 아니라, 이제 자동차나 TV 또는 냉장고와 같은 가전 제품을 통해서도 웹 브라우저 접속이 가능해졌습니다. 이처럼 우리는 다양한 크기의 기기를 통해서 웹 사이트에 접속합니다.
어떤 기기로 접속하든 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 변경해 주는 방식을 반응형 웹 디자인이라고 합니다.
CSS만으로 이러한 반응형 웹 디자인을 한다는 것은 결코 쉬운 작업이 아닙니다. 하지만, 부트스트랩을 사용하면, 아주 간단하고 빠르게 반응형 웹 디자인을 만들 수 있어요!
바로 이 부분이 부트스트랩의 가장 큰 장점입니다.

Q&A

Q. HTML이 처음입니다. 사전 지식없이 들을 수 있나요? A. 네. HTML과 CSS를 처음 접하시는 분들도 쉽게 따라올 수 있도록 기초 개념에 대한 설명과 기본 예제 프로젝트들이 포함되어 있습니다.
Q. 웹 사이트를 배포할 때 추가 비용이 발생하나요? A. 최종적으로 만든 포트폴리오 웹 사이트는 깃허브를 통해 무료 배포를 하는 방법에 대해 소개해 드립니다. 따라서 추가적으로 발생하는 비용은 없습니다. 단, 개인 도메인으로 연결을 원하실 경우, 도메인 구입 비용이 발생합니다. 일반적으로 1년에 1만원~3만원 정도의 비용이 발생한다고 생각하시면 됩니다. 깃허브를 통한 무료 배포 및 개인 도메인 연결 방법은 본 과정을 통해서 소개해 드립니다. Q. 수강 관련 참고 사항이 있나요? A. 본 강좌 수강을 위해서는 크롬 브라우저와 vs code 편집기 설치가 필요하며, 설치 방법은 강의를 통해 소개해 드립니다. 본 과정을 통해 배워나가는 부트스트랩은 버전 5로, 인터넷 익스플로러와 더이상 호환되지 않습니다. 현재 인터넷 익스플로러의 공식적 서비스는 종료되었지만, 그럼에도 여전히 인터넷 익스플로러와의 호환이 필요한 경우도 있을 수 있습니다. 그 경우, 부트스트랩 버전을 4이하로 낮춰서 만들어 주시면 됩니다.

체험하기

모두 펼치기

01
Welcome!

부트스트랩5 강좌에 오신 것을 환영합니다.

체험하기

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

1-1. HTML, CSS, 자바스크립트란?

체험하기

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

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

체험하기

10-3. 버튼 스타일 지정하기

체험하기

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

실전 1-1. ART Cook 포트폴리오 웹사이트 소개

체험하기

교육 과정

모두 펼치기

01
Welcome!

부트스트랩5 강좌에 오신 것을 환영합니다.

체험하기

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

1-1. HTML, CSS, 자바스크립트란?

체험하기

1-2. 정적 사이트와 동적 사이트

1-3. 프론트 엔드와 백 엔드

1-4. vs code 설치하기

03
[챕터2] HTML이란?

2-1. html이란?

2-2. html 체험하기 - h 태그

2-3. html 기본 세팅

2-4. html 예제 소스 코드 다운로드

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

3-1. 원데이 클래스 예제 소개

3-2. p 태그란?

3-3. hr 태그와 br 태그

3-4. 웹 페이지에 CSS 적용하기

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

4-1. 김소월 시 웹 페이지 소개

4-2. html 복습 솔루션

4-3. 텍스트 굵게/ 이탤릭체/ 밑줄

4-4. 이미지 추가하기

4-5. 컬러 코드와 앵커 태그

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

5-1. 통새우 버거 레시피 예제 소개

5-2. html 복습 솔루션

5-3. 목록 태그

5-4. 테이블 태그 (표)

5-5. 표 구조 나누기

5-6. 앵커 태그 및 유튜브 비디오 삽입하기

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

6-1. 케이터링 예약 접수 페이지 소개

6-2. 입력 양식(폼)이란?

6-3. 다양한 input 타입

6-4. 라디오 버튼과 체크 박스

6-5. 버튼 태그 및 input 태그의 기타 속성

6-6. textarea 태그와 CSS스타일 적용

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

7-1. 시맨틱(semantic) 태그란?

7-2. header, nav, section 태그

7-3. article, main 태그

09
[챕터8] CSS - Step 1

8-1. CSS 적용 방식 3가지

8-2. 글꼴 변경하기 - 웹 폰트

8-3. font-weight 및 font-size

8-4. 줄 간격 및 텍스트 정렬

8-5. 색상 적용하기

8-6. 배경 이미지

10
[챕터9] CSS - Step 2

9-1. 마진(margin)과 패딩(padding)이란?

9-2. 마진과 패딩 속성 지정하기

9-3. 테두리 속성 지정하기

9-4. CSS 선택자 - 클래스와 ID

9-5. CSS 우선 순위

9-6. 연결 선택자

9-7. 뷰포트 단위 vw/vh

9-8. 플렉스박스(flexbox)란?

9-9. 주축 정렬 (justify-content)

9-10. 교차축 정렬 (align-속성)

9-11. 플렉스박스 주축/교차축 전환 - column

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

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

체험하기

10-2. 부트스트랩 파일 가져오기

10-3. 버튼 스타일 지정하기

체험하기

10-4. 색상 적용하기

10-5. 글자 크기 조정하기 (font-size)

10-6. 기타 텍스트 속성 지정하기

10-7. 마진(margin)과 패딩(padding)

10-8. 테두리(border) 스타일 지정하기

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

11-1. 컨테이너 클래스

11-2. 플렉스박스

11-3. 그리드(grid) 시스템이란?

11-4. 기본 그리드 연습하기

11-5. 그리드 - 반응형 레이아웃

11-6. 반응형 레이아웃 연습하기

11-7. 에밋(emmet)이란?

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

실전 1-1. ART Cook 포트폴리오 웹사이트 소개

체험하기

실전 프로젝트 1 예제 소스 코드 다운로드

실전 1-2. 헤더 영역 - 내용 채우기

실전 1-3. 헤더 영역 - 배경 이미지 넣기

실전 1-4. 헤더 영역 아이템 배치하기

실전 1-5. 쉐프 소개 섹션 만들기

실전 1-6. 포트폴리오 섹션 만들기

실전 1-7. SNS 섹션 만들기

실전 1-8. 연락처 섹션 만들기

실전 1-9. 서비스 섹션 만들기

실전 1-10. 블로그 섹션 만들기

실전 1-11. 뉴스 섹션 모달 만들기

실전 1-12. 헤더 섹션 모달 띄우기

실전 1-13. 기본 네비게이션 바 만들기

실전 1-14. 네비게이션 버튼, 색상 효과, 스크롤스파이

실전 1-15. 풋터 만들기

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

실전 2-1. 두 번째 프로젝트 소개

실전 프로젝트 2 예제 소스 코드 다운로드

실전 2-2. Home - 프로필 영역 만들기

실전 2-3. Home - 자격 사항 및 경력 사항 추가하기

실전 2-4. Home - 포트폴리오 영역 만들기

실전 2-5. Home - 배너 및 모달 만들기

실전 2-6. Home - 풋터 만들기

실전 2-7. Home - 네비게이션 바 만들기

실전 2-8. Home - 헤더 영역 캐러셀 만들기

실전 2-9. 프로필 페이지 - Tab 버튼 만들기

실전 2-10. 프로필 페이지 - Tab 패널 만들기

실전 2-11. 개인 공간 인테리어 페이지 만들기

실전 2-12. 비즈니스 인테리어 만들기

실전 2-13. 연락처 페이지 만들기

실전 2-14. 웹 사이트 배포하기

실전 2-15. 개인 도메인 연결하기

15
완강을 축하합니다!

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

마지막 업데이트|2022년 11월 28일

강의자 소개

코드덤캡틴

유튜브

현재 유튜브 코드덤 채널을 운영하며, 비전공자분들도 쉽게 코딩을 접할 수 있도록 다양한 컨텐츠를 공유하고 있습니다. 이제, 전공이나 분야에 상관없이 누구나 코딩을 배워야하는 시기가 왔습니다. 코딩은 배움을 우리 생활 속으로 녹여낼 수 있는 훌륭한 도구입니다. 코딩을 통해 배움과 실생활과의 경계가 허물어지고, 우리의 아이디어, 우리의 꿈이 현실에 조금 더 가까워질 수 있기를 바랍니다.

강좌 후기

￦

88,000

평균평점

0.0

난이도

쉬움

수강기간

결제 후 52주 1일간