블로그 홈 화면
- 저는 다음과 같은 블로그 홈 화면을 구성해보고자 합니다.
- 지금까지 작성한 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와 같은 정적 파일들을 따로 관리해보도록 하겠습니다.
이 과정은 다음 토픽인 [정적 파일]에서 자세히 다뤄보도록 하겠습니다.
