그리드 시스템이란?
그리드(grid)는 영어로 '격자무늬'라는 뜻으로, 부트스트랩에선 레이아웃을 총 12개의 열로 나누어 보다 쉽게 반응형 웹을 구현할 수 있게 해주는 핵심적인 기능중 하나이다.그리드 시스템 기본 속성들:
div태그에 다음의 속성들을 클래스값으로 주어 적용시킰수 있다.- container : 양옆에 여백을 주고 내용물을 감싸는 박스(컨테이너)의 개념
- row : 행 추가 (행은 총 12개의 열을 가질수 있음)
- col-md-n : n만큼의 공간을 가지는 열 생성
이때, 한가지 주의할점은 row속성을 통해 행을 추가한후 열을 생성할때 반드시 각 열의 비율의 합이 12가 되어야만 한다는 것이다. 만약 12를 초과할 경우엔 줄바꿈이 일어나고, 12 미만일 경우 여백이 생기게 되어 원하는 결과를 얻지 못할수도 있다.
적용 예제:
결과:
열 비율의 합이 12미만 또는 초과인 경우 예제
결과:
또한 다음과 같이 열 안에 다른 행,열을 추가하는것도 가능하다.
결과:
(추가) col-md-n 에서 md 는 medium의 약자이다.
부트스트랩에는 열을 나누는 방식이 총 4가지가 잇는데 col-md-n(medium) 은 우리가 사용하는 일반 데스크탑 화면을 기준으로 하여 열을 나누는 것이고 col-lg-n(large)은 화면이 1200px이상인경우, col-sm-n(small) 태블릿pc 그리고 col-xs-n(extra small)은 모바일 환경 에서 사용할 수 있다.
댓글
댓글 쓰기