[python] Flask - 게시판 만들기 (2) - 부트스트랩과 웹표준

[python] Flask - 게시판 만들기 (2) - 부트스트랩과 웹표준

반응형

-. 이전 포스팅에 이어서 작성함.

4. 부트스트랩

-. 부트스트랩은 웹 ui를 꾸밀 때 유용한 여러 스크립트들을 모아둔 라이브러리 이다.

-. 대강 개념만 알고, 실제로 써본적이 없어서 이번에도 역시 위키독스 따라해본다.

1) 부트스트랩 설치

-. 설치라고 하기도 뭐한데, 부트스트랩에서 제공하는 css 파일 압축을 풀어, bootstrap.min.css 파일을 플라스크의 리소스 폴더에 넣으면 설치 끝. 압축 푼 폴더 (~dist)는 넣을 필요 없다.

-. 혹은 바로 CDN 링크를 입력해서 써도 된다. 나는 편의 상 파일 자체를 다운받아서 쓰기로 했다.

2) html temlate 수정

-. 부트스트랩 css를 적용한 형태로 수정한다.

#board_list.html 번호 제목 작성자ID 작성일시 {% if article_list %} {% for article in article_list %} {{ loop.index }} {{ article.articleSubject }} {{ article.userid }} {{ article.articleCreateTime }} {% endfor %} {% else %} 질문이 없습니다. {% endif %} #article.html {{ article.articleSubject }} {{ article.articleContent }} 작성자: {{ article.userid }} {{ article.articleCreateTime }} {{ article.comment_set|length }}개의 답변이 있습니다. {% for comment in article.comment_set %} {{ comment.commentContent }} 작성자: {{ comment.userid }} {{ comment.commentCreateTime }} {% endfor %}

3) 출력 확인

-. 게시글 리스트 출력 확인

-. 각 글 컨텐츠+댓글 출력 확인

5. html template 상속과 웹표준 도입

-. jinja에 대한 포스팅에서 웹페이지 표준과 html template 상속에 대해 간략하게 썼다. 이제 게시판에 위 template 상속을 이용한 웹표준 구조 적용을 해보려 한다.

1) html 수정

-. 간단하게 base.html 파일을 추가하고, board_list.html 파일만 수정하면 된다.

#base.html Hello, world! {% block content %}{% endblock %} {% block footer %} © Copyright 2021 by DongtanDobby. {% endblock %} #board_list.html {% extends "base.html" %} {% block content %} 번호 제목 작성자ID 작성일시 {% if article_list %} {% for article in article_list %} {{ loop.index }} {{ article.articleSubject }} {{ article.userid }} {{ article.articleCreateTime }} {% endfor %} {% else %} 질문이 없습니다. {% endif %} {% endblock %}

2) 출력

-. 큰 수정을 하지 않아 거의 비슷한데, 미세하게 달라진다. 예를들어 크롬 탭 상단의 창 이름이 아래와 같이 달라지고, 아래에 내 서명 (© Copyright 2021 by DongtanDobby.)이 추가되었다.

반응형

from http://givemethesocks.tistory.com/45 by ccl(A) rewrite - 2021-02-21 16:27:13