Bootstrap 3.3.7 | 그리드 시스템 | 폭 조정을 하는 클래스

Tags:

그리드 시스템 최대의 포인트는 row 내에 배치하는 내용으로 설정하는 “클래스"이다.

이 클래스는 col-종류-숫자 형태로 작성한다. “종류"는 디바이스의 종류, 이는 디바이스의 가로폭에 따라 4가지 종류가 준비되어 있다. 아래와 정리할 수 있다.

종류	크기	주로 해당되는 디바이스
lg	1200px 이상	PC, 태블릿
md	992 ~ 1200px	태블릿
sm	768 ~ 992px	태블릿
xs	768px 미만	스마트 폰

PC의 큰 화면이라면 lg, 스마트 폰에서 세로로 표시된다면 xs 클래스가 적용된다고 생각하면 된다. 태블릿의 경우는 해상도에 따라 lg ~ sm 중 하나가 사용되게 될 것이다.

이후에 “숫자"는 그 내용이 row에 차지하는 비중이다. row는 폭 전체를 “12"의 블록으로 나누어 관리한다. 이 마지막 숫자는 “그 콘텐츠가 블록 비줄이 얼마인지"를 보여줍니다.

예를 들어, 2개의 콘텐츠를 가로한다면, “6"과 “6"으로하면 그냥 반씩이 된다. “4"와 “8"으로 하면 1 : 2의 비율로 나타날 수 있다. “합계가 12 이상이 되면?“라고 생각한 사람이 있을 수 있다. 이런 경우는 12 이후에 컨텐츠는 다음 행으로 줄 바꿈되어 표시된다.

예로써 “768 ~ 992px 크기에서 4 : 8로 표시"되는 경우의 태그를 아래에 올려 두었다. 이는 두 개의 콘텐츠가 4 : 8 (1 : 2)로 표시된다. 또한, 보기 쉽도록 style 속성에서 배경색을 지정하고 있다.

<!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-sm-4"
                style="border:1px solid white; background-color:#eee;">
                <p>MENU</p></div>
            <div class="col-sm-8"
                style="border:1px solid white; background-color:#eee;">
                <p>Content.</p><p>Content.</p><p>Content.</p></div>
        </div>
    </div>
 
</div>
 
</body>
</html>