[CSS Framework] Bootstrap

📦 CSS/CSS Framework

[CSS Framework] Bootstrap | Grid System

하나둘세현 2022. 12. 12. 17:10

728x90

Grid System

그리드 시스템을 통해 부트스트랩을 사용할 때 웹페이지에서 콘텐츠를 배열할 수 있다. 공간 분배를 화면 크기에 따라 달라지게 하는 반응형 레이아웃을 만들 수 있게 도와준다.

그리드 시스템은

컨테이너 안에서만 작동한다. 그리드를 사용하려면 항상 컨테이너 클래스가 있어야 한다.
행(row)클래스를 사용해서 행을 만들어야 한다. 부스트트랩의 모든 행에는 분배될 공간이 12유닛씩 있다.

옆의 사진처럼 동일한 세 개의 열이 있는 경우 각각의 열에 4유닛씩 동일하게 분배된다.

행에다 열(Coloumn)을 만들어야 한다. 주어진 행에서 분배하려는 모든 부분이 행이 된다. 모든 열의 클래스는 col 클래스로 시작한다.

공간을 분배하는 방법: 클래스를 사용해 col- 뒤에 숫자를 사용하면 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    .<title>Bootstrap Basics</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><link rel="stylesheet" href="basics.css">
</head>
<body>
    <div class="container">
        <h1 class="display-1 text-center text-primary"> The Grid System</h1>
        <div class="row">
            <div class="col-6 bg-success">I AM 6 UNITS</div>
        </div>
    </div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>

페이지를 보면 행 컨테이너의 50%를 차지하도록 반영되었다. 하나를 더 추가하면

    <div class="container">
        <h1 class="display-1 text-center text-primary"> The Grid System</h1>
        <div class="row">
            <div class="col-6 bg-success">I AM 6 UNITS</div>
            <div class="col-6 bg-info">I AM 6 UNITS</div>
        </div>
    </div>

bg-info도 6유닛이다. bg-success와 bg-info의 6유닛을 합치면 총 12유닛이다.

    <div class="container">
        <h1 class="display-1 text-center text-primary"> The Grid System</h1>
        <div class="row">
            <div class="col-2 bg-success">I AM 6 UNITS</div>
            <div class="col-8 bg-info">I AM 6 UNITS</div>
            <div class="col-2 bg-success">I AM 6 UNITS</div>
            </div>
    </div>

왼쪽 오른 쪽에 2유닛씩 그리고 가운데 8유닛 총 12유닛! 열들 안에는 그냥 배경색, 텍스트 말고 원하는 콘텐츠를 넣을 수 있다. 레이아웃을 지정할 수 있는 멋진 폼을 넣고 시으면 폼 요소를 이미지를 넣을 수 있다. 카드 같은 컴포넌트도 가능하다.

크기가 다 동일한 열을 만들때 더 쉬운 방법이 있다. 열클래스인 col을 사용하면 된다. 각각 열에 필요한 공간이 얼마인지 자동으로 계산하면 된다.

        <div class="row">
            <div class="col bg-danger">I AM AUTO SIZED</div>
            <div class="col bg-warning">I AM AUTO SIZED</div>
        </div>

공간이 균등하게 나뉘어졌다.

        <div class="row">
            <div class="col bg-danger">I AM AUTO SIZED</div>
            <div class="col bg-warning">I AM AUTO SIZED</div>
            <div class="col-9 bg-info">I AM 9 UNITS</div>
            <div class="col bg-warning">I AM AUTO SIZED</div>
        </div>

특정 너비나 크기 같은 걸 col-9처럼 지정할 수 있다. 자동으로 크기를 지정하지 말라는 뜻이다. 이 열은 9유닛이니까 나머지 열들은 남은 부분을 공유하라는 것이다. 안에 있는 텍스트들은 반응형이 아니라서 왼쪽으로 쌓인것이다. 하지만 열들은 반응형이다. 자동 크기 조절과 적절히 섞어서 쓸 수 있다.

        <div class="container">
            <div class="row">
                <div class="col bg-danger">I AM AUTO SIZED</div>
                <div class="col bg-warning">I AM AUTO SIZED</div>
                <div class="col-8 bg-info">I AM 8 UNITS</div>
            </div>
        </div>

행 근처에 컨테이너를 추가 했더니 양 옆에 작은 여백이 생겼다.

컨테이너가 있어야한다. 그 컨테이너는 전체 폭 컨테이너인 유동 컨테이너도 가능하다. (위의 코드 처럼말이다.)

