TIL 0418

먼지·2024년 4월 18일
TILbootstrapjquery쌍용교육센터
0

Today I Learned

목록 보기
43/89
post-thumbnail

BootStrap

모든 클래스를 공부하기에는 한계가 있기 때문에
W3schools
이용하여 필요한 class 찾아서 사용하기!

BootStrap Grid

부트스트랩은 하나의 행이 12분할로 구성되어 있다.

그리드 시스템

크기 이름Extra smallSmallMediumLargeExtra LargeXXL
사이즈 범위< 576px>= 576px>=768px>=992px>=1200px>=1400px
Class 명.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid</title>
    <!-- BootStrap CSS 링크 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <style>
        [class*="col"] {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #eee;
            border: 1px solid #999;
        }
    </style>
</head>

<body>
    <div class="container">
        <h4>12개의 컬럼</h4>
        <div class="row">
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
        </div>
        <p>
            <h4>2개 컬럼</h4>
            <div class="row">
                <div class="col-md-8">.col-md-8</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
        </p>

        <p>
            <h4>같은 넓이</h4>
            <!-- 같은 넓이의 경우 크기를 줄였을 때도 
                무조건 같은 넓이를 유지하기 때문에 세로로 정렬이 되지 않는다. 
                해상도의 개념이 포함이 되지 않은 형태 -->
            <div class="row">
                <div class="col">1 of 2</div>
                <div class="col">2 of 2</div>
            </div>
        </p>

        <p>
            <h4>중앙 컬럼은 숫자를 지정하고 좌, 우 컬럼은 지정하지 않음</h4>
            <!-- 중앙의 컬럼을 숫자를 지정했기 때문에 6개의 분할만큼 넓이가 지정되어 있고
                좌, 우 컬럼은 지정하지 않았기 때문에 나머지의 넓이를 둘이서 나눠갖게 된다.
                모바일의 해상도를 가져도 세로로 정렬되지 않고 그대로 유지하게 된다. -->
            <div class="row">
                <div class="col">1 of 3</div>
                <div class="col-6">2 of 3</div>
                <div class="col">3 of 3</div>
            </div>
        </p>

        <p>
            <h4>컬럼들은 모바일에서 50% 넓이로 시작하고 데스크탑에서는 33.3% 넓이가 된다.</h4>
            <div class="row">
                <!--  -->
                <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                <div class="col-6 col-md-4">.col-6 .col-md-4</div>
            </div>
        </p>

        <p>
            <h4>row-cols-를 이용하여 칼럼 수 지정</h4>
            <!-- 넓이(크기)는 모두 동일함 한 행에 최대 2개의 컬럼이 올 수 있음 -->
            <div class="row row-cols-2">
                <div class="col">Column</div>
                <div class="col">Column</div>
                <div class="col">Column</div>
                <div class="col">Column</div>
            </div>

        <!-- 
            4를 쓰게 되면 모두 동일한 크기를 갖고, 한 줄에 정렬이 된다.
            <div class="row row-cols-4">
                <div class="col">Column</div>
                <div class="col">Column</div>
                <div class="col">Column</div>
                <div class="col">Column</div>
            </div> 
        -->
        </p>
        

        <p>
            <h4>row-cols-auto를 이용해서 칼럼 수 자동 지정</h4>
            <!-- 칼럼에 들어있는 내용의 양에 따라서 넓이를 자동계산해준다.
                모바일 환경에서는 한 행에 표현할 수 있는 만큼 표현한다. -->
            <div class="row row-cols-auto">
                <div class="col">Column Column</div>
                <div class="col">Column Column</div>
                <div class="col">Column</div>
                <div class="col">Column Column Column</div>
            </div>
        </p>
    </div>

    <!-- BootStrap JS 링크 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>

BootStrap Image 처리하기

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Images</title>
    <!-- BootStrap CSS 링크 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h4>반응형 이미지</h4>
        <img src="../files/Koala.jpg" class="img-fluid ">

        <p>
            <h4>썸네일 이미지</h4>
            <img src="../files/Penguins.jpg" class="img-thumbnail" width="200">
        </p>

        <p>
            <h4>모서리를 둥글게</h4>
            <img src="../files/landscape.jpg" class="rounded" width="200">
        </p>

        <p>
            <h4>이미지 정렬</h4>
                <div class="row">
                   <div class="col-md-12">
                    <!-- float - start : 왼쪽 정렬, float - end : 오른쪽 정렬 -->
                    <img src="../files/Koala.jpg" class="rounded float-end" width="200">
                    <img src="../files/Penguins.jpg" class="rounded float-start" width="200">
                   </div> 
                </div>
        </p>

        <p>
            <h4>Figures(이미지와 이미지에 대한 설명)</h4>
            <figure class="figure">
                <img src="../files/Penguins.jpg" width="400" height="300">
                <figcaption class="figure-caption">펭귄 이미지</figcaption>
            </figure>
        </p>

        <p>
            <h4>텍스트의 정렬</h4>
            <figure class="figure">
                <img src="../files/Penguins.jpg" width="400" height="300">
                <figcaption class="figure-caption text-end">펭귄이미지</figcaption>
            </figure>
        </p>

    </div>
    <!-- BootStrap JS 링크 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>

