• 웹 클라이언트 UI는 start bootstrap의 템플릿을 활용함
  • https://startbootstrap.com/
  • 부트스트랩 템플릿 파일일 다운로드
    • https://startbootstrap.com/theme/agency
    • https://startbootstrap.com/template/blog-post

1.기본세팅부터 경로 지정하기

2.Blog 앱 & 모델 생성 / admin 계정 생성 & 모델 등록

• 앱 만들기

python manage.py startapp blog

• blog 앱 모델 post 만들기

from django.db import models

# Create your models here.
class Post(models.Model):
    ...

    def __str__(self) -> str:
            return super().__str__()

• post DB 생성

python manage.py makemigrations
python manage.py migrate

admin 계정에서 더미데이터로 DB를 추가 해 놓는다.

3.CBV로 Blog List 페이지

• URLConf
• View
  class PostList(ListView):
• template 작성

{% extends 'base.html' %}
{% load static %}


{% block title %}
    Blog 목록
{% endblock title %}

{% block main_area %}
<section class="container">
    <h2>Blog</h2>
    
        <hr />
        <h2><a href="{{ p.get_absolute_url }}"></a>{{ p.title }}</h2>
        <p>{{ p.content }}</p>
        <h4>{{p.created_at}}</h4>
    
</section> -->
{% endblock main_area %}

4.CBV로 Blog post list 페이지 구현

Template 상속

• base
  navbar전까지 공통으로 들어가는 css & js를 block-endblock 하고난 후 home에 다시 싸주고/ {% extends base.html %}
• navbar
  
• footer
  오려내서 붙이기.

5.포스트 목록 상세페이지 만들기

• URLConf

• View

• Post모델의 URL 생성규칙 정의(get_absolut_url)

• template 작성
  
  

• post_list, post_detail 템플릿 bootstrap 적용
  https://github.com/startbootstrap/startbootstrap-blog-home
  https://startbootstrap.com/template/blog-post
  dist/index.html 에서 필요한 요소(content) 가져오기

• blog & 상세페이지
  

• 더미 이미지

  • 동일한 이미지가 중복되게 들어가면 안됨

    • seed값을 다르게! -> for문 안에서 해당 태그안에 id값을 처리.

• 최종 post_list,post_detail!
  
  
  

생각해야했던 부분.

base.html은 style.css를, post_list.html은 my_style.css를 먹게끔 바꾸기

• 이유 : post_list는 #으로 id를 부른게 아닌 url로 페이지를 불러와서 다른 css로 꾸며야한다.

base 부모에서 block으로 감싸지 않으면 style.css까지 그대로 상속받기 때문에 block으로 감싼다음 post_list.html에서는 my_style.css를 사용하여 다른걸로 사용한다.

background_color가 현재 인식이 안됨

/*1. 다음 부분을 찾아서 background-color 부분 추가  */
@media (min-width: 992px) {
  #mainNav {
    ... 생략 ...
    /* add my style */
    background-color: #212529;   
  }

    ... 생략 ...

/*2. 파일 제일 끝부분에 추가해 주기 */
/* add my style */
section {
	/*상하 8rem, 좌우0*/
    padding: 8rem 0;
    
    ex) padding: 2rem,3rem,4rem,5rem -> 시계 방향:위-오른쪽-아래-왼쪽
}
-> 반응형 페이지에서 덮혀졌을때 section 별 안쪽 여백을 줌으로써, 
	body안 content가 보이도록 함.

수정이 안되어있으면 캐시삭제하고 새로고침❗