[BOOTSTRAP] nav 왼쪽, 가운데, 끝 정렬 하기(justify-content-* 사용하기: start, end, center, between, around)

[Bootstrap] 2019. 10. 20. 20:46

# Justify-content

- Justify-content : 내용에 대한 항목의 정렬 방법을 명시

    - start : 왼쪽 기준

    - end : 오른쪽 끝 기준

    - center : 가운데 기준
    - between / around

<div class="container">
        <!-- nav 적용  -->
        <p><h3>justify-content-start 적용</h3></p>
        <ul id="nav1" class="nav justify-content-start bg-light">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>

        <!-- 구분선 -->
        <hr class="my-5">
        <p><h3>justify-content-center 적용</h3></p>
        <ul id="nav2" class="nav justify-content-center bg-light">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>

        <!-- 구분선 -->
        <hr class="my-5">
        <p><h3>justify-content-end 적용</h3></p>
        <ul id="nav3" class="nav justify-content-end bg-light">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>

        <!-- 구분선 -->
        <hr class="my-5">
        <p><h3>justify-content-between 적용</h3></p>
        <ul id="nav4" class="nav justify-content-between bg-light">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>

        <!-- 구분선 -->
        <hr class="my-5">
        <p><h3>justify-content-around 적용</h3></p>
        <ul id="nav5" class="nav justify-content-around bg-light">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>

# 결과화면

# 전체코드

...더보기

<!doctype html>

<html lang="en">

 

<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 

    <title>Hello, world!</title>

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <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.7/umd/popper.min.js"

        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

        crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

        crossorigin="anonymous"></script>

</head>

 

<body>

    <div class="container">

        <!-- nav 적용  -->

        <p><h3>justify-content-start 적용</h3></p>

        <ul id="nav1" class="nav justify-content-start bg-light">

            <li class="nav-item">

                <a class="nav-link active" href="#">Home</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link1</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link2</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link3</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link4</a>

            </li>

            <li class="nav-item">

                <a class="nav-link disabled" href="#">Disabled</a>

            </li>

        </ul>

 

        <!-- 구분선 -->

        <hr class="my-5">

        <p><h3>justify-content-center 적용</h3></p>

        <ul id="nav2" class="nav justify-content-center bg-light">

            <li class="nav-item">

                <a class="nav-link active" href="#">Home</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link1</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link2</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link3</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link4</a>

            </li>

            <li class="nav-item">

                <a class="nav-link disabled" href="#">Disabled</a>

            </li>

        </ul>

 

        <!-- 구분선 -->

        <hr class="my-5">

        <p><h3>justify-content-end 적용</h3></p>

        <ul id="nav3" class="nav justify-content-end bg-light">

            <li class="nav-item">

                <a class="nav-link active" href="#">Home</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link1</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link2</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link3</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link4</a>

            </li>

            <li class="nav-item">

                <a class="nav-link disabled" href="#">Disabled</a>

            </li>

        </ul>

 

        <!-- 구분선 -->

        <hr class="my-5">

        <p><h3>justify-content-between 적용</h3></p>

        <ul id="nav4" class="nav justify-content-between bg-light">

            <li class="nav-item">

                <a class="nav-link active" href="#">Home</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link1</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link2</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link3</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link4</a>

            </li>

            <li class="nav-item">

                <a class="nav-link disabled" href="#">Disabled</a>

            </li>

        </ul>

 

        <!-- 구분선 -->

        <hr class="my-5">

        <p><h3>justify-content-around 적용</h3></p>

        <ul id="nav5" class="nav justify-content-around bg-light">

            <li class="nav-item">

                <a class="nav-link active" href="#">Home</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link1</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link2</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link3</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link4</a>

            </li>

            <li class="nav-item">

                <a class="nav-link disabled" href="#">Disabled</a>

            </li>

        </ul>

    </div>

    <script>

        $(function () {

 

            // 좌측 정렬  

            $("#nav1 .nav-item > .active").css("color", "red");

            $('#nav1 .nav-link').click(function () {

                // .nav-link 클릭시 이전의 active 값 해제 후, 

                $("#nav1 .nav-item > .active").css("color", "#007bff");

                $('#nav1 .nav-link').removeClass('active');

 

                // 클릭한 위치 active 적용 

                $(this).addClass('active');

                $("#nav1 > .nav-item > .active").css("color", "red");

            });

 

            // 중앙 정렬된 nav

            $("#nav2 .nav-item > .active").css("color", "red");

            $('#nav2 .nav-link').click(function () {

                // .nav-link 클릭시 이전의 active 값 해제 후, 

                $("#nav2 .nav-item > .active").css("color", "#007bff");

                $('#nav2 .nav-link').removeClass('active');

 

                // 클릭한 위치 active 적용 

                $(this).addClass('active');

                $("#nav2 > .nav-item > .active").css("color", "red");

            });

        });

    </script>

