ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Django] Bootstrap5 정의 및 적용하기1
    Programming/Django 2022. 8. 31. 12:36
    728x90

    Bootstrap이란?

    트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것이다.

    부트스트랩은 전세계적으로 가장 많이 사용되는 오픈소스 CSS 프레임워크이다.

    반응형 CSS 를 제공한다.

    Bootstrap 적용 방법

    • 외부 스타일시트로 적용(jsDelivr)
    • 소스 다운로드하여 로컬환경에 적용

    1. 외부 스타일시트로 적용(jsDelivr)

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    부트스트랩의 이벤트에 반응하는 구조를 사용하기 위해서는 jQuery를 비롯한 몇몇 자바스크립트 라이브러리가 필요하다.

    자바스크립트 라이브러리도 jsdelivr 링크를 통해 사용할 수 있다.

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

    integrity, crossorigin 속성은 암호화 데이터를 위한 보안 요소로 추가되었다.

     

     

    Bootstrap Check Point !!

    Bootstrap을 사용할 때 알아야 할 몇 가지 중요한 전역 스타일과 설정을 사용하고 있으며, 이 모든 기능은 거의 크로스 브라우저 스타일의 정규화에 맞추어져 있다.

     

    HTML5 doctype

    Bootstrap은 HTML5 doctype을 사용해야한다. 사용하지 않으면 불안전한 스타일로 문제가 발생할 수 있다.

    <!doctype html>
    <html lang="en">
      ...
    </html>

     

    반응형 meta태그

    Bootstrap은 모바일 우선으로 개발되기 때문에 모바일 기기에 먼저 코드를 최적화한 다음 CSS 미디어 쿼리를 사용해서 필요에 따라 구성 요소를 확장하고 있다.

    <meta name="viewport" content="width=device-width, initial-scale=1">

     

    box-sizing

    박스 요소들의 일관된 사이즈 계산을 위해 전체 태그에 대해 box-sizing 속성을 border-box 로 변경해 사용하고 있다.

    이는 일부 서드파티 라이브러리(Google Maps, Google Custom Search Engin 등)에 영향을 미칠수 있다.

    이경우 필요한 클래스들에 대해 box-sizing 을 content-box 로 오버라이딩해서 사용해야 한다.

    .selector-for-some-widget {
      box-sizing: content-box;
    }

    위 snippet 을 사용하면 ::before와 ::after를 통해서 생성된 콘텐츠와 같은 중첩된 요소는 모두 .selector-for-some-widget에 대해서 지정된 box-sizing를 상속합니다.

    snippet(스니핏)
     - 자주 사용되는 코드를 별도로 저장해두고 필요할 때마다 복사해서 사용하는 것
     - snippet이 개발팀 내 공유되어 관리되지 못하면, 전체 코드에서 일관된 스타일을 가지지 못한다.

    Framework
     - 소프트웨어 개발 시 재사용 관점에서 공통적으로 필요한 기능들을 모아 구조화 한 것
     - Snippet보다는 Framework가 제공하는 코딩 스타일을 개발팀 전체의 코딩 스타일로 통일하면 품질, 유지보수, 커뮤니케이션 측면에서 좋다.

     

    Bootstrap 적용 하기

     

    1. 외부 스타일시트로 적용(jsDelivr)

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <h1> Hello codespace~ </h1>
    
      <h1><span class="badge badge-secondary">New Item</span></h1>
      
      <button type="button" class="btn btn-primary">
        New Item <span class="badge badge-light">4</span>
      </button>
    
      <div class="container-fluid p-5 bg-primary text-white text-center">
        <h1>My First Bootstrap Page</h1>
        <p>Resize this responsive page to see the effect!</p>
      </div>
      
    </head>

     

    Bootstrap 적용 안된  ver

     

     

    VSCode에 Bootstrap 적용하는 방법은 다음 게시물에 포스팅 하겠습니다~!

     

     

    728x90

    댓글

© 2022. code-space ALL RIGHTS RESERVED.