열을 만들어야 하는데 열은 열 클래스를 사용한다. 보통은 <div>나 섹션같은거다. 열은 그 자체로 의미를 지니진 않지만 콘텐츠를 더 보기 좋게 페이지 위에 펼치고 재구성하거나 레이아웃을 지정하는 데 도움을 준다. 또한 각 열은 12유닛씩 있고 이 공간은 원하는 대로 분배할 수 있따. col- 뒤에 숫자를 넣어 열 크기를 지정하거나 아니면 그냥 col만 넣어 자동으로 열 크기를 조정할 수 있다. 분배된 열이 있으면 그 열을 빼고 남은 여분의 공간으로 자동으로 나눈다.

https://getbootstrap.com/docs/5.2/layout/grid/

Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

getbootstrap.com

Grid options

Small은 576px에서 768px까지이고 576px이하는 모두 Extra small(=xs)이다.

미리 정의된 다양한 크기들이라 그리드 시스템을 사용해 언제든지 이 크기를 사용할 수 있다. Extra large(=xl) 크기의 화면에서는 50:50으로 나눌 수 있다. extra small, small, medium은 12유닛과 또 하나의 12유닛일 수 있다. 즉, 공간을 나눠 갖는게 아니라 두 줄의 꽉 찬 행인거다. 이렇게 사용되는 클래스의 종류는 많다. col-, col-sm- 등등

        <h2 class="display-4">Responsive Grid</h2>
        <div class="row"> <!--이 행 안에 50:50인 두 요소를 넣을 것이다. -->
            <div class="col-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                Aperiam molestiae sit, tempore unde porro voluptates est fugit.
                 Reiciendis exercitationem officiis aliquam minus corrupti 
                 quaerat omnis commodi dolore ipsum consequatur! Rem! Lorem 
                 ipsum dolor sit amet consectetur adipisicing elit. Doloribus 
                 doloremque asperiores illo! Quam debitis laudantium 
                 repudiandae tempora sit! Est quaerat voluptatum beatae 
                 dolorum quod aliquid eius ad ratione iusto ullam!</div>
                 <div class="col-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                    Aperiam molestiae sit, tempore unde porro voluptates est fugit.
                     Reiciendis exercitationem officiis aliquam minus corrupti 
                     quaerat omnis commodi dolore ipsum consequatur! Rem! Lorem 
                     ipsum dolor sit amet consectetur adipisicing elit. Doloribus 
                     doloremque asperiores illo! Quam debitis laudantium 
                     repudiandae tempora sit! Est quaerat voluptatum beatae 
                     dolorum quod aliquid eius ad ratione iusto ullam!</div>
        
                </div>

12유닛의 반영으로 50:50 즉 6:6이 되었다.

        <div class="row"> <!--이 행 안에 50:50인 두 요소를 넣을 것이다. -->
            <div class="col-md-6 bg-info">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                Aperiam molestiae sit, tempore unde porro voluptates est fugit.
                 Reiciendis exercitationem officiis aliquam minus corrupti 
                 quaerat omnis commodi dolore ipsum consequatur! Rem! Lorem 
                 ipsum dolor sit amet consectetur adipisicing elit. Doloribus 
                 doloremque asperiores illo! Quam debitis laudantium 
                 repudiandae tempora sit! Est quaerat voluptatum beatae 
                 dolorum quod aliquid eius ad ratione iusto ullam!
            </div>
            <div class="col-md-6 bg-success">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                    Aperiam molestiae sit, tempore unde porro voluptates est fugit.
                     Reiciendis exercitationem officiis aliquam minus corrupti 
                     quaerat omnis commodi dolore ipsum consequatur! Rem! Lorem 
                     ipsum dolor sit amet consectetur adipisicing elit. Doloribus 
                     doloremque asperiores illo! Quam debitis laudantium 
                     repudiandae tempora sit! Est quaerat voluptatum beatae 
                     dolorum quod aliquid eius ad ratione iusto ullam!
            </div>
        </div>

만일 웹 상에서 적절한 중단점을 이용해 s, m이하의 중단점을 활용하여 행을 가로 쭉 퍼져서 공간을 다 차지해서 공간을 나눠 가지지 않게 만들려는 상황을 하려면 col-md-6를 사용하면 된다. 영상 중간에 살짝 멈춤부분이 중단점이다. m중단점에 도달하면 6유닛의 공간을 차지하게 된다.

https://getbootstrap.com/docs/5.2/layout/grid/#grid-options

Grid system

getbootstrap.com

Responsive images

img-fluid

