코딩/7-부트스트랩 Bootstrap

Bootstrap => 4장 ~ 6장

tree0505 2025. 6. 17. 09:46
반응형

06장_부품04장_리스트

  • 01_리스트.html
    <!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.0">
        <title>Document</title>
        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>

        <!--
            기본 ul태그는 아래와 같이 리스트 앞에 모형이 생기고, 세로형이다.
            a태그 역시 밑줄이 그어져 있다.
        -->

        <ul>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
            <li><a href="#">Link4</a></li>
        </ul>

        <!--
           
            부트스트랩5에서는 nav 태그를 사용해 레이아웃을 설정할 수 있다.
            기본 세로형에서 가로형으로 바뀐다.
            단, 아래 세 가지의 class 설정이 필요하다.
            (1) <ul> 태그 : nav
            (2) <li> 태그 : nav-item
            (3) <a> 태그  : nav-link
        -->

        <h2>네비바</h2>
        <ul class="nav">
            <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>
        </ul>
     
    </body>
    </html>
  • 02_리스트그룹.html
    <!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.0">
        <title>Document</title>
        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>

        <!--
            리스트를 세로형으로 표현할 때에는 리스트 그룹을 사용한다.
            단, 아래 세 가지의 class 설정이 필요하다.
            (1) <ul> 태그 : list-group
            (2) <li> 태그 : list-group-item
            (3) <a> 태그  : nav-link
        -->
        <h2>리스트그룹</h2>
        <!-- 가로 크기는 style속성의 width를 사용한다. -->
        <ul class="list-group" style="width: 500px;">
            <li class="list-group-item"><a class="nav-link" href="">공지사항</a></li>
            <li class="list-group-item"><a class="nav-link" href="">자주하는 질문</a></li>
            <li class="list-group-item"><a class="nav-link" href="">1:1 문의</a></li>
            <li class="list-group-item"><a class="nav-link" href="">대량주문 문의</a></li>
        </ul>
     
    </body>
    </html>

05장_정렬

  • 01_기본정렬.html
    <!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.0">
        <title>Document</title>
        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->  
         <style>
            .col-2 {
                border: 1px solid red;
                background: rgb(255, 255, 255);
            }
            .row {
                background-color: lightblue;
            }

         
          </style>
    </head>
    <body>

        <!--
                [d-flex justify-content-center]
                [d-flex justify-content-start]
                [d-flex justify-content-end]
                    (1) d-flex 는 정렬의 대상을 묶어 준다.
                    (2) justify-content-center 는 마지막 명령어가
                        center , start , end 로 나뉘며, 정렬기준이된다.
            -->

        <!-- justify 미 적용시 왼쪽부터 채워진다. -->
        <div class="container">
            <h3>justify 미적용</h3>
            <div class="row">
                <div class="col-2">1</div>
                <div class="col-2">2</div>
                <div class="col-2">3</div>
            </div>
        </div>
       
        <br>
       
        <div class="container">
            <h3>justify-content-center 중앙 정렬</h3>
            <div class="row">
                <div class="d-flex justify-content-center">
                    <div class="col-2">1</div>
                    <div class="col-2">2</div>
                    <div class="col-2">3</div>
                </div>
            </div>
        </div>
       
        <br>
       
        <div class="container">
            <h3>justify-content-start : 왼쪽 정렬</h3>
            <div class="row">
                <div class="d-flex justify-content-start">
                    <div class="col-2">1</div>
                    <div class="col-2">2</div>
                    <div class="col-2">3</div>
                </div>
            </div>
        </div>
       
        <br>
       
        <div class="container">
            <h3>justify-content-end : 오른쪽 정렬</h3>
            <div class="row">
                <div class="d-flex justify-content-end">
                    <div class="col-2">1</div>
                    <div class="col-2">2</div>
                    <div class="col-2">3</div>
                </div>

            </div>
        </div>

    </body>
    </html>
  • 02_반응형한그룹정렬.html
    <!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.0">
        <title>Document</title>
        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->  

    </head>

        <body>
            <div class="container bg-light">
                <!--
                    xl보다 크면, 왼쪽 정렬
                    xl보다 작으면, 가운데 정렬
                -->
                <div class="d-flex justify-content-xl-start justify-content-center">
                    <ul class="nav">
                        <li class="nav-item"><a href="#" class="nav-link">한그룹</a></li>
                        <li class="nav-item"><a href="#" class="nav-link">한그룹</a></li>
                        <li class="nav-item"><a href="#" class="nav-link">한그룹</a></li>
                    </ul>
                </div>
            </div>
       
            <hr>
       
            <div class="container bg-light">
                <div
    반응형