forbob@naver.com

Sumter,SC 29150

simple-coding

+ 00 00 0000

Have any Questions?

04_Simple Coding – Bootstrap – 기본 요약

forbobpro

04_Simple Coding – Bootstrap – 기본 요약

📃 요약

부트스트랩은 트위터 내부에서 각 개발자 만든 css 디자인을 통일할 방안을 생각하는 중에 만들어진 css 프레임워크임. 핵심은 css 디자인을 쉽게 사용가능하게 하고 팀 내부에서 대체로 통일된 css 디자인을 유지할 수 있음.

요소 기술 :

– Basic : Bootstrap

📃 기술 구현

스펙 :

- vscode
- html
- css
- bootstrap

📃 Bootstrap : 기본 사용법

– CDN 링크

  • html 에 CDN 링크를 통해 간단히 사용할 수 있고, npm 설치를 통해 사용할 수 있음. 예제에서는 CDN 링크를 이용함
    • CDN : 라이브러리를 인터넷 링크를 통해 제공하는 것
    • npm : 라이브러리를 직접 설치해서 사용하는 것, 설치 후 사용할 소스에서 import 해야함
      <!doctype html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap demo</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
      </head>
      <body>
      <h1>Hello, world!</h1>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
      </body>
      </html>

– bootstrap 사용법

- 사용법 : <태그 class="부트스트랩_클래스명 클래스명2 ..." />

예)
  <!-- class="container : 일정크기의 페이지를 만들어 중앙정렬시킴 -->
  <div class="container ">

1) 배치(layout) : 임의의 같은 크기로 가로를 총 12열을 나누고 디자인을 적용함

- 사용법 : 
  1) class="row" : 1행
  2) class="col-숫자" : n열(12열 보다 클수 없음)
     - 예) class="col-1" : 1열 크기를 1개의 박스 디자인 적용
     - 예) class="col-3" : 3열 크기를 1개의 박스 디자인 적용
     - 예) class="col"   : 동일한 크기로 자동 적용됨
  <div class="row" >
    <div class="col-숫자">
      Column
    </div>
    <div class="col-숫자2">
      Column
    </div>
    ...
  </div>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <!-- 예제 디자인 샘플 -->
    <link
      href="https://getbootstrap.com/docs/5.2/assets/css/docs.css"
      rel="stylesheet"
    />
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols">
    <div class="container text-center">
      <!-- 배치 : 1행 3열 (같은 크기 열) -->
        <div class="row">
            <div class="col">Column</div>
            <div class="col">Column</div>
            <div class="col">Column</div>
        </div>
    </div>

  </body>
</html>

2) 가로 정렬 : 왼쪽/중앙/오른쪽 박스 정렬

- 사용법 : 
  1) class="justify-content-center" : 가로 중앙  정렬
  2) class="justify-content-start"  : 가로 왼쪽  정렬
  3) class="justify-content-end"    : 가로 오른쪽 정렬
    <div>
      <!-- TODO: 열을 중앙 정렬하기 -->
      <div class="row justify-content-center">
        <div class="col-4">col</div>
      </div>
      <!-- TODO: 열을 왼쪽 정렬하기 -->
      <div class="row justify-content-start">
        <div class="col-4">col</div>
      </div>
      <!-- TODO: 열을 오른쪽 정렬하기 -->
      <div class="row justify-content-end">
        <div class="col-4">col</div>
      </div>
    </div>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <!-- 예제 디자인 샘플 -->
    <link
      href="https://getbootstrap.com/docs/5.2/assets/css/docs.css"
      rel="stylesheet"
    />
  </head>
  <body
    class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"
  >
    <!-- class="container text-center" : 중앙정렬(글자, 가상페이지) -->
    <div class="container text-center">
      <!-- 1행 2열(4칸) -->
      <!-- TODO: 열을 중앙 정렬하기 -->
      <div class="row justify-content-center">
        <div class="col-4">col</div>
        <div class="col-4">col</div>
      </div>
      <!-- TODO: 열을 왼쪽 정렬하기 -->
      <div class="row justify-content-start">
        <div class="col-4">col</div>
        <div class="col-4">col</div>
      </div>
      <!-- TODO: 열을 오른쪽 정렬하기 -->
      <div class="row justify-content-end">
        <div class="col-4">col</div>
        <div class="col-4">col</div>
      </div>
    </div>
  </body>
</html>

3) 세로 정렬 : 위/중앙/아래 박스 정렬