가변 이미지로 직설적인 이름이다. 포함하고 있는 요소의 크기에 따라 이미지의 크기를 조정한다. 가변이미지인 img-fluid를 열 안에 넣으면 그 열의 크기가 변할 때 이미지의 크기도 변하게 된다.

    <div class="row"> <!--이미지를 각 열,행 안에 있게한다.-->
        <div class="col"> <!--col을 사용하여 동일한 크기의 열이 되게하거나 최소한 화면 크기에 따라 전혀 바귀지 않도록 한다.-->
            <img class="img-fluid" src="https://images.unsplash.com/photo-1546146830-2cca9512c68e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80" alt="">
        </div>
        <div class="col">
            <img class="img-fluid" src="https://images.unsplash.com/photo-1536104968055-4d61aa56f46a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80" alt="">
        </div>
        <div class="col">
            <img class="img-fluid" src="https://images.unsplash.com/photo-1604964432806-254d07c11f32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80" alt="">
        </div>
    </div>

여기서 높이가 다른 이미지를 사용할 경우 다 똑같은 높이가 되어 행 안에 들어가지 않는다. 물론 이미지 디스플레이 형식을 바꾸거나 일부분을 자르고 늘리면 다 똑같은 높이로 만들 수 있다. 여기서 중요한건 이미지들이 수평으로 차지하는 공간인 너비이다.

    <div class="row"> <!--이미지를 각 열,행 안에 있게한다.-->
        <div class="col-xl-4"> <!--col을 사용하여 동일한 크기의 열이 되게하거나 최소한 화면 크기에 따라 전혀 바귀지 않도록 한다.-->
            <img class="img-fluid" src="https://images.unsplash.com/photo-1546146830-2cca9512c68e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80" alt="">
        </div>
        <div class="col-xl-4">
            <img class="img-fluid" src="https://images.unsplash.com/photo-1536104968055-4d61aa56f46a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80" alt="">
        </div>
        <div class="col-xl-4">
            <img class="img-fluid" src="https://images.unsplash.com/photo-1604964432806-254d07c11f32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80" alt="">
        </div>
    </div>

반응형 이미지가 되었다.

    <div class="row"> <!--이미지를 각 열,행 안에 있게한다.-->
        <div class="col-xl-4 col-md-6"> <!--col을 사용하여 동일한 크기의 열이 되게하거나 최소한 화면 크기에 따라 전혀 바귀지 않도록 한다.-->
            <img class="img-fluid" src="https://images.unsplash.com/photo-1546146830-2cca9512c68e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80" alt="">
        </div>
        <div class="col-xl-4 col-md-6">
            <img class="img-fluid" src="https://images.unsplash.com/photo-1536104968055-4d61aa56f46a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80" alt="">
        </div>
        <div class="col-xl-4 col-md-6">
            <img class="img-fluid" src="https://images.unsplash.com/photo-1604964432806-254d07c11f32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80" alt="">
        </div>
    </div>

50:50으로 되었다. 창을 좁게 했을때 xs와 s에서 가로로 꽉찬다. m에서는 50%가 되어 각각 6유닛이고 계속 늘리면 4유닛이 된다. 모두 화면의 너비에 따라 바뀐다.

중단점에 도달하 ㄹ때나 중단점 기준마다 분배할 수 있다.

https://getbootstrap.com/docs/5.2/content/images/#responsive-images

Images

Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.

getbootstrap.com

Gutter 공백

공백을 없애고 싶으면 no-gutters클래스를 추가하면 된다.

728x90

'📦 CSS > CSS Framework' 카테고리의 다른 글

[CSS Framework] bootstrap \| Forms \| form-group \| form-class (0)	2022.12.26
[CSS Framework] Grid Utilities (0)	2022.12.23
[CSS Framework] Bootstrap \| Badges \| Button Group \| Alert (0)	2022.12.12
[CSS Framework] Bootstrap \| Typography \| Utilities (0)	2022.12.10
[CSS Framework] Bootstrap \| Button (0)	2022.12.10

현재글[CSS Framework] Bootstrap | Grid System

250x250

console.log("CAPABLE");

𝑬𝒗𝒆𝒏 𝒊𝒇 𝒕𝒉𝒆 𝒑𝒂𝒄𝒆 𝒊𝒔 𝒔𝒍𝒐𝒘, 𝒏𝒆𝒗𝒆𝒓 𝒈𝒊𝒗𝒆 𝒖𝒑. 🐢

쉽게배우는자바, codedamn, 블로그옮기는중, 부스트코스, 대코캠, 함수, 시간복잡도, 프로그래머스입문, flexcontainer, 코딩테스트입문, JS, 변수, bootstrap, 모던자바스크립트, 자바스크립트, HTML, PY4E, 모던 자바스크립트, CSS, 프로그래머스,

Today :
Yesterday :

console.log("CAPABLE");