All Lectures
RouteNoticeQ&A

Bootstrap을 활용한 반응형 웹페이지 만들기

이제 반응형 없는 웹페이지는 상상할 수 없다! 부트스트랩 학습을 통해 쉽고 빠르게 반응형 웹을 제작해봅시다.

Lecture Introduction
Difficulty
Easy
Category
Web Programming - Programming
Tag
부트스트랩
Certificate
You can issue a certificate of completion
Target Audience
- 반응형 웹 제작을 하고싶은 분
- 빠른 내에 웹 페이지를 개발하고 싶은 분
- 프론트엔드에 익숙하지 않은 초보자 또는 백엔드 개발자
- 디자인 감각은 없지만 멋진 웹페이지를 만들고 싶은 분
- 컴포넌트들을 이용하여 나만의 웹페이지로 커스터마이즈 하고싶은 분




부트스트랩(Bootstrap)이란 무엇인가요?

부트스트랩은 웹사이트를 쉽게 만들 수 있게
도와주는 HTML, CSS, JS 프레임워크입니다. 
하나의 CSS로 휴대폰, 태블릿, 데스크탑까지
다양한 기기에서 작동하며, 다양한 기능을 제공하여 
사용자가 쉽게 웹사이트를 제작 및 유지보수할 수
있도록 도와줍니다.



부트스트랩의 인기 비결은?

1. 컴포넌트화 되어있어 손 쉬운 커스터마이징
2. IE, Safari 등 모든 모던 웹 페이지에 최적화
3. 여러 화면 사이즈에 대응하는 반응형 웹 페이지 제작에 편리




이런 분들이 수강하면 좋아요





부트스트랩의 세계로 이끌어줄 강의자님을 소개합니다!



김세지 강의자님

現 그린컴퓨터아카데미 수원캠퍼스 UIUX 웹디자인/웹퍼블리셔 과정
前 쓰리에스솔루션 디자인 삼성ODD 기획마케팅총괄 실무담당
前 SF필름스쿨(MAYA, 영상편집, 그래픽디자인)


all Icons made by Freepik from www.flaticon.com

Preview
Expand All
  • 02
    Bootstrap(부트스트랩)을 활용한 반응형 웹페이지 만들기
  • 1. 부트스트랩의 개념
    2. 서브라임텍스트 설치와 반응형 코딩(1)
    3. 서브라임텍스트 설치와 반응형 코딩(2)
    4. 부트스트랩 시작하기
Curriculum
Expand All
  • 01
    학습자료 다운로드
  • 교육자료 및 소스코드 다운로드
  • 02
    Bootstrap(부트스트랩)을 활용한 반응형 웹페이지 만들기
  • 1. 부트스트랩의 개념
    2. 서브라임텍스트 설치와 반응형 코딩(1)
    3. 서브라임텍스트 설치와 반응형 코딩(2)
    4. 부트스트랩 시작하기
    5. 디바이스마다 달라지는 레이아웃
    6. 부트스트랩의 다양한 스타일과 반응형 레이아웃 실습
    7. 그리드의 다양한 옵션
    8. 다양한 테이블 스타일과 폼태그 스타일
    9. 다양한 버튼 스타일
    10. 반응형 이미지 스타일
    11. 도움을 주는 클래스들
    12. 디바이스 사이즈마다 요소를 보이고 숨기는 클래스
    13. 다양한 컴포넌트(글리피콘, 드랍다운, 네비게이션)의 활용
    14. 네비게이션 바의 사용법
    15. 네비게이션 바를 스크롤스파이 하기
    16. 경로, 페이지네이션, 라벨, 배지, 점보트론 컴포넌트의 활용
    17. 썸네일, 진행바, 기본 미디어 컴포넌트의 활용
    18. 패널, 웰, 반응형 임베드 컴포넌트의 활용
    19. 자바스크립트로 동작하는 요소(모달창)의 활용
    20. 툴팁, 팝오버, 토글버튼 자바스크립트로 동작하기
    21. 컬랩스, 아코디언 자바스크립트로 동작하기 & 모달창 복습
    22. 캐로셀의 구현과 다양한 옵션 및 메소드의 활용
    23. Affix의 개념과 사용법
Recent Update|2019. 10. 15
Instructor Introduction
hello.Goorm Edu Captain 아이티고.Let's start learning together!

Lecture Reviews
46,000

Average Rating
0.0
Difficulty
Easy
Lecture Period
Unlimited