부트스트랩 grid 이해

문제  

---

화면에 따라서 (아이폰 태블릿 컴퓨터) 원하는 모양으로 보여주고싶다.

 

 

 

원리

---

0. html 의 div는 한 width를 차지하기 때문엘 div가 차지하면 자동으로 아래로 내려가게 되어있다. 

   그래서 가로배치를 하는 경우 여러가지 css 속성을 이용하여 해결해야한다. 그러나 이러한 가로배치가 중구난방으로 

   디자이너와 위치가 정확히 협의가 되지 않는다면 문제가 발생할 수 있다. 그래서 정확한 가로배치를 위해서 만들어진 것이 grid이다

   데스크탑에서는 section별로 main, content , footer 4 가지 section 으로 나뉠 수 있고 이 안에서도 

  content 에 사진, 클릭, 내용을 grid에 따라 row별로 배치할 수 있다. 예를 들어  그리드 시스템은 사진은 6grid 버튼은 1grid로 하면 화면 분할이 명확해 질 수있는 장점이 있다.

 

1. Grid 칼럼 xs sm md lg의 이해

.col-xs-*	항상 가로로 배치
.col-sm-*	768px 이하에서 세로로 표시 시작
.col-md-*	992px 이하에서 세로로 표시 시작
.col-lg-*	1200px 이하에서 세로로 표시 시작

 

보통 데스크탑 1200px

 

테블릿 768

 

핸드폰 600 이하

 

2. 계속해서 가로 배치를 원한다면 xs를 이용해서 row의 화면 배치 실행 

 

3. 테블릿에서는 컬럼을 4개로 진행하고 핸드폰에서는 두 개로 진행하고 싶을 때

        가로 배치를 기준으로 992이상에서는 4개로 배치 

      .col-md-3 .col-sm-6

      .col-md-3 .col-sm-6

      .col-md-3 .col-sm-6

      .col-md-3 .col-sm-6

 

 

출처: https://unikys.tistory.com/371 [All-round programmer] 

 

 

 

 

 

순서

---

 

예시

---

1. 코드

<section class="section">
			<div class='container-fluid'>
				<div class ='row'>
						<div class=col-xs-4>
							col-xs-6
						</div>
						<div class=col-xs-4>
							col-xs-6
						</div>
						
				 </div>
				</div>
						
			</div>
	</section>

2. 결과

 

 

 

깨달은 점

---