Django

부트스트랩

블로그 홈 화면

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

 

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

 

 

 

 

부트스트랩(Bootstrap)

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

 

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

 

 

 

부트스트랩 사이트 접속

 

 

홈 페이지 상단에서 [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와 같은 정적 파일들을 따로 관리해보도록 하겠습니다.
    이 과정은 다음 토픽인 [정적 파일]에서 자세히 다뤄보도록 하겠습니다.

 

댓글

댓글 본문
  1. 몽롱해
    쭉보느라 댓글을 못남겼는데 잠시 쉬면서 남깁니다

    좋은 강의 감사합니다 ^.^
  2. 카라멜팝콘
    좋은 강의 감사합니다!
버전 관리
KNUT X LIKE LION
현재 버전
선택 버전
graphittie 자세히 보기