BootStrap Tables

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tables</title>
    <!-- BootStrap CSS 링크 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h4>기본 Table</h4>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>도시</th>
                    <th>계절</th>
                    <th>과일</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
            </tbody>
        </table>

        <h4>어두운 배경</h4>
        <table class="table table-dark">
            <thead>
                <tr>
                    <th>#</th>
                    <th>도시</th>
                    <th>계절</th>
                    <th>과일</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
            </tbody>
        </table>

        <h4>테이블 헤더 옵션(어두운 색 헤더)</h4>
        <table class="table">
            <thead class="table-dark">
                <tr>
                    <th>#</th>
                    <th>도시</th>
                    <th>계절</th>
                    <th>과일</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
            </tbody>
        </table>

        <h4>테이블 헤더 옵션(밝은색 헤더)</h4>
        <table class="table">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>도시</th>
                    <th>계절</th>
                    <th>과일</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
            </tbody>
        </table>

        <h4>스트라이프 테이블 만들기</h4>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>도시</th>
                    <th>계절</th>
                    <th>과일</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
            </tbody>
        </table>
        
        <h4>테두리가 있는 테이블 만들기</h4>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>도시</th>
                    <th>계절</th>
                    <th>과일</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
            </tbody>
        </table>

        <h4>Hoverable row</h4>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>#</th>
                    <th>도시</th>
                    <th>계절</th>
                    <th>과일</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
            </tbody>
        </table>

        <h4>선이 하나도 없는 테이블</h4>
        <table class="table table-borderless">
            <thead>
                <tr>
                    <th>#</th>
                    <th>도시</th>
                    <th>계절</th>
                    <th>과일</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
            </tbody>
        </table>

        <h4>테이블 row 마다 색깔 주기</h4>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>도시</th>
                    <th>계절</th>
                    <th>과일</th>
                </tr>
            </thead>

            <tbody>
                <tr class="table-primary">
                    <td>1</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr class="table-success">
                    <td>2</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
                <tr class="table-info">
                    <td>3</td>
                    <td>서울</td>
                    <td>봄</td>
                    <td>사과</td>
                </tr>
            </tbody>
        </table>

    </div>
    <!-- BootStrap JS 링크 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>



BootStrap Form

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
    <!-- BootStrap CSS 링크 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h4>기본 Form</h4>
        <form>
            <div class="mb-3">
                <label for="email" class="form-label">이메일</label>
                <input type="email" id="email" class="form-control" aria-describedby="emailHelp"
                    placeholder="이메일 주소를 입력하세요">
                <div id="emailHelp" class="form-text">타인과 공유하지 않는 이메일을 입력하세요.</div>
            </div>

            <div class="mb-3">
                <label for="password" class="form-label">비밀번호</label>
                <input type="password" id="password" class="form-control" placeholder="비밀번호를 입력하세요">
            </div>

            <div class="mb-3 form-check">
                <input type="checkbox" id="check1" class="form-check-input">
                <label for="check1" class="form-check-label">Check Me Out</label>
            </div>

            <button type="submit" class="btn btn-primary">제출</button>
        </form>

        <p>
        <h4>Horizontal Form</h4>
        <form>
            <div class="mb-3 row">
                <label for="email2" class="col-sm-2 col-form-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="email2" placeholder="Enter your Email">
                </div>
            </div>

            <div class="mb-3 row">
                <label for="password2" class="col-sm-2 col-form-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="password2" placeholder="Enter your Password">
                </div>
            </div>

            <div class="mb-3 row">
                <div class="col-sm-10 offset-sm-2">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="check2">
                        <label for="check2" class="form-check-label">Email, PW Saved</label>
                    </div>
                </div>
            </div>

            <div class="mb-3 row">
                <div class="col-sm-10 offset-sm-2">
                    <button type="submit" class="btn btn-primary">Sign in</button>
                </div>
            </div>
        </form>

        <p>
        <h4>Floating Labels</h4>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="email3" placeholder="name@example.com">
            <label for="email3">Email Address</label>
        </div>

        <div class="form-floating mb-3">
            <input type="password" class="form-control" id="password3" placeholder="Enter your password">
            <label for="password3">Password</label>
        </div>
    </div>
    <!-- BootStrap JS 링크 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>

