templates 구성
- 구성 방식은 블로그 홈 화면을 구성하였던 것과 동일합니다.
따라서 자세한 설명은 생략하도록 하겠습니다.
부트스트랩 폴더 열기
- 블로그 홈 화면 구성할 때 다운로드 받았던 부트스트랩 폴더를 열고, VS Code를 엽니다.
경로는 다음과 같습니다.
1 | ~\bootstrap-4.3.1\site\docs\4.3\examples\navbar-fixed |
- <head></head> 태그와 <body></body>를 다음과 같이 추가해줍니다.
- <head>태그 안에는 부트스트랩 홈페이지의 CDN 링크와 CSS 링크를 연결해줍니다.
1 2 3 4 5 | <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="navbar-top-fixed.css"></head> |
- 화면이 정상적으로 출력이 되는지 확인해봅시다.
template 문서 생성
- 화면이 정상적으로 출력이 되니 이제 장고에서 템플릿 문서를 만들겠습니다.
- 먼저, [templates] 폴더를 클릭한 후 오른쪽 클릭을 한 뒤, html 문서를 만듭니다.
1 | [blogapp]-[templates]-[New]-[HTML File] |
- 파일명은 [blogMain.html]으로 하고, [OK]를 누릅니다.
- VS Code에서 수정한 html 코드를 복사한 뒤, 붙여넣기 합니다.
- 부트스트랩 다운로드 폴더로 가서, css 파일을 복사합니다.
- 다시 PyCharm으로 돌아와서 css 폴더를 클릭한 후 붙여넣기 합니다.
1 | [blogapp]-[static]-[css] |
- [OK]를 눌러줍니다.
- css 파일이 추가되었습니다.
