[Django파] Bootstrap 적용하기

오늘의 수강 범위 : section 3 - 부트스트랩 설치 ~ grid

🎨부트스트랩이란?

: 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 가장 좋았던 점은 웹 화면을 확대하고 축소를 할 때 마다 웹 사이트 구성요소의 구조들이 알맞게 자동으로 바뀐다는 것이었다. 만약 내가 일일이 코드를 짜는 것이었다면...🤦‍♀️

💡부트스트랩 사용 방법

부트스트랩을 적용하는 방법은 2가지로 사용 방법은 굉장히 간단하다.

1. url 링크를 타고 css로 연결하는 방법

head 태그에 아래의 코드를 복사해주면 부트스트랩의 CSS에 연결된다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

2. CSS 파일을 다운로드하고 해당 폴더에 넣어 연결하는 방법

마찬가지로 head 태그에 아래와 같은 코드를 html에 css를 연결하는 방식으로 연결해준다. href="./bootstrap/css/bootstrap.min.css"를 풀어서 해석해 보면
현재 폴더/bootstrap 파일/ css 파일/bootstram.min.css 파일

<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">

👉개인 블로그 작업 중간과정

확실히 부트스트랩을 적용하니 전보다 깔끔하고 보기 좋은 구성으로 바뀐 것 같다. 글을 출간할 때 마다 내가 작업하는 블로그의 프레임이 어떻게 바뀌는지 이미지를 첨부할 예정이다. 그리고 이제는 시험기간으로 잠시 몇주간 쉬고 다시 장고 공부하러 돌아올 것이다. 그러면 🖐