코딩/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 class="d-flex justify-content-xl-center 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 class="d-flex justify-content-xl-end 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>
         
        </body>
    </html>
  • 03_반응형두그룹정렬.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>

        <!--
            1. xl보다 크면, 왼쪽        / xl보다 작으면, 가운데 정렬
            2. xl보다 크면, 오른쪽      / xl보다 작으면, 가운데 정렬
            3. 두 그룹일 경우에는 row와 col의 기능이 필요하다.
        -->

        <body>
            <div class="container bg-light">
                <div class="row">
                    <div class="col-12 col-xl-6">
                        <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>
       
                    <div class="col-12 col-xl-6">
                        <div class="d-flex justify-content-xl-end 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>
                </div>
            </div>
       
         
        </body>
    </html>
  • 06장_부품
  • 01_border.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>
            span {
                display: inline-block;
                width: 70px;
                height: 70px;
                margin: 6px;
                background-color: #f2faf1;
            }
        </style>

    </head>
    <body>

        <div class="container my-5">
            <h3>테두리 방향</h3>
            <span class="border"></span>
            <span class="border-top"></span>
            <span class="border-end"></span>
            <span class="border-bottom"></span>
            <span class="border-start"></span>
            <!--옵션 주기 -->
        </div>
     
        <div class="container mb-5">
            <h3>테두리 색상</h3>
            <span class="border border-primary"></span>
            <span class="border border-secondary"></span>
            <span class="border border-success"></span>
            <span class="border border-danger"></span>
            <span class="border border-warning"></span>
            <span class="border border-info"></span>
            <span class="border border-light"></span>
            <span class="border border-dark"></span>
            <span class="border border-white"></span>
            <!--색깔은 글자로 되어 있다. -->
        </div>
       
        <div class="container mb-5">
            <h3>테두리 두께</h3>
            <span class="border border-1"></span>
            <span class="border border-2"></span>
            <span class="border border-3"></span>
            <span class="border border-4"></span>
            <span class="border border-5"></span>
            <!--border에다가 숫자를 넣기 -->
        </div>

        <div class="container mb-5">
            <h3>테두리 모서리</h3>
            <span class="border rounded-0"></span>
            <span class="border rounded-1"></span>
            <span class="border rounded-2"></span>
            <span class="border rounded-3"></span>
            <span class="border rounded-circle"></span>
            <span class="border rounded-pill" style="width:130px;"></span>
            <!--pill 알약 circle 동그라미-->
        </div>

    </body>
    </html>
  • 02_color.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 my-5">
            <h3>배경 색상</h3>
            <div class="p-3 mb-2 bg-primary text-white">bg-primary</div>
            <div class="p-3 mb-2 bg-secondary text-white">bg-secondary</div>
            <div class="p-3 mb-2 bg-success text-white">bg-success</div>
            <div class="p-3 mb-2 bg-danger text-white">bg-danger</div>
            <div class="p-3 mb-2 bg-warning text-dark">bg-warning</div>
            <div class="p-3 mb-2 bg-info text-dark">bg-info</div>
            <div class="p-3 mb-2 bg-light text-dark">bg-light</div>
            <div class="p-3 mb-2 bg-dark text-white">bg-dark</div>
            <div class="p-3 mb-2 bg-body text-dark">bg-body</div>
            <div class="p-3 mb-2 bg-white text-dark">bg-white</div>
            <div class="p-3 mb-2 bg-transparent text-dark">bg-transparent</div>        
        <!--특이하게 색깔이 글자이다. -->
        </div>


        <div class="container mb-5">
            <h3>텍스트 색상</h3>
            <p class="text-primary">text-primary</p>
            <p class="text-secondary">text-secondary</p>
            <p class="text-success">text-success</p>
            <p class="text-danger">text-danger</p>
            <p class="text-warning bg-dark">text-warning</p>
            <p class="text-info bg-dark">text-info</p>
            <p class="text-light bg-dark">text-light</p>
            <p class="text-dark">text-dark</p>
            <p class="text-body">text-body</p>
            <p class="text-muted">text-muted</p>
            <p class="text-white bg-dark">text-white</p>
            <p class="text-black-50">text-black-50</p>
            <p class="text-white-50 bg-dark">text-white-50</p>
        </div>

    </body>
    </html>
  • 03_text.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 my-5">
            <h3>텍스트 정렬 => 글자정렬</h3>
            <p class="text-start">Start aligned text on all viewport sizes.</p>
            <p class="text-center">Center aligned text on all viewport sizes.</p>
            <p class="text-end">End aligned text on all viewport sizes.</p>
        </div>

        <div class="container mb-5">
            <!-- font size -->
            <h3>글꼴 크기</h3>
            <p class="fs-1">fs-1 text</p>
            <p class="fs-2">fs-2 text</p>
            <p class="fs-3">fs-3 text</p>
            <p class="fs-4">fs-4 text</p>
            <p class="fs-5">fs-5 text</p>
            <p class="fs-6">fs-6 text</p>
        </div>

        <div class="container mb-5">
            <h3>글꼴 굵기와 기울임체</h3>
              <!-- font weight -->
            <p class="fw-bold">Bold text.</p>
            <p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
            <p class="fw-normal">Normal weight text.</p>
            <p class="fw-light">Light weight text.</p>
            <p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
            <!-- font style -->
            <p class="fst-italic">Italic text.</p>
            <p class="fst-normal">Text with normal font style</p>
        </div>

        <div class="container mb-5">
            <h3>행간(줄바꿈 시 세로 공백 간격)</h3>
            <!-- line height -->
            <p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
            <p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
            <p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
            <p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
        </div>

        <div class="container mb-5">
            <h3>텍스트 꾸미기</h3>
            <p class="text-muted">This text has a line underneath it.</p>
            <p class="text-decoration-underline">This text has a line underneath it.</p>
            <p class="text-decoration-line-through">This text has a line going through it.</p>
            <a href="#" class="text-decoration-none">This link has its text decoration removed</a>
        </div>

    </body>
    </html>
  • 04_button.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>

        <hr>
        <hr>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-light">Light</button>
        <button type="button" class="btn btn-dark">Dark</button>
        <button type="button" class="btn btn-link">Link</button>
       

        <hr>
        <hr>

        <a class="btn btn-primary" href="#">Link</a>
        <button class="btn btn-primary" type="submit">Button</button>
        <input class="btn btn-primary" type="button" value="Input">
        <input class="btn btn-primary" type="submit" value="Submit">
        <input class="btn btn-primary" type="reset" value="Reset">

        <hr>
        <hr>

        <button type="button" class="btn btn-outline-primary">Primary</button>
        <button type="button" class="btn btn-outline-secondary">Secondary</button>
        <button type="button" class="btn btn-outline-success">Success</button>
        <button type="button" class="btn btn-outline-danger">Danger</button>
        <button type="button" class="btn btn-outline-warning">Warning</button>
        <button type="button" class="btn btn-outline-info">Info</button>
        <button type="button" class="btn btn-outline-light">Light</button>
        <button type="button" class="btn btn-outline-dark">Dark</button>

        <hr>
        <hr>
       
        <button type="button" class="btn btn-primary btn-lg">Large button</button>
        <button type="button" class="btn btn-secondary btn-lg">Large button</button>
        <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
        <button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
       
    </body>
    </html>
  • 05_image.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <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">
            <img src="img/05_image.jpg" class="img-fluid" alt="반응형이미지">
        </div>
       
        <br>

        <div class="container-fluid">
            <img src="img/05_image.jpg" class="img-fluid" alt="반응형이미지">
        </div>

        <br>

        <div class="container-fluid">
            <img src="img/05_image.jpg" class="img" alt="일반이미지">
        </div>

    </body>
    </html>

 

반응형

'코딩 > 7-부트스트랩 Bootstrap' 카테고리의 다른 글

Bootstrap => 14장 ~ 16장 ~ 프로젝트  (1) 2025.06.17
Bootstrap => 9장 ~ 13장  (0) 2025.06.17
Bootstrap => 7장 ~ 8장  (0) 2025.06.17
Bootstrap => 4장 ~ 6장  (0) 2025.06.17
BOOTSTRAP => 1장 ~ 3장  (0) 2025.06.16

'코딩/7-부트스트랩 Bootstrap'의 다른글

  • 현재글Bootstrap => 4장 ~ 6장

관련글

티스토리툴바