- 사용법 : 
  1) class="align-items-center" : 세로 중앙  정렬
  2) class="align-items-start"  : 세로 위쪽  정렬
  3) class="align-items-end"    : 세로 아래쪽 정렬
    <div class="container text-center">
      <!-- TODO: 세로 중앙 정렬 -->
      <div class="row align-items-center">
        <div class="col">col</div>
      </div>
      <!-- TODO: 세로 위쪽 정렬 -->
      <div class="row align-items-start">
        <div class="col">col</div>
      </div>
      <!-- TODO: 세로 아래쪽 정렬 -->
      <div class="row align-items-end">
        <div class="col">col</div>
      </div>
    </div>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <!-- 예제 디자인 샘플 -->
    <link
      href="https://getbootstrap.com/docs/5.2/assets/css/docs.css"
      rel="stylesheet"
    />
  </head>
  <body
    class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"
  >
    <!-- 기본 사용법 : class="미리정의된키워드" -->
    <!-- 1행 3열 -->
    <!-- 1행 : class="row" -->
    <!-- 1열 : class="col" -->
    <!-- 부트스트랩 기본 디자인 : 가로(12칸) -->
    <div class="container text-center">
      <!-- TODO: 세로 중앙 정렬 -->
      <div class="row align-items-center">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
      </div>
      <!-- TODO: 세로 위쪽 정렬 -->
      <div class="row align-items-start">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
      </div>
      <!-- TODO: 세로 아래쪽 정렬 -->
      <div class="row align-items-end">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
      </div>
    </div>
  </body>
</html>

4) 이미지 크기

- 사용법 : class="img-fluid" : === max-width : 100%; height:auto 의미
        가로 창크기를 늘렸을때 원본이미지를 훼손하지 않는범위에서 늘어남
    <img src="./img/pic_1.jpg" class="img-fluid" alt="사과">
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
        <img src="./img/pic_1.jpg" class="img-fluid" alt="사과">
    </div>
  </body>
</html>

5) 이미지 배치 : 좌/우/중앙

- 사용법 : 
    1) class="float-start"     : 좌측 정렬
    2) class="float-end"       : 우측 정렬
    3) class="mx-auto d-block" : 중앙 정렬
    <!-- TODO: 왼쪽 정렬 -->
    <img src="./img/doit.jpg" class="float-start" alt="소년" />
    <!-- TODO: 오른쪽 정렬 -->
    <img src="./img/doit.jpg" class="float-end" alt="소년" />
    <!-- TODO: 중앙 정렬 -->
    <img src="./img/doit.jpg" class="mx-auto d-block" alt="소년">
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <!-- TODO: 왼쪽 정렬 -->
    <img src="./img/doit.jpg" class="float-start" alt="소년" />
    <!-- TODO: 오른쪽 정렬 -->
    <img src="./img/doit.jpg" class="float-end" alt="소년" />
    <!-- TODO: 중앙 정렬 -->
    <img src="./img/doit.jpg" class="mx-auto d-block" alt="소년">
  </body>
</html>

6) 컴포넌트 : 테이블

- 사용법 : 
    1) <table class="table">                : 테이블 디자인 적용
    2) <table class="table table-striped "> : 테이블 스트라이프 디자인 적용
    3) <table class="table table-striped table-hover "> : 
      테이블 스트라이프 + 마우스커서 위에 위치시 색깔 효과 디자인 적용
    4) <tr class="table-dark">               : 테이블 행에(tr) 검은색 적용
    <table class="table table-striped table-hover">
      <!-- 제목 -->
      <thead>
        <tr class="table-dark">
          <th>#</th>
          <th>First</th>
          <th>Last</th>
        </tr>
      </thead>
      <!-- 본문 -->
      <tbody>
        <tr>
          <th>1</th>
          <td>Mark</td>
          <td>Otto</td>
        </tr>
        ...
      </tbody>
    </table>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <!-- 부트스트랩 테이블 : class="table" -->
    <div class="container">
      <table class="table table-striped table-hover">
        <!-- 제목 -->
        <thead>
          <tr class="table-dark">
            <th>#</th>
            <th>First</th>
            <th>Last</th>
          </tr>
        </thead>
        <!-- 본문 -->
        <tbody>
          <tr>
            <th>1</th>
            <td>Mark</td>
            <td>Otto</td>
          </tr>
          <tr>
            <th>2</th>
            <td>Jacob</td>
            <td>Thornton</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 자동정렬 단축키 : ctrl + alt + l (인텔리제이 단축키) -->
  </body>
</html>

7) 글자색 :

