-
[Django] Bootstrap5 정의 및 적용하기1Programming/Django 2022. 8. 31. 12:36728x90
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'Programming > Django' 카테고리의 다른 글
[Django] Bootstrap5 vscode 적용하기 (0) 2022.08.31 [Django] postgreSQL 연동 (0) 2021.12.27 [Django] 웹 페이지 만들기 2 (페이지 출력 확인) (0) 2021.12.13 [Django] 웹 페이지 만들기 1 (Django 웹 프레임 워크 세팅) (0) 2021.12.13 [Django] Django 시작하기 (설치) (0) 2021.12.07