[Bootstrap]부트스트랩 장점, 단점, 그리드, 클래스 선택자, container, row

부트스트랩

html, css, javaScript 파일로 구성된 프레임워크로 디자인, 액션이 미리 정의되어 있다

*프레임워크: 이미 개발환경이 완성된 것

 

장점

- 다양한 디자인 스타일이 정의되어있다

- css클래스 선택자 명만 바꾸면 쉽게 디자인이 적용된다

- pc, 모바일, 태블릿 등 폭넓이에 따라 적절하게 디자인이 배치되는 반응형 프레임워크이다

- 무료 오픈 소스이다

 

단점

- 디자인이 이미 정의되어 있어서 자유롭게 구조를 바꾸기 힘들다(구조 파악의 어려움이 있음)

 

아래 사이트를 참고하여 공부

www.w3schools.com

 

디자인 스타일을 변경하기 위해서는 css파일을 변경,수정하는 것이 아니라

스타일은 마지막 설정된것으로 지정된다는 특성을 이용하여 스타일을 덮어씌워서 수정해준다

 

어떤 레이아웃을 변경할지에 따른 클래스 선택자는 이미 정해져있으므로

기본적인 클래스 선택자는 외우도록 한다

디자인 스타일 설정을 자세히 알아보기 위해서는 ctrl+h 단축키를 사용하여

css파일안의 클래스 선택자 내용값을 보도록 한다

---

그리드(grid)

부트스트랩의 기본 레이아웃

디자인을 설계하기 위해 가장 기본적으로 그리드에 대해 알아야 한다

 

그리드 기본

www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Bootstrap Grid Basic

그리드는 총 12열로 구성되어있으며, 해상도에 따라 사용되는 그리드 선택자가 다르다

모바일, pc 등의 해상도에 맞게 다르게 스타일을 적용해주어 반응형 웹페이지를 구현해준다

(n: 1~12)

0~768px : col-xs-n 768px~992px : col-sm-n 992px~1200px : col-md-n 1200px~ : col-lg-n

 

그리드는 중첩하여 사용할 수 있고 내부또한 12열로 구성된다

 

자주 사용하는 클래스 선택자

container : 전체 레이아웃을 감싸주는 역할을 한다

container-fluid : 전체 레이아웃을 감싸주면서 확대하여 양쪽여백이 없도록 한다

row : 감싸준 부분이 한 열 안에 있도록 한다

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">col-md-8
      <div class="row">
        <div class="col-md-4">col-md4</div>
        <div class="col-md-8">col-md8</div>
      </div>
    </div>
    <div class="col-md-4">col-md-4
      <div class="row">
        <div class="col-md-6">col-md6</div>
        <div class="col-md-6">col-md6</div>
      </div>
    </div>
  </div>
</div>