bootstrap

42일차 2023-05-04

choi Hoon 2023. 5. 4. 20:05

BootStrap

 

Typography04.html

<!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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <title>Typography04.html</title>
</head>
<body>
    <div class="container">
        <div class="jumbotron bg-info">
            <h1>Text/Typography</h1>
            <p class="bg-warning">
                Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.<br/>
                The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.<br/>   
                In addition, all &lt;p&gt; elements have margin-top: 0 and margin-bottom: 1rem (16px by default).                
            </p><!--p태그는 기본적으로 margin-bottom을 가지고 있다-->
        </div>
        <h2>h1 ~ h6</h2>
        <h1>h1 Bootstrap heading (2.5rem = 40px)</h1>
        <h2>h2 Bootstrap heading (2rem = 32px)</h2>
        <h3>h3 Bootstrap heading (1.75rem = 28px)</h3>
        <h4>h4 Bootstrap heading (1.5rem = 24px)</h4>
        <h5>h5 Bootstrap heading (1.25rem = 20px)</h5>
        <h6>h6 Bootstrap heading (1rem = 16px)</h6>

        <h2>Display Headings</h2>
        <!--headings 태그보다는 좀 더 얇고 좀 더 큰 사이즈의
            제목을 표시하는 클래스
            .display-1 ~ .display-4까지
            모든 headings태그(h1~h6)에 줄수 있다
            display-1 : font-size:6rem;font-weight:300;
            display-2 : font-size:5.5rem;font-weight:300;
            display-3 : font-size:4.5rem;font-weight:300;
            display-4 : font-size:3.5rem;font-weight:300;
            위 CSS속성이 동일하게 적용된다
        -->
        <h2>normal headings</h2>
        <h1 class="display-1">Display 1</h1>
        <h6 class="display-2">Display 2</h6>
        <h6 class="display-3">Display 3</h6>
        <h6 class="display-4">Display 4</h6>

        <h2>small태그</h2>
        <!--
            <small> element is used to create a lighter, secondary text in any heading
        -->
        <h1>h1 heading secondary text</h1>
        <h2>h2 heading <small>secondary text</small></h2>
        <h3>h3 heading <small>secondary text</small></h3>
        <h4>h4 heading <small>secondary text</small></h4>
        <h5>h5 heading <small>secondary text</small></h5>
        <h6>h6 heading <small>secondary text</small></h6>
        <h2>abbr태그</h2>
        <p>The <abbr title="World Health Organization">WHO</abbr> was founded in <span style="border-bottom: 1px black dotted;">1948.</span></p>
        <h2>code태그</h2>
        <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
        <h2>kbd태그</h2>
        <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
        <h2>More Typography Classes</h2>
        <h4>font-weight및 font-style관련 속성</h4>
        <!--font-weight-CSS속성값-->
        <p class="font-weight-bold">Bold text.</p>
        <p class="font-weight-bolder">Bolder text.</p>
        <p class="font-weight-normal">Normal weight text.</p>
        <p class="font-weight-light">Light weight text.</p>
        <p class="font-weight-lighter">Lighter weight text.</p>
        <p class="font-italic">Italic text.</p>
        <!--font-italic :font-style:italic;과 같다
            font-normal은 없다 그냥 아래처럼(일반 css줘야된다
             font-style:normal;)    
        --->
        <span class="font-italic"><p style="font-style:normal">Italic text.</p></span>
        <h4>text정렬관련 속성 : text-정렬값</h4>
        <p class="bg-dark text-white">text - 방향 미 지정</p>
        <p class="text-left bg-danger">Left-aligned text.</p>
        <p class="text-right bg-info">Right-aligned text.</p>      
        <p class="text-center bg-success">Center-aligned text.</p>
        <p class="text-justify bg-warning">Justified text. Justified text. Justified text. Justified text. Justified text. Justified text.</p>      
        <p class="text-nowrap bg-secondary">No wrap text. No wrap text. No wrap text. No wrap text.</p>
        <p class="text-wrap  bg-info">text-wrap. text-wrap. text-wrap. text-wrap. text-wrap. text-wrap.</p>
        <p class="text-break  bg-danger">text-break. text-break. text-break. text-break. text-break. text-break.</p>
        <p><strong>Tip:</strong> Try to resize the browser window to see the behaviour of justify and nowrap.</p>   
        <h4>text정렬관련 속성 : text-*-정렬값</h4>
        <p class="bg-dark text-white">text - 방향 미 지정</p>
        <p class="text-right bg-danger">모든 뷰포트에서 오른쪽 정렬</p>
        <p class="text-sm-center bg-info">sm이상에서만 가운데 정렬</p>      
        <p class="text-md-right bg-success">md이상에서만 오른쪽 정렬</p>
        <h4>긴 텍스트의 영역내 유지:text-break</h4>
        <p>With .text-break:</p>
        <!--
            -text-wrap과 text-break의 차이
            text-break는 텍스트에 공백이 있든 없든 영역이 텍스트보다 줄어들어도
            무조건 영역안에 Wrapping된다
            text-wrap은 텍스트에 공백이 있는 경우만 Wrapping된다
        -->
        <p class="text-break bg-info">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</p>
        <p class="text-wrap bg-danger">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</p>
        <p>Without .text-break:</p>
        <p class="bg-warning">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</p>
        <h4>부모로부터 받은 텍스트 색상으로 RESET:text-reset</h4>
        <p >Muted text with a <a href="#">reset link</a>.</p>
        <p class="text-success">Muted text with a <a href="#" class="text-reset">reset link</a>.</p>
        <h4>블릿제거및 아이템들(li)과 ul사이의 마진 제거:list-unstyled</h4>
        <style>
            .bg-info > li,.unstyled-apply > li{
                background-color: yellow;
                border:1px dotted red;
                box-sizing: border-box;
            }
            .list-inline > li,.d-flex-apply > li{
                background-color: yellow;
                border:1px dotted red;
                box-sizing: border-box;
                width:50px;
                height:50px;
            }
        </style>
        <ul class="bg-info">
            <li>Coffee</li>
            <li>Tea
              <ul>
                <li>Black tea</li>
                <li>Green tea</li>
              </ul>
            </li>
            <li>Milk</li>
        </ul>
        <ul class="list-unstyled unstyled-apply">
            <li>Coffee</li>
            <li>Tea
              <ul>
                <li>Black tea</li>
                <li>Green tea</li>
              </ul>
            </li>
            <li>Milk</li>
        </ul>
        <h4>인라인방향 배치:ul에는 list-inline,각 li에는 list-inline-item</h4>
        <ul class="list-inline"><!--여백이 왜 생기는가?
            list-inline클래스가 'display: inline-block'을 li요소에 적용하기 때문.(margin-right:0.5rem)
            inline-block은 요소들을 가로 배열하면서,요소 사이에 공백이 생기는 것이 특징.
            -->
            <li class="list-inline-item">Coffee</li>
            <li class="list-inline-item">Tea</li>
            <li class="list-inline-item">Milk</li>
        </ul>
        <h4>인라인방향 배치:ul에 d-flex,list-unstyled</h4>
        <ul class="d-flex list-unstyled d-flex-apply">
            <!--공백이 없는 이유?
            d-flex클래스가 ul요소에 적용하기 때문
            (display:flex는 요소들을 유연하게 배열함)
            -->
            <li >Coffee</li>
            <li >Tea</li>
            <li >Milk</li>
        </ul>
    </div>
