Bootstrap 3.3.7 | 그리드 시스템 | 오프셋(offset)과 비져블(visible)


그리드 시스템은 기본적으로 “준비된 콘텐츠를 순서대로 정렬하여 표시한다"는 것이지만, 표시를 조정하는 기능도 일부 갖고있다. 그 중에서도 비교적 간단하고, 기억해 두면 편리한 2개를 소개한다.

오프셋(offset)

오프셋은 지정된 블록만 간격을 두고 배치하기 위한 것이다. 이것은 col-종류-offset-숫자형태로 작성한다. 예를 들어, md 사이즈의 1블록 사이를 비우고 3블록 역역의 콘텐츠를 배치한다면,

class="col-md-offset-1 col-md-3"

이런 식으로 클래스를 제공한다. 이것으로 그 앞에 있는 콘텐츠에서 1블록을 빈공간로 표시를 두고, 3블록 영역의 내용을 표시한다.

비져블(visible)

이것은 지정된 디바이스의 크기인 경우에만 콘텐츠를 표시하기 위한 것이다. 이것은 visible-종류-block라는 형태로 클래스 이름을 지정한다. 예를 들어,

class="visible-md-block"

이와 같이 작성하면, 이 태그는 md으로 설정되는 폭(992 ~ 1200px)의 경우에만 표시되고, 그 이외의 경우는 표시되지 않는다. 이것을 사용하여 폭에 따라 다른 내용을 표시하거나 하는 것이 가능하다.

실제 사용 예를 아래에 올려 둔다. 이것은 오프셋과 비져블를 통합한 샘플이다.

<!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-1 col-md-2 col-sm-3 col-xs-12"
                style="border:1px solid white; background-color:#eee;">
                <p>MENU</p></div>
                 
            <div class="col-lg-9 col-lg-offfset-1 col-md-7 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12"
                style="border:1px solid white; background-color:#eee;">
                <p>Content.</p><p>Content.</p><p>Content.</p></div>
                 
            <div class="visible-lg-block visible-md-block visible-sm-block">
                <div class="col-lg-1 col-md-2 col-sm-2 col-xs-12"
                    style="border:1px solid white; background-color:#dfd;">
                    <p>default option</p></div>
            </div>
             
            <div class="visible-xs-block">
                <div class="col-xs-12"
                    style="border:1px solid white; background-color:#fdd;">
                    <p>small option</p></div>
            </div>
        </div>
    </div>
</div>
 
</body>
</html>

폭이 넓은 디바이스라면, MENU 및 Content 사이에 1블록 영역의 여백을 두고 표시된다. 맨 오른쪽에는 default option이 표시되고, 폭이 좁아지면 MENU 및 Content가 수직으로 겹쳐지게 된다(여백이 사라진다). 그리고, 표시되는 default option 대신에 small option가 표시된다.

스마트 폰과 태블릿, PC의 레이아웃을 변경하기에 그리드 시스템이 매우 효과적이라는 것을 알 수 있다. 이 그리드 시스템을 사용하는 것만으로도 Bootstrap을 이용하는 가치가 있다고 할 수 있다.

표시 결과 설명

  • 폭이 넓으면, MENU 및 Content 사이에 1블록 영역의 여백을 두고 표시한다.
  • 맨 오른쪽에는 default option이 표시된다.
  • 폭이 좁아하면 MENU 및 Content가 세로로 겹쳐 표시된다.
  • default option 대신에, small option이 표시된다.