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

1. 부트스트랩 시작하기

   가. 일반적 사용방법 2가지

       1) 서버에 업로드하여 사용하기

       2) CDN 이용하기

   나. 간편하게 공식 홈페이지에서 제공하는 기본 HTML 템플릿을 가져다가, 자신이 정한 사용방법에 따른 CDN 링크 적용

 

2. 최상위 div 요소에 .container 또는 .container-fluid 추가

   가. .container : 고정폭 레이아웃을 만들 때 사용

   나. .container-fluid : 좌우로 꽉 찬 레이아웃을 만들 때 사용

   ※ 필요 시 링크한 css에서 해당 요소의 스타일을 확인하며 사용하면 된다. 이것은 다른 클래스도 동일하다

 

3. Grid system 활용

   가. .col-*-* 여러 개를 사용하면 가로 해상도에 따라 열의 가로 크기를 다르게 정할 수 있다

 

4. 타이포그래피

   가. h1 - h6 까지 크기별로 사용할 수 있는 제목 스타일

   나. .small 클래스를 사용해 제목 안에 부제 텍스트 생성 가능

        > 예 : <h1>h1. Bootstrap heading <small>Secondary text</small></h1>

 

5. 불렛이나 번호의 스타일이 없는 list-style : none과 왼쪽의 여백을 제거하는 스타일을 주려면

   ul이나 ol에 .list-unstyled 클래스명을 부여한다.

 

6. 해당 요소의 꼭지점이 모가 둥근 스타일을 주려면 .img-rounded

   동그란 원을 만드는 스타일을 주려면 .img-circle

   썸네일 형식의 스타일을 주려면 .img-thumbnail 클래스명을 부여한다

   ※ 연습할 때 placeholer.com 을 사용해 원하는 크기의 임시 이미지 파일을 추출할 수 있음

 

7. 부트스트랩의 다양한 폰트 컬러를 지정하는 클래스명

   가. .text-muted

   나. .text-primary

   다. .text-success

   라. .text-info

   마. .text-warning

   바. .text-danger

 

8. 부트스트랩의 다양한 배경 컬러를 지정하는 클래스명

   가. .bg-primary

   나. .bg-success

   다. .bg-info

   라. .bg-warning

   마. .bg-danger

   ※ 클래스별 우선하는 설정을 바꾸는 방법은 span 태그의 활용

      > 예 : <p class="bg-primary"><span class="text-muted">Lorem ipsum dolor sit amet.</span></p>