</body>

 

</html>

저작자표시 비영리 변경금지

'[Bootstrap]' 카테고리의 다른 글

[bootstrapTable] 부트스트랩 테이블 JSON 값으로 만들기  (0) 2019.12.13
[Bootstrap Table] bootstrapTable Html로 생성하기  (0) 2019.12.13
[Bootstrap] nav 사용법 알아보기  (0) 2019.10.20
[Bootstrap] 점보트론(jumbotron) 사용하기 (jumbotron, jumbotron-fluid, container, container-fluid)  (0) 2019.10.20
[Bootstrap] 부트스트랩(Bootstrap) Display  (0) 2019.10.20
블로그 이미지

미나미나미

,

[Bootstrap] 점보트론(jumbotron) 사용하기 (jumbotron, jumbotron-fluid, container, container-fluid)

[Bootstrap] 2019. 10. 20. 02:02

# 점보트론(jumbotron) 사용하기

- <div class="jumbotron">

   : 테두리가 라운드가 있는 점보트론 

- <div class="jumbotron jumbotron-fluid">

    : 테두리가 직각으로 적용되어있고, 전체화면을 사용할때 적용 

 

# 테스트코드

<!-- bootstrap의 container을 사용 -->
    <div class="mt-3"></div>

    <div class="jumbotron mx-4">
        <div class="container">
            <h1>jumbotron Tutorial</h1>
            <p>이 곳에 jumbotron의 경우 round가 적용되어있습니다.</p>
            <p>containr를 사용</p>
        </div>
    </div>

    <div class="jumbotron mx-4">
        <div class="container-fluid">
            <h1>jumbotron Tutorial</h1>
            <p>이 곳에 jumbotron의 경우 round가 적용되어있습니다.</p>
            <p>containr-fluid를 사용</p>
        </div>
    </div>

    <!-- 수평선 긋기 -->
    <hr class="my-2">
    <div class="jumbotron jumbotron-fluid mx-4">
        <div class="container">
            <h1>jumbotron jumbotron-fluid Tutorial</h1>
            <p>이 곳에 jumbotron의 경우 round가 적용되어있지 않습니다.</p>
            <p>containr를 사용</p>
        </div>
    </div>

    <!-- 수평선 긋기 -->
    <hr class="my-2">
    <div class="jumbotron jumbotron-fluid mx-4">
        <div class="container-fluid">
            <h1>jumbotron jumbotron-fluid Tutorial</h1>
            <p>이 곳에 jumbotron의 경우 round가 적용되어있지 않습니다.</p>
            <p>containr-fluid를 사용</p>
        </div>
    </div>


    <!-- 수평선 긋기 -->
    <hr class="my-2">

# 결과화면

 

# 전체코드

...더보기

<!doctype html>

<html lang="ko">

 

<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 

    <title>Hello, world!</title>

</head>

 