BootStrap Accordion

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
    <!-- BootStrap CSS 링크 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h4>기본 accordion</h4>
        <div class="accordion" id="accordionExample">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseOne">
                        Accordion Item #1
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        겨울이 지나가고 봄이 왔습니다. 
                        야외 활동이 늘어나고 사람들이 많은 장소에 갈 때는 특히 조심하세요.
                    </div>
                </div>
            </div> <!-- end of item -->

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseTwo">
                        Accordion Item #2
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        겨울이 지나가고 봄이 왔습니다. 
                        야외 활동이 늘어나고 사람들이 많은 장소에 갈 때는 특히 조심하세요.
                    </div>
                </div>
            </div> <!-- end of item --> 
        </div>

        <h4>Flush</h4>
        <div class="accordion accordion-flush" id="accordionExample2">
            <div class="accordion-item">
                <h2 class="accordion-header" id="flush_headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                        data-bs-target="#flush_collapseOne">
                        Accordion Item #3
                    </button>
                </h2>
                <div id="flush_collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample2">
                    <div class="accordion-body">
                        겨울이 지나가고 봄이 왔습니다. 
                        야외 활동이 늘어나고 사람들이 많은 장소에 갈 때는 특히 조심하세요.
                    </div>
                </div>
            </div> <!-- end of item -->

            <div class="accordion-item">
                <h2 class="accordion-header" id="flush_headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#flush_collapseTwo">
                        Accordion Item #4
                    </button>
                </h2>
                <div id="flush_collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample2">
                    <div class="accordion-body">
                        겨울이 지나가고 봄이 왔습니다. 
                        야외 활동이 늘어나고 사람들이 많은 장소에 갈 때는 특히 조심하세요.
                    </div>
                </div>
            </div> <!-- end of item -->
        </div>
    </div>

        <!-- BootStrap JS 링크 -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

</body>
</html>

BootStrap Alert

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alert</title>
    <!-- BootStrap CSS 링크 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h4>alert</h4>
        <div class="alert alert-primary">
            봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
        </div>
        <div class="alert alert-secondary">
            봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
        </div>
        <div class="alert alert-success">
            봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
        </div>
        <div class="alert alert-danger">
            봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
        </div>
        <div class="alert alert-warning">
            봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
        </div>
        <div class="alert alert-info">
            봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
        </div>
        <div class="alert alert-light">
            봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
        </div>
        <div class="alert alert-dark">
            봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
        </div>

        <p>
            <h4>경고창 닫기</h4>
            <div class="alert alert-warning alert-dismissible fade show">
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                환절기 건강 관리를 철저히 하세요!!
            </div>
        </p>
    </div>

    <!-- BootStrap JS 링크 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

</body>

</html>

BootStrap Badges

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Badges</title>
    <!-- BootStrap CSS 링크 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h4>기본 Badges</h4>
        <h1>Example heading <span class="badge bg-primary">New</span></h1>
        <h2>Example heading <span class="badge bg-secondary">New</span></h2>
        <h3>Example heading <span class="badge bg-success">New</span></h3>
        <h4>Example heading <span class="badge bg-danger">New</span></h4>
        <h5>Example heading <span class="badge bg-warning">New</span></h5>
        <h6>Example heading <span class="badge bg-info">New</span></h6>

        <h4>Pill badges</h4>
        <span class="badge rounded-pill bg-primary">Primary</span>
        <span class="badge rounded-pill bg-secondary">Primary</span>
        <span class="badge rounded-pill bg-success">Primary</span>
        <span class="badge rounded-pill bg-danger">Primary</span>
        <span class="badge rounded-pill bg-warning">Primary</span>
        <span class="badge rounded-pill bg-info">Primary</span>
        <span class="badge rounded-pill bg-light text-dark">Primary</span>
        <span class="badge rounded-pill bg-dark">Primary</span>

        <h4>Button</h4>
        <button type="button" class="btn btn-primary">
            Notifications <span class="badge bg-secondary">4</span>
        </button>

        <h4>Positioned</h4>
        <button type="button" class="btn btn-primary position-relative">
            Inbox <span class="position-absolute top-0 start-100 translate-middle rounded-pill 
                                badge bg-danger">
                99+ <span class="visually-hidden">unread messages</span>
            </span>
        </button>

    </div>

    <!-- BootStrap JS 링크 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

</body>

</html>

BootStrap Buttons

profile
먼지
Lucky Things🍀
이전 포스트

TIL 0417

다음 포스트

TIL 0419

0개의 댓글