it leader
article thumbnail




bootstrap 4


부트스트랩에서 column  영역을 미리 정의를 해 놓았습니다.


col-숫자 : 세로로 배치 되지 않고 브라우저 가로 길이의 비율대로 영역이 줄어든다.


col-sm-숫자 : 576px 이하 일 때 세로 배치

col-md-숫자 :  768px 이하 일 때 세로 배치

col-lg- 숫자 : 992 이하 일 때 세로 배치

col-xl- 숫자 : 1200 이하 일 때 세로 배치



12단계의 영역을 미리 class로 지정해 놓았고,


정의된 클래스 옆에 숫자로 영역을 써주면 그 영역의 비율을 유지하고

근접한 컬럼과의 합산으로 자도응로 세로로 배치를 합니다.


무슨 말인지 예를들어 설명해 보도록하겠습니다.


예를들어 다음과 같이 컬럼을 구성하였다고 봅니다.




<div class="container">
<div class="row">
<div class="col-md-6" style="background-color:red">aaa</div>
<div class="col-md-4" style="background-color:yellow">bbb</div>
<div class="col-md-3" style="background-color:greenyellow">ccc</div>
<div class="col-md-2" style=""></div>
</div>
</div>



컬럼이 3개가 존재하는데 


비율상 6,4,3 이렇게 됩니다.


그렇다면 배치되는 순서는 


아래 그림과 같습니다. 이유는 3개의 영역의 합이 12를 넘어가게 되므로 3번째 ccc 컬럼은 세로로 배치되게 되는 것입니다.


이해가 되시는지요?




다만 브라우저를 576px 이하로 줄였을 대에는 아래 그림과 같이


동일한 가로 길이를 갖게 됩니다.



반응형으로 그리드가 변경되는 것을 실습해보기 위해 아래와 같이 코드를 아래와 같이 작성해 보았습니다.





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <title>Hello static</title>
</head>
<body>
    <div class="container" style="height:30px;">
    </div>
    <div class="container" style="border:1px solid black;">
        <div class="row">
            <div class="col-6" style="background-color:yellow">aaa</div>
            <div class="col-6" style="background-color:greenyellow">bbb</div>
        </div>
    </div>
    <div class="container" style="border:1px solid black;">
            <div class="row">
                <div class="col-sm-6" style="background-color:yellow">aaa</div>
                <div class="col-sm-6" style="background-color:greenyellow">bbb</div>
            </div>
    </div>
    <div class="container" style="border:1px solid black;">
            <div class="row">
                <div class="col-md-6" style="background-color:yellow">aaa</div>
                <div class="col-md-6" style="background-color:greenyellow">bbb</div>
            </div>
    </div>
    <div class="container" style="border:1px solid black;">
            <div class="row">
                <div class="col-lg-6" style="background-color:yellow">aaa</div>
                <div class="col-lg-6" style="background-color:greenyellow">bbb</div>
            </div>
    </div>
    <div class="container" style="border:1px solid black;">
            <div class="row">
                <div class="col-xl-6" style="background-color:yellow">aaa</div>
                <div class="col-xl-6" style="background-color:greenyellow">bbb</div>
            </div>
    </div>
</body>
</html>
cs





브라우저 가로 길이 를 조절해 보면 xl -> lg -> md -> sm 순으로 


가로로 배치 했던 영역이 세로로 변경되는 것을 확인 할 수 있습니다.








부트스트랩을 이용한 반응형 코딩에 기본에 대해서 알아보았습니다.


반응형 코딩에 대해 조금은 이해가 되셨으리라 생각됩니다.









'코딩공부 > HTML, CSS' 카테고리의 다른 글

CSS 뉴모피즘 neumophism css로 구현하기  (4) 2020.07.31
CSS box-shadow  (0) 2020.07.29
profile

it leader

@dev__pixui

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!