부트스트랩 반응형 설정

이전 다음 

그리드 시스템

부트스트랩 그리드 시스템은 부모셀의 넓이를 12칼럼으로 가상 분할하여, 웹브라우저의 넓이에 따라 각 셀이 몇 칼럼이 합해진 넓이만큼 차지할지를 정하는 구조입니다.

모바일폰 태블릿 데스크탑 데스크탑
그리드 적용 항상 분기점보다 크면 적용
기준이 되는 콘테이너 너비 < 768px >= 768px >= 992px >= 1200px
클래스 접두사 .col-xs- .col-sm- .col-md- .col-lg-

균등 분할

아래 예제는 각 자식셀이 4칸의 넓이를 차지하도록 설정한 경우입니다. 즉, 3등분을 한거죠. sm 클래스(>= 768px) 을 적용했으므로 웹브라우저의 넓이가 768px 보다 크거나 같은경우는 항상 4칸의 넓이를 차지하게 됩니다.
768px 보다 줄어들면 어떻게 되는지 확인해보세요. 각 셀이 전체넓이(12칸)를 차지하게 되죠. xs 클래스(< 768px)에 대한 조건을 설정하지 않았으므로 이 경우는 항상 전체 넓이를 차지하게 됩니다.

.col-sm-4
.col-sm-4
.col-sm-4

브라우저 넓이별 가변 설정

하나의 셀에 2개 이상의 그리드 설정을 하여 브라우저 넓이변화에 따라 차지하는 넓이를 설정한 예제입니다. .col-xs-9 .col-md-7xs(항상)인 상황에서는 9칼럼을 차지하게 하고, md(>= 992px)인 상황에서는 7칼럼을 차지하게 됩니다.
sm(>= 768px) 상황에 대한 설정이 없기 때문에 이 경우 xs설정이 적용됩니다.

.col-xs-9 .col-md-6
.col-xs-3 .col-md-6
.col-xs-6 .col-md-10
.col-xs-6 .col-md-2

해제(강제 줄바꿈)

한 줄에 들어갈 수 있는 칼럼수는 12개입니다. 아래와 같은 설정의 셀에서는 xs(< 758px)인 상황에서는 모든 셀이 각 6칼럼을 차지하게 되어 있으므로 세번째 셀부터 줄바꿈이 이루어집니다. 웹브라우저 넓이를 768이하로 줄여보면 줄바꿈이 되는걸 볼 수 있습니다. 그런데 세번째 셀이 줄바꿈되어 왼쪽 1칼럼부터 시작되어야 할것 같은데 첫번째 셀 우측에 걸쳐버리죠. 이렇듯 줄바꿈이 될때는 왼쪽 첫번째 칼럼으로 줄바꿈 되는게 아니라 왼쪽으로 떨어지다가 걸리는곳이 있으면 그곳에 위치하게 됩니다.
모든 셀의 높이가 똑같은 경우는 상관이 없지만 그렇지 않은 경우는 위처럼 줄바꿈이 이상하게 되는거죠. 이럴때 강제로 첫번째 칼럼으로 줄바꿈 되도록 하는것이 해제 설정입니다. 해제 설정을 하면 한 줄 12칼럼이 차지 않았더라도 항상 첫번째 칼럼으로 줄바꿈 됩니다.

[자동 줄바꿈]
col-xs-6 col-sm-3
Cell 1
Resize the browser window to see the effect. Also try to remove the div clearfix line and see what happens.
col-xs-6 col-sm-3
Cell 2
col-xs-6 col-sm-3
Cell 3
col-xs-6 col-sm-3
Cell 4
[강제 줄바꿈]
col-xs-6 col-sm-3
Cell 1
Resize the browser window to see the effect. Also try to remove the div clearfix line and see what happens.
col-xs-6 col-sm-3
Cell 2
col-xs-6 col-sm-3
해제-xs
Cell 3
col-xs-6 col-sm-3
Cell 4

옵셋

