멋쟁이 사자처럼 at 한국교통대학교 7기

2019 KNUT X LIKE LION #7

코스 전체목록

닫기

templates 구성

templates 구성

  • 구성 방식은 블로그 홈 화면을 구성하였던 것과 동일합니다.
    따라서 자세한 설명은 생략하도록 하겠습니다.

 

 

부트스트랩 폴더 열기

  • 블로그 홈 화면 구성할 때 다운로드 받았던 부트스트랩 폴더를 열고, VS Code를 엽니다.
    경로는 다음과 같습니다.
~\bootstrap-4.3.1\site\docs\4.3\examples\navbar-fixed

 

 

 

  • <head></head> 태그와 <body></body>를 다음과 같이 추가해줍니다.
  • <head>태그 안에는 부트스트랩 홈페이지의 CDN 링크와 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="navbar-top-fixed.css">
</head>

 

 

  • 화면이 정상적으로 출력이 되는지 확인해봅시다.

 

 

 

template 문서 생성

  • 화면이 정상적으로 출력이 되니 이제 장고에서 템플릿 문서를 만들겠습니다.

 

  • 먼저, [templates] 폴더를 클릭한 후 오른쪽 클릭을 한 뒤, html 문서를 만듭니다.
[blogapp]-[templates]-[New]-[HTML File]

 

  • 파일명은 [blogMain.html]으로 하고, [OK]를 누릅니다.

 

 

  • VS Code에서 수정한 html 코드를 복사한 뒤, 붙여넣기 합니다.

 

 

 

  • 부트스트랩 다운로드 폴더로 가서,  css 파일을 복사합니다.

 

 

  • 다시 PyCharm으로 돌아와서 css 폴더를 클릭한 후 붙여넣기 합니다.
[blogapp]-[static]-[css]

 

  • [OK]를 눌러줍니다.

 

  • css 파일이 추가되었습니다.

 

 

 

 

 

댓글

댓글 본문
버전 관리
KNUT X LIKE LION
현재 버전
선택 버전
graphittie 자세히 보기