<body>

    <!-- bootstrap의 container을 사용 -->

    <div class="mt-3"></div>

 

    <div class="jumbotron mx-4">

        <div class="container">

            <h1>jumbotron Tutorial</h1>

            <p>이 곳에 jumbotron의 경우 round가 적용되어있습니다.</p>

            <p>containr를 사용</p>

        </div>

    </div>

 

    <div class="jumbotron mx-4">

        <div class="container-fluid">

            <h1>jumbotron Tutorial</h1>

            <p>이 곳에 jumbotron의 경우 round가 적용되어있습니다.</p>

            <p>containr-fluid를 사용</p>

        </div>

    </div>

 

    <!-- 수평선 긋기 -->

    <hr class="my-2">

    <div class="jumbotron jumbotron-fluid mx-4">

        <div class="container">

            <h1>jumbotron jumbotron-fluid Tutorial</h1>

            <p>이 곳에 jumbotron의 경우 round가 적용되어있지 않습니다.</p>

            <p>containr를 사용</p>

        </div>

    </div>

 

    <!-- 수평선 긋기 -->

    <hr class="my-2">

    <div class="jumbotron jumbotron-fluid mx-4">

        <div class="container-fluid">

            <h1>jumbotron jumbotron-fluid Tutorial</h1>

            <p>이 곳에 jumbotron의 경우 round가 적용되어있지 않습니다.</p>

            <p>containr-fluid를 사용</p>

        </div>

    </div>



    <!-- 수평선 긋기 -->

    <hr class="my-2">

 

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <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.7/umd/popper.min.js"

        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

        crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

        crossorigin="anonymous"></script>

</body>

 

</html>

저작자표시 비영리 변경금지

'[Bootstrap]' 카테고리의 다른 글

[Bootstrap Table] bootstrapTable Html로 생성하기  (0) 2019.12.13
[BOOTSTRAP] nav 왼쪽, 가운데, 끝 정렬 하기(justify-content-* 사용하기: start, end, center, between, around)  (0) 2019.10.20
[Bootstrap] nav 사용법 알아보기  (0) 2019.10.20
[Bootstrap] 부트스트랩(Bootstrap) Display  (0) 2019.10.20
[Bootstrap] 부트스트랩(Bootstrap) 공백(Spacing) 주기 (mt , mb, ml, mr, mx, my, pt, pb, pl, pr, px, py)  (0) 2019.10.20
블로그 이미지

미나미나미

,

[Bootstrap] 부트스트랩(Bootstrap) Display

[Bootstrap] 2019. 10. 20. 01:31

# Display를 사용해보자.

<!-- bootstrap의 container을 사용 -->
    <div class="container">
        <!-- 수평선 긋기 -->
        <h1>Display : 화면 표제를 깔끔하게 표현하기</h1>
        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <h1 class="display-1">display-1</h1>
        <div>(font-size: 6rem , font-weight: 300, line-height: 1.2)</div>
        
        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <h1 class="display-2">display-2</h1>
        <div>(font-size: 5.5rem; font-weight: 300; line-height: 1.2;)</div>
        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <h1 class="display-3">display-3</h1>
        <div>(font-size: 4.5rem; font-weight: 300; line-height: 1.2;)</div>
        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <h1 class="display-4">display-4</h1>
        <div>(font-size: 3.5rem; font-weight: 300; line-height: 1.2;)</div>
        <!-- 수평선 긋기 -->
        <hr class="my-2">
    </div>

# 결과화면

# 전체코드

...더보기

<!doctype html>

<html lang="en">

 

<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 

    <title>Hello, world!</title>

</head>

 

<body>

    <div class="container my-2">

        <!-- 점보트론은 웹사이트의 주요 메시지를 크게 보여주는 전광판 -->

        <div class="jumbotron">

            <!-- display를 사용하며 크기를 지정 -->

            <h1 class="display-2">Hello</h1>

            <!-- 강조 문단 글-->

            <p class="lead">This is jumbotron</p>

            <!-- y축 기준으로 4만큼 여백 , 상하 여백 -->

            <hr class="my-4">

            <p>Hello , world ! Hello, Jumbortron!</p>

            <p class="lead">

                <!-- a 위치는 -->

                <a class="btn btn-primary btn-lg" href="#">GO</a>

            </p>

        </div>

    </div>

 

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <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.7/umd/popper.min.js"

        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

        crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

        crossorigin="anonymous"></script>