</body>
</html>

 

결과)

Colors05.html

<!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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <title>Colors05.html</title>
</head>
<body>
    <div class="container">
        <div class="jumbotron bg-info">
            <h1>Colors</h1>
             <p>
                The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light<br/>
                The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
            </p>
        </div>
        <h2>Text Colors</h2>
        <p class="text-muted">This text is muted.</p>
        <p class="text-primary">This text is important.</p>
        <p class="text-success">This text indicates success.</p>
        <p class="text-info">This text represents some information.</p>
        <p class="text-warning">This text represents a warning.</p>
        <p class="text-danger">This text represents danger.</p>
        <p class="text-secondary">Secondary text.</p>
        <p class="text-dark">This text is dark grey.</p>
        <p class="text-body">Default body color (often black).</p>
        <p class="text-light bg-dark">This text is light grey (on white background).</p>
        <p class="text-white bg-dark">This text is white (on white background).</p>
        <h2>Opacity Text Colors</h2>
        <p>.text-black-50 또는 .text-white-50 클래스를 사용하여 흑백 텍스트에 대해 50% 불투명도를 추가합니다.</p>
        <!--black과 white텍스트 색상만 적용됨, 50%(-50), 100%(-100) 투명도를 뜻함-->
        <p class="text-danger-50">텍스트 색상(빨강)적용안됨 흰색, 검은색만 됨</p>
        <p class="text-black-50">글씨색상 검은색, 투명도 50%</p>
        <p class="text-white-50 bg-dark">글씨 색상 하얀색, 투명도50%, 바탕색은 검은색</p>
        <h2>Contextual Backgrounds</h2>        
        <p class="bg-primary text-white">This text is important.</p>
        <p class="bg-success text-white">This text indicates success.</p>
        <p class="bg-info text-white">This text represents some information.</p>
        <p class="bg-warning text-white">This text represents a warning.</p>
        <p class="bg-danger text-white">This text represents danger.</p>
        <p class="bg-secondary text-white">Secondary background color.</p>
        <p class="bg-dark text-white">Dark grey background color.</p>
        <p class="bg-light text-dark">Light grey background color.</p>
    </div>
