인프런 - 부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기 #1

1. 부트스트랩의 개념

   가. 웹 프론트엔드 개발 프레임워크

        - CSS와 같이 기본적 웹페이지를 만드는 방법을 알고 공부를 시작하는 것이 좋습니다

   나. 미리 정의된 <style>을 'class'로 사용

   다. 구성 핵심 요소 = CSS + GRID SYSTEM + 컴포넌트 + JAVASCRIPT PLUGIN

 

2. 부트스트랩 연습 사이트

   가. https://getbootstrap.com (영문)

Bootstrap

   나. https://bootstrapk.com (한글)

Bootstrap

3. 부트스트랩 핵심 활용방법

   가. 부트스트랩은 다양한 클래스명을 이용해 이미 스타일을 만들어 두었기 때문에,

        해당하는 파일들에 링크를 걸어주고, 내가 만든 구조에 그 클래스명을 적용함으로써

        원하는 스타일을 빠르게 만들 수 있다 (사전에 해당 클래스명들을 알고 있어야 함)

   나. 반응형, 유동형 레이아웃을 지원하는 구역 분할 시스템 (총 12분할) 인 그리드시스템의 활용

        1) 한 요소가 차지할 크기를 해상도별로 다르게 설정해줄 수 있다 (1-12칸)

           - 1200px 보다 클 때 : .col-lg-

           - 992px 보다 클 때 : .col-md-

           - 768px 보다 클 때 : .col-sm-

           - 768px 보다 작을 때 : .col-xs-

 

4. sublime text 3 설치와 CSS를 이용한 반응형 코딩 실습

   가. 설치 : sublime text 3
       1) 설치 시 add to explorer context menu 선택
       2) 설치방법 안내 : https://packagecontrol.io 에서 install now 선택
          > 여러 방법이 안내되어 있으나 sublime text 3 > Tools > Install Package Control 이 쉬워 보임
       3) 플러그인 설정 : sublime text 3 > Tools > command pallete

          > 설치 시 package control: Install Package 하고 나서 나오는 명령줄에 해당 플러그인을 입력해주는 것을 반복

          > 강사님 추천 플러그인 : emmet (빠른 코딩), bracket highlighter (코드 쌍 하이라이트),

                                           sidebar enhancement (사이드바 기능 강화), color picker (색상 팔레트 설치)

   나. 활용

       1) HEAD 내 선언

          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">

       2) media별 설정

          @media (min-width: 1200px)

          @media (min-width: 992px)

          @media (min-width: 768px)

          @media (max-width: 767px)