- 사용법 : text-색깔예약어 등 색깔이 있음 (색깔예약어 : primary(파란색), info(하늘색) 등))
  1) class="text-primary" : 파란색
  2) class="text-info"    : 하늘색
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <!-- TODO: 부트스트랩 글자색 종류 -->
    <!-- 사용법 : class="container" : 가상페이지 중앙정렬 -->
    <div class="container">
      <!-- class="text-primary" : 파란색 -->
      <p class="text-primary">Lorem ipsum dolor sit amet</p>
      <!-- class="text-secondary" : 회색 -->
      <p class="text-secondary">Lorem ipsum dolor sit amet</p>
      <!-- class="text-success" : 녹색 -->
      <p class="text-success">Lorem ipsum dolor sit amet</p>
      <!-- class="text-danger" : 빨간색 -->
      <p class="text-danger">Lorem ipsum dolor sit amet</p>
      <!-- class="text-warning" : 노란색 -->
      <p class="text-warning">Lorem ipsum dolor sit amet</p>
      <!-- class="text-info" : 하늘색 -->
      <p class="text-info">Lorem ipsum dolor sit amet</p>
    </div>
  </body>
</html>

8) 글자 정렬/글자크기 :


  • 글자 정렬




  • 사용법 : text-정렬예약어 등 색깔이 있음
    1) class=”text-center” : 글자 중앙 정렬
    2) class=”text-start” : 글자 왼쪽 정렬
    3) class=”text-end” : 글자 오른쪽 정렬




  • 글자 크기




  • 사용법 : fs-숫자 로 사용하며 , 숫자는 1 ~ 6 가지 크기가 미리 정의되어 있음
    1) class=”fs-숫자(1 ~ 6)” : 글자 크기(1 ~ 6 크기)



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <!-- TODO: 글자 정렬(왼/중앙/오른쪽) -->
      <!-- 중앙정렬 -->
      <p class="text-center">Lorem ipsum dolor sit amet</p>
      <!-- 왼쪽정렬 -->
      <p class="text-start">Lorem ipsum dolor sit amet</p>
      <!-- 오른쪽정렬 -->
      <p class="text-end">Lorem ipsum dolor sit amet</p>

      <!-- TODO: 대소문자 -->
      <!-- 대문자 -->
      <p class="text-uppercase">Lorem ipsum dolor sit amet</p>
      <!-- 소문자 -->
      <p class="text-lowercase">Lorem ipsum dolor sit amet</p>

      <!-- TODO: 글자크기(font-size) 변경(1~6) -->
      <p class="fs-1">Lorem ipsum dolor sit amet</p>
      <p class="fs-2">Lorem ipsum dolor sit amet</p>
      <p class="fs-3">Lorem ipsum dolor sit amet</p>
      <p class="fs-4">Lorem ipsum dolor sit amet</p>
      <p class="fs-5">Lorem ipsum dolor sit amet</p>
      <p class="fs-6">Lorem ipsum dolor sit amet</p>
    </div>
  </body>
</html>

9) 배경색 :

- 사용법 : bg-색깔예약어 등 색깔이 있음 (색깔예약어 : primary(파란색), warning(노란색) 등))
  1) class="bg-primary"    : 파란색 배경색
  2) class="bg-warning"    : 노란색 배경색
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <!-- 사용법 : bg-primary : 배경색(파란색) -->
      <div class="text-white bg-primary">
        Lorem ipsum dolor sit amet</div>
      <!-- 사용법 : bg-secondary : 배경색(회색) -->
      <div class="text-white bg-secondary">
        Lorem ipsum dolor sit amet</div>
    <!-- 사용법 : bg-success : 배경색(녹색) -->
      <div class="text-white bg-success">
        Lorem ipsum dolor sit amet</div>
    <!-- 사용법 : bg-danger : 배경색(빨간색) -->
      <div class="text-white bg-danger">
        Lorem ipsum dolor sit amet</div>
    <!-- 사용법 : bg-warning : 배경색(노란색) -->
      <div class="text-dark bg-warning">
        Lorem ipsum dolor sit amet</div>
    </div>
  </body>
</html>