</body>
</html>

 

결과)

 

Tables06.html

<!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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <title>Tables06.html</title>
</head>
<body>
    <div class="container">
        <div class="jumbotron bg-info">
            <h1>Tables</h1>
            <p>A basic Bootstrap 4 table has a light padding and horizontal dividers.<br/>
               The .table class adds basic styling to a table:</p>
        </div>
        <div class="row">
            <div class="col-md">
                <h2>Basic Table</h2>
                <table class="table">
                    <thead>
                      <tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Email</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr>
                        <td>Mary</td>
                        <td>Moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr>
                        <td>July</td>
                        <td>Dooley</td>
                        <td>july@example.com</td>
                      </tr>
                    </tbody>
                  </table>
            </div>
            <div class="col-md">
                <h2>Striped Rows</h2>
                <table class="table table-striped">
                    <thead>
                      <tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Email</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr>
                        <td>Mary</td>
                        <td>Moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr>
                        <td>July</td>
                        <td>Dooley</td>
                        <td>july@example.com</td>
                      </tr>
                    </tbody>
                  </table>       
            </div>
        </div><!--row-->
        <div class="row">
            <div class="col-md">
                <h2>Bordered Table</h2>
                <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Email</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr>
                        <td>Mary</td>
                        <td>Moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr>
                        <td>July</td>
                        <td>Dooley</td>
                        <td>july@example.com</td>
                      </tr>
                    </tbody>
                  </table>   
            </div>
            <div class="col-md">
                <h2>Hover Rows</h2>
                <table class="table table-hover table-bordered">
                    <thead>
                      <tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Email</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr>
                        <td>Mary</td>
                        <td>Moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr>
                        <td>July</td>
                        <td>Dooley</td>
                        <td>july@example.com</td>
                      </tr>
                    </tbody>
                  </table>   
            </div>

        </div><!--row-->
        <!-- 
          주축방향(행방향)
          992px(md)이상에서는 3개의 테이블 배치
          768px이상에서는 2개의 테이블 배치
          768px미만에서는 1개의 테이블 배치

          1. 행에 row row-cols-1 row-cols-sm-2 row-cols-md-3추가
             근데 문제가 생김: 테이블이 뷰포트 줄일시 겹친다
              해결책: 테이블을 반응형 테이블로 만든다:table-responsive 추가
          2. 반응형 테이블로 만들시 뷰포트가 줄어들면 수평방향 스크롤바가 생긴다
              해결책: text-break 추가(아래로 넘김)
          3. 575px~405px사이에서 오른쪽에 여백이 남은 거는 아래 css로 해결
        -->
        <style>
          .table td{
            width: 33.3%;
          }
        </style>
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
            <div class="col">
                <h2>Black/Dark Table</h2>
                <div class="table-responsive">       
                  <table class="table table-dark text-break">
                      <thead>
                      <tr>
                          <th>Firstname</th>
                          <th>Lastname</th>
                          <th>Email</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr>
                          <td>John</td>
                          <td>Doe</td>
                               <td>john@example.com</td>
                      </tr>
                      <tr>
                          <td>Mary</td>
                          <td>Moe</td>
                          <td>mary@example.com</td>
                      </tr>
                      <tr>
                          <td>July</td>
                          <td>Dooley</td>
                          <td>july@example.com</td>
                      </tr>
                      </tbody>
                  </table>
                </div>
            </div>
            <div class="col">
                <h2>Dark Striped Table</h2>       
                <table class="table table-dark table-striped text-break">
                    <thead>
                    <tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Email</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>john@example.com</td>
                    </tr>
                    <tr>
                        <td>Mary</td>
                        <td>Moe</td>
                        <td>mary@example.com</td>
                    </tr>
                    <tr>
                        <td>July</td>
                        <td>Dooley</td>
                        <td>july@example.com</td>
                    </tr>
                    </tbody>
                </table>
            </div>   
            <div class="col">
                <h2>Dark Striped Table</h2>       
                <table class="table table-dark table-striped text-break">
                    <thead>
                    <tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Email</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>john@example.com</td>
                    </tr>
                    <tr>
                        <td>Mary</td>
                        <td>Moe</td>
                        <td>mary@example.com</td>
                    </tr>
                    <tr>
                        <td>July</td>
                        <td>Dooley</td>
                        <td>july@example.com</td>
                    </tr>
                    </tbody>
                </table>
            </div>          
        </div><!--row-->
        <div class="row">
          <div class="col-md">
            <h2>Borderless Table</h2>
            <table class="table table-borderless">
              <thead>
                <tr>
                  <th>Firstname</th>
                  <th>Lastname</th>
                  <th>Email</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>John</td>
                  <td>Doe</td>
                  <td>john@example.com</td>
                </tr>
                <tr>
                  <td>Mary</td>
                  <td>Moe</td>
                  <td>mary@example.com</td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>july@example.com</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="col-md">
            <h2>Contextual Classes</h2>
            <!-- 
                <table>,<tr> 혹은 <td>에
                table-문맥적 칼라를 적용할 수 있다
                단, <tr>에 적용한 문맥적 칼라가  <td>에 적용한 칼라보다
                우선적으로 적용된다. 이때는 새로운 속성(bg-*)을 넣어 적용시킨다
            -->
            <table class="table table-bordered table-success">
              <thead class="table-dark">
                <tr >
                  <th>Firstname</th>
                  <th>Lastname</th>
                  <th>Email</th>
                </tr>
              </thead>
              <tbody>
                <tr class="table-primary">
                  <td>John</td>
                  <td class="table-danger">Doe</td><!--css적용안됨-->
                  <td class="bg-danger">john@example.com</td><!--bg-color는 적용됨-->
                </tr>
                <tr>
                  <td>Mary</td>
                  <td class="bg-dark text-white">Moe</td>
                  <td class="table-dark">mary@example.com</td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td >july@example.com</td>
                </tr>
              </tbody>
            </table>
            
          </div>
        </div><!--row-->
        <div class="row">
          <div class="cols-md">
            <h2>Table Head Colors</h2>
            <table class="table">
              <!-- <thead class="thead-dark"> -->
              <!-- <thead class="bg-dark text-white"> -->
              <thead class="thead-light">
                <tr>
                  <th>Firstname</th>
                  <th>Lastname</th>
                  <th>Email</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>John</td>
                  <td>Doe</td>
                  <td>john@example.com</td>
                </tr>
                <tr>
                  <td>Mary</td>
                  <td>Moe</td>
                  <td>mary@example.com</td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>july@example.com</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="cols-md pl-3">
            <h2>Small Table</h2>
            <table class="table table-bordered table-sm">
              <thead>
                <tr>
                  <th>Firstname</th>
                  <th>Lastname</th>
                  <th>Email</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>John</td>
                  <td>Doe</td>
                  <td>john@example.com</td>
                </tr>
                <tr>
                  <td>Mary</td>
                  <td>Moe</td>
                  <td>mary@example.com</td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>july@example.com</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div><!--row -->
        <!-- 
          ※테이블의 컬럼이 많은 경우 가로로 컨텐츠가 많은 테이블은
          반응형으로 만들면 가로축에 스크롤바가 생긴다
          단, 영역배분시 숫자를 지정해야 한다(기본은 자동 배분)
          예)
          <div class="col-md">를 두 개 배치하면 자동으로 6개씩 컬럼이
            배분된다
            하지만 반응형 테이블 배치 시에는 <div class="col-md-6">으로 
            지정해야된다 
        -->
        <div class="row">
          <div class="col-md-6">
            <h2>Responsive Tables</h2>
            <div class="table-responsive">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Age</th>
                    <th>City</th>
                    <th>Country</th>
                    <th>Sex</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>Anna</td>
                    <td>Pitt</td>
                    <td>35</td>
                    <td>New York</td>
                    <td>USA</td>
                    <td>Female</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <!-- 
            스크롤바가 생기는 경계점
            .table-responsive-sm  < 576px
            .table-responsive-md  < 768px
            .table-responsive-lg  < 992px
            .table-responsive-xl  < 1200px
          -->
          <div class="col-md-6">
            <h2>Responsive Table-sm</h2>
            <div class="table-responsive-sm">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Age</th>
                    <th>City</th>
                    <th>Country</th>
                    <th>Sex</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>Anna</td>
                    <td>Pitt</td>
                    <td>35</td>
                    <td>New York</td>
                    <td>USA</td>
                    <td>Female</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
    </div><!--container-->
