부트스트랩

출처 : https://www.youtube.com/watch?v=5ETqQWvwXV4

 

부트스트랩이란?

가장 많이 사용하는 웹 디자인 프레임워크 중 하나.

Responsive Web (반응형 웹)을 만들기도 편하다.

화면 구성의 기본 (12 Grid)

우리가 보는 웹의 화면은 12Grid system으로 row(열)를 12개로 분할한다.

<div class="row">
	
    <div class="col-md-4">
    </div>
    
    <div class="col-md-4">
    </div>
    
    <div class="col-md-4">
    </div>
    
</div>

위와 같은 코드에서는 큰 div로 작은 div 3개 구획을 가져가는 모습인데,

col-md-4는 md(미디엄) 중간 사이즈로 12 그리드 중 4개씩 가져가라는 의미로 한개의 열에 3개의 구획이 들어가는 모습임.

md의 의미는 웹이 생각하는 md 중간사이즈일 때 12 그리드 중 4개의 그리드 만큼 차지하라는 의미로,

중간사이즈 밑으로 웹페이지가 축소되면 (모바일 기기 등에서) div의 원래 특성대로 작은 div 한 개가 한 개의 row를 차지하게 됨.

사용 가능한 사이즈

그리드 시스템은 아래와 같이 다양한 환경(사이즈)에서 혼용하여 사용 가능하다.

<div class=:col-lg-3 col-md-4 col-sm-6"></div>