부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기-5

디바이스마다 달라지는 레이아웃

.col *-* 여러 개 사용하기

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

<div class="col-xs-4-col-sm-6">

와 같이 두 개의 값을 넣으면 

가로 해상도 767px 이하에서는 col-xs-4가 적용되어 4/12 

768px이상에서는 col-sm-6이 적용되어 6/12

을 열의 가로 크기로 합니다.

 

예제

 

전체를 감싸는 요소는 좌우로 꽉 찬 요소 (container 혹은 container-fluid를 사용하고 각 행별로 .row를 사용하여 가로 줄을 계속 만들어주며 그 안에서 요소의 레이아웃이 12분의 몇을 차지하는지 채ㅣ *-*를 사용하여 컨텐츠를 감싸주고 그 안에 텍스트를 넣어줍니다.

 

tab

tab

각각의 h1, h2,h3를 사용해도 되지만 각각 멍령값을 주어야 한다.

입력값

출력화면 

PC

TB

MB

.row:nth-of-type(1){}
  row요소 중 1번째 요소에만 스타일 적용을 시킴

  설치한 플러그인을 사용하여 헥사코드 색상을 선택하여 배경색을 설정한 코드

출력화면

PC

TB

MB

*주의 html에서 div 구조를 정확히 확인하지 않으면 원하는 영역에 백그라운드 컬러가 적용되지 않는다.

 

텍스트를 중앙정렬하기 위해서는

스타일에서 text-align:center

혹은

입력창에서 class="text-center"을 입력하여 클래스에서 적용 할 수도 있다.

코드 입력

출력화면

 

 

 

해당요소가 <div class="col-xs-4-col-sm6">와 같이 두 개의 클래스명을 가지고 있으면
가로 해상도 767px 이하에서는 clo-xs-4가 적용되어 가로영역 4/12를 차지하는 레이아웃이 만들어지고
768px이상에서는 col-sm-6이 적용되어 가로 영역 6/12를 차지하는 레이아웃이 만들어진다.

해당요소가 <div class="col-xs-8 col-sm-6 col-md-4"와 같이 세 개의 클래스명을 가지고 있으면
가로 해상도 767px이하에서는 col-xs-8가 적용되어 가로영역 8/12를 차지하는 레이아웃이 만들어지고
768px 이상에서는 col-sm-6이 적용되어 가로영역 6/12를 차지하는 레이아웃이 만들어지며
992px이상에서는 col-me-4이 적용되어 가로영역 4/12를 차지하는 레이아웃이 만들어진다.