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

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

클래스 소개
난이도
쉬움
카테고리
웹 프로그래밍 - 프로그래밍
태그
부트스트랩, CSS, HTML
추천 학습대상
- 빠르고 효율적으로 웹 사이트를 만들고 싶은 분들
- 방대한 이론이 아닌, 실전 프로젝트를 통한 실용적 배움을 추구하시는 분들
- HTML과 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일간