</body>
</html>

결과)

Images07.html

<!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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <title>Images07.html</title>
    <style>
        /*점보트론 세로폭 및 마진바툼 줄이기*/
        .jumbotron{
            padding-top:1rem;
            padding-bottom:1rem;            
            margin-bottom: .5rem;
        }
    </style>
    <script>
        window.onresize=function(){
            //console.log(window.innerWidth);
            //문]해상도가 767픽셀이하에서는 세로방향으로 배치된다
            //   세로방향일때는 class를 mx-auto d-block로 바꾸고
            //   768이상일때는 다시 원래 클래스인 float-right,float-left로 바꿔줘라
            var img1=document.querySelector('#img1');
            var img2=document.querySelector('#img2');  
            var img3=document.querySelector('#img3');    
            
            if(window.innerWidth<=767){
                img1.setAttribute("class","mx-auto d-block");
                img3.setAttribute("class","mx-auto d-block");
                img2.setAttribute("class","mx-auto d-block");
            }
            else {
                img1.setAttribute("class","float-right");
                img2.setAttribute("class","float-left");
                img3.setAttribute("class","mx-auto d-block");
            }
        };


    </script>
</head>
<body>
    <div class="container">
        <div class="jumbotron bg-warning">
            <h1>Images</h1>
            <p>Image Shapes:Rounded Corners,Circle,Thumbnail</p>
        </div>
        <h2>Image Shapes</h2>
        <div class="row">
            <div class="col-sm">
                <!--
                w-100 h-100 :부모인 div의 가로폭/세로폭 100%채우기
                            좌우측 거터(15px씩)는 남는다
                -->  
                <img src="images/images.jpg" class="rounded w-100 h-100" alt="rounded"/>
            </div>
            <div class="col-sm mt-2 mb-2">
                 <!--
                    mt-2 mb-2 : 상하 여백주기(뷰포트가 스마트폰일때 상하 여백주기)
                    -->
                <img src="images/images.jpg" class="rounded-circle w-100 h-100" alt="rounded-circle"/>
            </div>
            <div class="col-sm">
                <img src="images/images.jpg" class="img-thumbnail w-100 h-100" alt="img-thumbnail"/>
            </div>
        </div><!--row-->
        <h2>Aligning Images</h2>
        <h4>Left,Right Images</h4>
        <div class="row">
            <div class="col">
                <img src="images/images.jpg" class="float-right" alt="float-right" title="float-right"/>
                <img src="images/images.jpg" class="float-left" alt="float-left" title="float-left"/>
              
            </div>
        </div>
        <h4>Cetered Images</h4>
        <div class="row">
            <div class="col">                
                <!--d-block : disply:block;-->
                <img src="images/images.jpg" class="mx-auto d-block" alt="mx-auto d-block" title="mx-auto d-block"/>
            </div>
        </div>
        <h4>Center Images</h4>
        <div class="row">
            <div class="col">
                <img src="images/images.jpg" class="float-right" id="img1" alt="float-right" title="float-right" />
                <img src="images/images.jpg" class="float-left" id="img2" alt="float-left" title="float-left" />
                <img src="images/images.jpg" class="float-mx-auto d-block" id="img3" alt="mx-auto d-block-left" title="mx-auto d-block-left" />
            </div>
        </div>
    </div><!--container-->
</body>
</html>

 

결과)

아래는 해상도를 낮게 했을center에 위치 해상도 높게 하면 우측, 좌측 배치