[Django] Bootstrap5 정의 및 적용하기1

Programming/Django

[Django] Bootstrap5 정의 및 적용하기1

owls 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

저작자표시 비영리 변경금지 (새창열림)