10) 가로/세로크기, 마진/패딩 :


  • 가로 박스 크기



  • 사용법 : class=”w-숫자”


    1) class="w-25"          : 가로 25% 크기
    2) class="w-50"          : 가로 50% 크기
    3) class="w-75"          : 가로 75% 크기
    4) class="w-100"         : 가로 100% 크기


  • 세로 박스 크기



  • 사용법 : class=”w-숫자”


    1) class="h-25"          : 세로 25% 크기
    2) class="h-50"          : 세로 50% 크기
    3) class="h-75"          : 세로 75% 크기
    4) class="h-100"         : 세로 100% 크기


  • 마진 크기 : 바깥쪽 여백


  • 사용법 : class=”m접미사-숫자” : 마진 크기 (숫자 : 1 ~ 5)

    • 접미사 : t(top), e(end, right), b(bottom), s(start, left)
      예) 1) class="m-1"        : 4방향 동일하게 숫자 1크기의 마진(바깥여백)
      예) 2) class="mt-1"       : 숫자 1크기의 위쪽 마진(바깥여백)
      예) 3) class="me-1"       : 숫자 1크기의 왼쪽 마진(바깥여백)
      예) 4) class="mb-1"       : 숫자 1크기의 아래쪽 마진(바깥여백)
      예) 5) class="ms-1"       : 숫자 1크기의 오른쪽 마진(바깥여백)


  • 패딩 크기 : 안쪽 여백 크기


  • 사용법 : class=”p-숫자” : 마진 크기 (숫자 : 1 ~ 5)

    • 접미사 : t(top), e(end, right), b(bottom), s(start, left)
      예) 1) class="p-1"        : 4방향 동일하게 숫자 1크기의 패딩(안쪽여백)
      예) 2) class="pt-1"       : 숫자 1크기의 위쪽 패딩(바깥여백)
      예) 3) class="pe-1"       : 숫자 1크기의 왼쪽 패딩(바깥여백)
      예) 4) class="pb-1"       : 숫자 1크기의 아래쪽 패딩(바깥여백)
      예) 5) class="ps-1"       : 숫자 1크기의 오른쪽 패딩(바깥여백)


  • 디스플레이 변경 속성


  • 사용법 : class=”d-디스플레이속성” :

    • 디스플레이속성 : block ,inline-block, inline
      예) 1) class="d-none"         : none 속성
      예) 2) class="d-block"        : 블럭 속성
      예) 3) class="d-inline-block" : 인라인 블럭 속성
      예) 4) class="d-inline"       : 인라인 속성

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <!-- TODO: 가로 예제 -->
      <div class="w-25 p-3" style="background-color: #eee">Lorem</div>
      <div class="w-50 p-3" style="background-color: #eee">Lorem</div>
      <div class="w-75 p-3" style="background-color: #eee">Lorem</div>
      <div class="w-100 p-3" style="background-color: #eee">Lorem</div>

      <!-- TODO: 세로 + 인라인블럭 예제   -->
      <div style="height: 100px; background-color: rgba(255, 0, 0, 0.1)">
        <div
          class="h-25 d-inline-block"
          style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
        >
          Height 25%
        </div>
        <div
          class="h-50 d-inline-block"
          style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
        >
          Height 50%
        </div>
        <div
          class="h-75 d-inline-block"
          style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
        >
          Height 75%
        </div>
        <div
          class="h-100 d-inline-block"
          style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
        >
          Height 100%
        </div>
        <div
          class="h-auto d-inline-block"
          style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
        >
          Height auto
        </div>
      </div>
    </div>
  </body>
</html>

11) 테두리(외곽선)

  • 사용법 : class=”border” : 테두리(4군데 모두)
    1) class="border"            : 테두리(4군데 모두)
    2) class="border-top"        : 테두리 위쪽
    3) class="border-right"      : 테두리 오른쪽
    4) class="border-bottom"     : 테두리 아래쪽
    5) class="border-left"       : 테두리 왼쪽

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <!-- 예제 디자인 샘플 -->
    <link
      href="https://getbootstrap.com/docs/5.2/assets/css/docs.css"
      rel="stylesheet"
    />
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-border-utils">
    <div class="container">
        <!-- TODO: class="border" : 테두리(4군데 모두) -->
        <!-- TODO: 상(top)/하(bottom)/좌(start)/우(end) 조합가능 -->
        <span class="border"></span>
        <span class="border-top"></span>
        <span class="border-bottom"></span>
        <span class="border-start"></span>
        <span class="border-end"></span>

        <!-- 테두리 색깔 : (primary(파란색) ~ warning(노란색) 등) -->
        <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>

    </div>
  </body>
</html>
,

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Recent Categories

Recent Posts

Post Archive

Catogery Tags

algorism backend cm coding-test css deploy docker figma html java js multi-provider social login nginx si simple-coding social login spring boot springboot sql stomp toast ui tomcat vue websocket 간편 로그인 구글 로그인 소셜 로그인

Connect With Us