</body>

 

</html>

저작자표시 비영리 변경금지

'[Bootstrap]' 카테고리의 다른 글

[Bootstrap Table] bootstrapTable Html로 생성하기  (0) 2019.12.13
[BOOTSTRAP] nav 왼쪽, 가운데, 끝 정렬 하기(justify-content-* 사용하기: start, end, center, between, around)  (0) 2019.10.20
[Bootstrap] nav 사용법 알아보기  (0) 2019.10.20
[Bootstrap] 점보트론(jumbotron) 사용하기 (jumbotron, jumbotron-fluid, container, container-fluid)  (0) 2019.10.20
[Bootstrap] 부트스트랩(Bootstrap) 공백(Spacing) 주기 (mt , mb, ml, mr, mx, my, pt, pb, pl, pr, px, py)  (0) 2019.10.20
블로그 이미지

미나미나미

,

[Bootstrap] 부트스트랩(Bootstrap) 공백(Spacing) 주기 (mt , mb, ml, mr, mx, my, pt, pb, pl, pr, px, py)

[Bootstrap] 2019. 10. 20. 01:10

# 부트스트랩(Bootstrap) 공백(Spacing) 주기 

- M/P 의 의미

       - M : Margin을 의미

       - P : Padding을 의미

- t , b , l , r ,x , y  의 의미

       - t : top을 의미 

       - b : bottom을 의미

       - l : left을 의미

       - r : right을 의미

       - x : x축 -> left , right을 의미

       - y : y축 -> top , bottom을 의미

- 0, 1, 2, 3, 4, 5, auto  의 의미

       - 0 : 0

       - 1 : .25rem( font-size가 16px이면, 4px) 크기

       - 2 : .5rem( font-size가 16px이면, 8px) 크기

       - 3 : 1rem( font-size가 16px이면, 16px) 크기

       - 4 : 1.5rem( font-size가 16px이면, 24px) 크기

       - 5 : 3rem( font-size가 16px이면, 48px) 크기

       - auto : margin의 자동으로 세팅

- 0, 1, 2, 3, 4, 5, auto  의 의미

       - 0 : 0

       - 1 : .25rem( font-size가 16px이면, 4px) 크기

       - 2 : .5rem( font-size가 16px이면, 8px) 크기

       - 3 : 1rem( font-size가 16px이면, 16px) 크기

       - 4 : 1.5rem( font-size가 16px이면, 24px) 크기

       - 5 : 3rem( font-size가 16px이면, 48px) 크기

       - auto : margin의 자동으로 세팅

- n1, n2, n3, n4, n5 의 의미 

   - n : negative을 의미

       - n1 : -.25rem( font-size가 16px이면, -4px) 크기

       - n2 : -.5rem( font-size가 16px이면, -8px) 크기

       - n3 : -1rem( font-size가 16px이면, -16px) 크기

       - n4 : -1.5rem( font-size가 16px이면, -24px) 크기

       - n5 : -3rem( font-size가 16px이면, -48px) 크기

