[html] 웹대시보드 04 - layout 기본 폼 만들기

모든 페이지에 사이드바와, 상단바, 그리고 하단의 푸터 까지 일일이 만들어 주기는 너무 귀찮고

수정에 번거로움이 있습니다.

 

그래서, 이 것들을 layout 이라는 이름으로 만들어 저장해 두고,

템플릿 상속 기능을 통해

모든 페이지에 일괄적으로 적용되도록 하려고 합니다.

 

이를 위해, 첫번째로 레이아웃을 먼저 만들 어 주겠습니다.

 

제가 사용할 것은

사이드바

 - accordian

footer

탑바

- nav

 

정도가 우선 될 것 같습니다.

 

우선, flask 의 기존 플젝과 연결되는 플젝 입니다.

기존에 만들어둔 venv 에서 templates 라는 폴더를 만들어 줍니다.

 

템플릿을 불러올 때, (html 파일) flask 는 알아서 templates 에서 불러옵니다. 폴더명 맞게 설정!

그리고 나서 layout.html 이라는 파일을 추가해 줍니다.

 

빈 페이지에

! + Tab 을 눌러주면

html 에 필요한 헤드 부분이 알아서 불러와 집니다. :)

 

페이지 구성에

 

head

- meta

- title 명

- custom font

- custom style( 추후에 style 부분을 css 로 옮김)

body

- page top

 - page wrapper

  -> sidebar

  -> content wrapper

     - Main Content

       - Topbar

         - sidebar toggle

         - topbar navbar

            -user information

         - begin page content ( 여기에 {%%} 넣기)

 - scroll top button

 - logout modal

 - bootstrap core (js ... )