부트스트랩

블로그 홈 화면

저는 다음과 같은 블로그 홈 화면을 구성해보고자 합니다.

지금까지 작성한 index.html 문서는 아래와 같이 글씨만 있지 예쁘지가 않습니다.
장고 강의 이전에 배운 html과 css를 통하여 위와 같이 예쁜 페이지를 만들 수도 있지만, 이는 시간이 오래걸릴 것입니다.

부트스트랩(Bootstrap)

위와 같은 문제를 단축시킬 방법으로 우리는 부트스트랩을 활용할 것입니다.
부트스트랩이란?
웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다.
하나의 CSS 로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다.
다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.
- 출처 : 위키백과 -
https://ko.wikipedia.org/wiki/부트스트랩_(프론트엔드_프레임워크)

즉, 부트스트랩을 이용하면 예쁜 페이지를 손쉽게 구성할 수 있습니다.

부트스트랩 사이트 접속

저는 아래의 사이트에 접속하겠습니다.
https://getbootstrap.com/

홈 페이지 상단에서 [Examples]를 클릭합니다.
스크롤을 내려서 확인하면 우리가 찾는 [Cover]가 있습니다.
들아가서 확인해보도록 합니다.

다시 [Examples] 페이지로 돌아옵니다.
페이지 맨 위에 보면 [Download source code]가 있습니다.
일단 바탕화면에 다운로드받고, 압축 해제합니다.

폴더를 열면 다음과 같이 나타납니다.

[bootstrap-4.3.1]-[site]-[docs]-[4.3]-[examples]-[cover]로 이동합니다.
[index.html]을 더블클릭하여 열어봅니다.

우리가 찾았던 페이지와 다릅니다.
내용은 똑같지만 CSS가 적용이 되어있지 않은 것 같습니다.
이제 이 문서를 파헤쳐서 제대로 적용시켜 보도록 합시다.

폴더로 돌아가서 빈 곳에 [Shift]를 누른 상태로 마우스 오른쪽 클릭을 합니다.
[여기에 PowerShell 창 열기]를 누릅니다.

[PowerShell]창이 뜨면 다음 명령어를 입력합니다.
code .

VS Code가 실행되면 [index.html] 파일을 클릭합니다.
(이 과정은 굳이 VS Code로 실행하지 않아도 됩니다.)

생각보다 문서가 간단한 것을 볼 수 있습니다.
1번 라인 ~ 7번 라인을 보니 어느 정도 이 문서에서 필요한 것들을 정리해놓은 것 같습니다.
extra_css : "cover.css"로 적혀있는데, 이를 적용시켜주도록 해봅시다.

그 전에 <head> </head> <body> </body> 태그를 달아주도록 합시다.

<head>태그 안에 [cover.css] 파일을 적용시키기 위해 다음과 같이 합니다.
적용한 후에 [Ctrl] + [S]를 눌러서 저장합니다.

<head>
  <link rel="stylesheet" href="cover.css">
</head>

다시 웹 브라우저로 가서 [F5]를 눌러 새로고침해봅니다.
어느 정도 적용이 된 것 같지만, 어딘가 이상한 것 같습니다.
(옆의 글씨들은 나중에 지우면 되기 때문에 나머지 부분만 신경쓰도록 합니다.)

body_class를 "text-center"로 적용해보도록 하겠습니다.

<body class="text-center">

저장하고 다시 웹 브라우저로 가서 새로고침해보도록 합니다.

앞에서 했던 것은 글자를 중앙 정렬하는 것 같은데, 딱히 크게 변한 느낌은 없습니다.
문서에서 js는 false로 적혀있고, 나머지는 건드리지 않아도 될 것 같습니다.
이제 글자를 지우고 저장한 뒤 다시 새로고침 해보도록 합니다.

다음과 같이 수정하였습니다.

오히려 글씨 부분으로 쏠렸습니다.
즉, 이 문서에 적혀있지 않은 것이 적용되어야 할 것 같습니다.

다시 홈페이지로 이동해봅시다.
https://getbootstrap.com/
스크롤을 아래로 내리면 다음과 같은 것이 보입니다.
여기에 CSS, JS, Popper.js, jQuery CDN 링크가 있습니다.

문서에서 js는 필요하지 않다고 하였으므로, CSS CDN 링크를 복사해봅니다.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

다음과 같이 복사한 것을 <head> 태그 안에 붙여넣기 합니다.

<head>
  <link rel="stylesheet" href="cover.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

저장한 뒤, 웹 브라우저를 열어 새로고침 해봅시다.
뭔가 이제 형태는 비슷하게 나옵니다.
다만, 색이 제가 원하는 것과 다르게 나옵니다.

css는 적용되는 순서에 따라 다르게 보이기도 합니다.
따라서 위의 링크를 처음에 적용해보도록 하겠습니다.

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="cover.css">
</head>

저장한 뒤, 새로고침을 해봅니다.
이제 정상적으로 출력되는 것을 볼 수 있습니다.

index.html 적용

이제 우리가 적용시켰던 부트스트랩 [index.html] 문서를 우리의 장고 프로젝트의 [index.html] 문서에 적용시켜 보도록 하겠습니다.
하지만, 위의 부트스트랩 [index.html]은 css 파일이 필요하였고, 이 과정은 단순하게 우리의 장고 프로젝트의 [index.html]에 붙여넣기 할 수 없습니다.
물론, html 문서 내에서 css를 <head> 태그 안에 적용시킬 수도 있지만, 우리는 css와 같은 정적 파일들을 따로 관리해보도록 하겠습니다.
이 과정은 다음 토픽인 [정적 파일]에서 자세히 다뤄보도록 하겠습니다.

댓글