# 테스트 코드 

 <div class="container">
        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <div class="bg-secondary">margin 테스트</div>
        <div class="m-1 bg-warning"> m-1 => top, bottom, left, right에 .25rem 만큼 margin </div>
        <div class="m-3 bg-primary"> m-3 => top, bottom, left, right에 1rem 만큼 margin </div>
        <div class="m-5 bg-danger"> m-5 => top, bottom, left, right에 3rem 만큼 margin </div>

        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <div class="bg-secondary">margin X,Y 테스트</div>
        <div class="mx-3 bg-primary"> m-3 => left, right에 1rem 만큼 margin </div>
        <div class="my-3 bg-danger"> m-3 => top, bottom에 1rem 만큼 margin </div>
        
        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <div class="bg-secondary">padding 테스트</div>
        <div class="p-1 bg-warning"> p-1 => top, bottom, left, right에 .25rem 만큼 padding </div>
        <div class="p-3 bg-primary"> p-3 => top, bottom, left, right에 1rem 만큼 padding </div>
        <div class="p-5 bg-danger"> p-5 => top, bottom, left, right에 3rem 만큼 padding </div>

        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <div class="bg-secondary">padding X ,Y 테스트</div>
        <div class="px-3 bg-danger"> px-3 => left, right에 1rem 만큼 padding  </div>
        <div class="py-3 bg-primary"> px-3 => top, bottom에 1rem 만큼 padding </div>
        
        <!-- 수평선 긋기 -->
        <hr class="my-2">
    </div>

# 결과화면 

# 전체코드

...더보기

<!doctype html>

<html lang="ko">

 

<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 

    <title>Hello, world!</title>

</head>

 

<body>

    <!-- bootstrap의 container을 사용 -->

    <div class="container">

        <!-- 수평선 긋기 -->

        <hr class="my-2">

        <div class="bg-secondary">margin 테스트</div>

        <div class="m-1 bg-warning"> m-1 => top, bottom, left, right에 .25rem 만큼 margin </div>

        <div class="m-3 bg-primary"> m-3 => top, bottom, left, right에 1rem 만큼 margin </div>

        <div class="m-5 bg-danger"> m-5 => top, bottom, left, right에 3rem 만큼 margin </div>

 

        <!-- 수평선 긋기 -->

        <hr class="my-2">

        <div class="bg-secondary">margin X,Y 테스트</div>

        <div class="mx-3 bg-primary"> m-3 => left, right에 1rem 만큼 margin </div>

        <div class="my-3 bg-danger"> m-3 => top, bottom에 1rem 만큼 margin </div>

        

        <!-- 수평선 긋기 -->

        <hr class="my-2">

        <div class="bg-secondary">padding 테스트</div>

        <div class="p-1 bg-warning"> p-1 => top, bottom, left, right에 .25rem 만큼 padding </div>

        <div class="p-3 bg-primary"> p-3 => top, bottom, left, right에 1rem 만큼 padding </div>

        <div class="p-5 bg-danger"> p-5 => top, bottom, left, right에 3rem 만큼 padding </div>

 

        <!-- 수평선 긋기 -->

        <hr class="my-2">

        <div class="bg-secondary">padding X ,Y 테스트</div>

        <div class="px-3 bg-danger"> px-3 => left, right에 1rem 만큼 padding  </div>

        <div class="py-3 bg-primary"> px-3 => top, bottom에 1rem 만큼 padding </div>

        

        <!-- 수평선 긋기 -->

        <hr class="my-2">

    </div>

 

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <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.7/umd/popper.min.js"

        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

        crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

        crossorigin="anonymous"></script>

</body>

 

</html>

저작자표시 비영리 변경금지

'[Bootstrap]' 카테고리의 다른 글

[Bootstrap Table] bootstrapTable Html로 생성하기  (0) 2019.12.13
[BOOTSTRAP] nav 왼쪽, 가운데, 끝 정렬 하기(justify-content-* 사용하기: start, end, center, between, around)  (0) 2019.10.20
[Bootstrap] nav 사용법 알아보기  (0) 2019.10.20
[Bootstrap] 점보트론(jumbotron) 사용하기 (jumbotron, jumbotron-fluid, container, container-fluid)  (0) 2019.10.20
[Bootstrap] 부트스트랩(Bootstrap) Display  (0) 2019.10.20
블로그 이미지

미나미나미

,
반응형

공지사항

글 보관함

달력

«   2024/12   »
일 월 화 수 목 금 토
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

티스토리툴바