Bootstrap 3.3.7 | 그리드 시스템 | 여러 화면 크기에 대응하기

그리드 시스템의 기본 클래스 설정 방법은 알게 되었. 여기서 이런 의문이 생길지도 모른다.

“4개의 디바이스의 종류가 있는데, 내 사이트에는 어떤 것을 준비하면 되는거야?“라고 생각할 수도 있다.

이런 사람은 “이 중에 사용하고 싶은 것을 골라 쓸 것이다"라고 착각을 하고 있는 것이다. 그렇지는 않다.

디바이스의 종류별 클래스는 모두 준비되어 있는 것이다!

이는 하나 밖에 해당된다는 의미가 아니다. 그 내용이 디바이드의 폭에 따라 자동으로 배치되도록 조정되는 클래스이기 때문이다. 어떤 가로에도 최적이 되도록, 모든 클래스를 준비해 두는 것이다.

예를 들어, 방금 작성한 “4 : 8에서 콘텐츠를 표시"하는 샘플을 모든 디바이스으로 대응 되도록 수정한 것을 아래에 올려 둔었다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
    <h1>그리드 시스템</h1>
     
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12"
                style="border:1px solid white; background-color:#eee;">
                <p>MENU</p></div>
            <div class="col-lg-10 col-md-9 col-sm-8 col-xs-12"
                style="border:1px solid white; background-color:#eee;">
                <p>Content.</p><p>Content.</p><p>Content.</p></div>
        </div>
    </div>
</div>
 
</body>
</html>

여기에 표시할 내용의 비율을 다음과 같이 설정되어 있다.

종류 크기 비율
lg 1200px 이상 2 : 10으로 보기
md 992 ~ 1200px 3 : 9로 표시
sm 768 ~ 992px 4 : 8로 표시
xs 768px 미만 12 : 12으로 표시 (각각 한 줄씩 표시)

어떠한가? 이렇게 설정하면 왼쪽의 컨텐츠(MENU가 표시되는 부분)는 어느 정도의 폭을 정리하고, 오른쪽 내용 중 일부를 필요에 따라 확대될 수 있도록 하고 있다. 또한 스마트 폰에는 MENU 아래에 내용이 세로로 표시되도록 한다.

이처럼 모든 크기의 클래스를 제공함으로써, 생각한대로 레이아웃을 실현할 수 있다. “귀찮다"라고 생각한 사람도, 적어도 “768px 미만과 그 이상의 어느것"이라도 준비하도록 하자.