옵셋을 설정하면 설정한 칼럼수만큼 좌측에 여백을 만들 수 있습니다. 아래 예제는 sm(>= 768px)환경에서는 두 칼럼만큼 띄우게 하고, md(>= 992px)인 상황에서는 다시 옵셋값을 0으로 하여 sm에 설정된 값이 반영되지 않도록 설정한 예제입니다.
옵셋값도 총 칼럼수(12)에 포함되기 때문에 12칼럼이 초과하는 경우는 자동으로 줄바꿈 됩니다.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0

순서

아래 설정 전 코드와 설정 후 코드는 col-sm-*, col-md-*클래스가 추가된것 외에는 동일한 코드입니다. md(>= 992px)인 상황에서는 두 코드의 차이가 없어보이지만, 브라우저 넓이를 줄여 sm(>= 768px)인 상황이 되면 두 셀의 위치가 완전히 뒤바뀌게 됩니다. 첫번째 셀은 8칼럼을 밀고(push), 두번째 셀은 4칼럼을 당겨서(pull) 두 셀의 위치가 바뀐것처럼 보이는거죠. 이처럼 셀의 위치를 설정할 수 있는 옵션이 순서 설정 입니다. 셀 속성 설정중 Float 설정과 유사한 기능으로 보시면 됩니다.
순서값은 총 칼럼수(12)에 포함되지 않기 때문에 자동 줄바꿈에 영향을 주지 않습니다.

[설정 전]
.col-sm-4
.col-sm-8
[설정 후]
.col-sm-4 .col-sm-push-8 .col-md-push-0
.col-sm-8 .col-sm-pull-4 .col-md-pull-0

숨김

특정 환경에서 셀을 숨길 수 있습니다. 첫번째 예제는 xssm 상황에서 두번째 셀은 안보이게 됩니다. 두번째 예제는 두번째 셀이 안보일때 나머지 셀의 넓이를 늘려서 12칼럼이 꽉 차게 설정한 예제입니다.
숨김설정은 상위 넓이 환경에 영향을 주지 않습니다. 숨김 설정된 해당 범위에서만 작동합니다.

.col-sm-4
.col-sm-4
.col-sm-6 .col-md-4
.col-sm-6 .col-md-4

자주하는 질문

반응형 페이지를 만들기 위해서는 어느 셀에 반응형 설정을 해야 하나요?
일반적으로 반응형은 웹브라우저의 넓이 변화에 따라 셀의 넓이 및 속성을 변경하는 것이므로, 넓이가 "자동할당"이 아닌 셀은 모두 설정해야 합니다.
하지만 오즈홈빌더에서는 반응형설정이 된 셀이 하나라도 있는 경우는, 고정 넓이로 지정된 셀은 웹브라우저 넓이가 지정한 넓이보다 큰 경우만 고정 넓이가 적용되고, 웹브라우저 넓이가 지정한 넓이보다 작아지는 경우 셀의 넓이도 자동으로 줄어듭니다.
그러므로 반응형 설정은 좌우로 구성했던 셀을 모바일 환경에서는 위아래로 보여줘야하는 셀에 한해서만 필수적으로 설정하시면 됩니다. 그 외의 셀에 대해서는 필요에 따라 상황별 숨김 설정이나 여백설정을 하시면 됩니다.
반응형셀의 내부여백 및 외부여백 설정은 어떻게 해야 하나요?
반응형셀은 부모셀을 가상으로 12칸으로 나눈 넓이에 비례하게 넓이가 지정됩니다. 자식셀의 칼럼수 합이 12가 되더라도 외부여백이 설정되면 넓이가 12칼럼을 벗어나기 때문에 줄바꿈이 됩니다. 그래서 반응형셀 자체에는 외부여백을 지정하면 안됩니다.
1. 내부여백을 설정하여 여백을 구성하거나,
2. 테두리나 배경색이 설정된 셀에 대해 셀간 여백을 주고 싶을때는 반응형셀내에 자식셀을 추가하여 해당 자식셀에 테두리,배경등의 속성을 지정하면 됩니다.
이전 다음 
go top