ETC

[BOOTSTRAP] 그리드 시스템 (Grid System)

zamezzz 2017. 3. 12. 19:35

Bootstrap - Grid System


Bootstrap에서는 반응형 웹 페이지를 쉽게 만들도록 도와줍니다.


그리드 시스템은 웹 페이지를 최대 12컬럼으로 나누어 배열할 수 있도록 도와줍니다.


특히 웹 페이지의 크기에 따라 (모바일, 태블릿, pc 등) 반응형으로 동작하게 해줍니다.


그렇다면 Grid System을 어떻게 사용하는지 정리하겠습니다.


컬럼 종류


그리드 시스템에는 기본적으로 4가지 종류의 컬럼이 있습니다.


그리고 보통 이는 <div>태그를 사용하여 표현하게 됩니다. 먼저 4개 컬럼부터 보겠습니다.


가장 잘 사용하는 것이니 그 크기를 알아두면 좋습니다.


Name

Class prefix

px

Extra small

.col-xs-*

768px 이하

Small

.col-sm-*

768px ~ 992px

Medium

.col-md-*

992px ~ 1200px

Large 

.col-lg-*

1200px 이상


위의 px 범위에 대해서 설명 드리겠습니다. 이해가 쉽게 그림과 함께 할게요.


브라우저 크기에 따라 가로 컬럼으로 나뉘어지는 범위를 설정해둔것인데요.


예를 들어 Extra small의 경우 768px 이하에서까지 모두 컬럼으로 나뉠 수 있습니다.


데스크탑과 스마트폰이 있다고 가정하여 아래 그림을 보겠습니다.



900px 크기를 가진 데스크탑과 700px크기를 가진 스마트폰 모두 Extra small로 컬럼을


나누었을 경우 원하는대로 컬럼이 나뉘어져 실행이됩니다.


두번째 Small의 경우 768px이하인 브라우저 크기에서는 컬럼으로 나뉘어지지 않고,


모두 세로로 표시가 됩니다. 




이런식으로 Medium이 992px이하 기기에서 표현되지 않음은 당연하고요.


이러한 범위에 따라 자동으로 반응형으로 동작합니다.


가로로 모두 표현되지 않을 시 세로로 표현되어 사용자에게 쉽게 보이도록 하는 기능이


바로 반응형이라고 할 수 있습니다. 


각 범위별 컬럼 사용에 대해서는 이해가 되셨나요 ?



 사용 방법


사용법은 다음과 같습니다. 매우간단합니다.


<div class="container">

 <div class="row">

  <div class="col-xs-7">.....</div>

  <div class="col-xs-5">.....</div>

 </div>

</div>


위와 같은 방법으로 구분하여 사용하면 되는 것이죠.


해당 <div>에 적절한 class를 선택하여 페이지를 제작하면, 원하는 모습을 만들 수 있어요


직접 해보시는 것도 좋고, 여러 사이트의 html 코드를 개발자 도구로 직접 보시는 것도


큰 도움이 될 것이라 생각합니다.


간단하지만 중요한 개념이기에, 꼭 알면 좋겠습니다. 


그럼 포스팅을 마치겠습니다. 감사합니다.



반응형

'ETC' 카테고리의 다른 글

[HTML] 리스트 태그 (ul, ol, dl)  (1) 2017.10.06
[Cron] 크론(cron) 표현식 정리  (2) 2017.07.26
[CDATA] CDATA란  (0) 2017.07.01
[비트코인과 랜섬웨어] 그 상관관계 ?  (0) 2017.05.07
[CORS] Cross Origin Resource Sharing  (3) 2017.03.03