웹페이지 디렉토리를
코드로 열기
터미널 cmd 상태에서
..\test\scripts\activate
우선 서버를 python manage.py runserver를 입력해서 서버를 열어준다.
게시글 목록이 정상적으로 열리는지 확인.
어제는 게시글 목록을 bootstrap을 먹여서 바꿔보았다.
목록에 있는 게시글을 눌렀을때 게시글 나오는 페이지도 바꿔보자.
q_detail. 로가서
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
bootstrap.min.css로 수정해준다.
C:\04_pyweb\webpage\static\bootstrap.min.css
static안에 있는 boostrap.min.css와 이름이 반드시 같아야한다.
q_detail.html 게시글과 댓글의 css 코드
<div class="container my-3 ">
<!--게시글 -->
<h3 class="border-bottom py-2">{{question.subject}}</h3>
<div class="card my-3">
<div class="card-body">
<div class="card-text" style="white-space: pre-line;"> {{ question.content }}</div>
<div class="d-flex justify-content-end">
<div class="badge bg-light text-dark p-2"> {{ question.create_date }}</div>
</div>
</div>
</div>
</div>
<!-- 댓글 -->
<div class="container py-3">
<h3 class="border-bottom py-2 ">{{ question.answer_set.count }}개의 댓글이 있습니다 </h3>
{% for answer in question.answer_set.all %}
<div class="card my-3 pl-3">
<div class="card-body">
<div class="card-text" style="white-space: pre-line;">{{answer.content}}</div>
<div class="d-flex justify-content-end">
<div class="badge bg-light text-dark p-2">{{answer.create_date}}</div>
</div>
</div>
</div>
{% endfor %}
<form action="{% url 'board:c_answer' question.id %}" method="POST" class="my-3">
{% csrf_token %}
<div class="mb-3">
<label for="content" class="form-label">댓글내용</label>
<textarea name="content" id="content" class="from-control" rows="5"></textarea>
</div>
<input type="submit" value="댓글작성" class="btn btn-primary">
</form>
</div>
</div>
웹 이미지
bootstrap으로 css를 먹였더니 제법 그럴싸해졌다.
하지만 q_list와 q_detail은 html 표준 형식이 아니다.
<html>
<head>
</head>
<== html표준형식
<body>
</body>
</html>
이번엔 html 표준형식으로 바꿔서 일괄적으로 적용시켜보자.
templates안에 base.html파일을 만들어준다.
{% load static %}
<!docType html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shlink-to-fit=no">
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
<title>django 테스트</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
title은 tap에 나오는 이름이다.
<html lang="ko">
한국어설정
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shlink-to-fit=no">
메타태그는 언어나 기본설정을 정의해주는것.
문서의 폭은 디바이스의 폭에 맞춘다. = 장치크기에 무조건 맞추겠다 = device-width
initial-scale=1
배율을 조정하기위해서 장치크기에 맞추기위한 배수를 지정하는 숫자.
, shlink-to-fit=no">
viewport에서 보여줘야될 크기가 작으면 핏에 맞춰서 축소시키는걸 방지하는 태그.
<body>
{% block content %}
{% endblock %}
</body>
바디영역에서 들어갈 내용을 block content에서 시작해서 endblock으로끝내라는 내용
만들어놓은 template갖다쓰자.
q_detail.html로 돌아가자. 
base.html내용을 끌어다가 사용을 할껀데. template태그들 사이에 div영역이 들어간다.
html표준형식으로 css가 맞춰진다.
q_list.html도 바꿔주자
</tbody>
</table>
</div>
{% endblock %}
웹이미지
육안으로 봤을때는 적용이 된지 구별이 힘들 수 있다.
하지만 탭쪽에 django테스트가 들어간걸로 보아 html표준형식이 적용된걸로 알 수 있다.
style.css은 사용할 것이기때문에 파일은 날리지않고 내용을 수정해준다.
게시글 목록페이지를 더 꾸며보자. 게시글 목록은 나오지만 작성버튼은 없다.
게시글 작성 버튼 부터 만들어보자
q_list.html로 가서 table태그 아래쪽에 a태그로 href = board\c_question으로 만들어준다.
</table>
<div class="d-flex justify-content-end">
<a href="{% url 'board:c_question' %}" class="btn btn-primary">글 작성</a>
</div>
웹이미지
board -urls.py로 가보자
마찬가지로 ursl.py로가서 urlpatterns에 path경로를 추가시켜준다.
path('question/create/', views.c_question, name='c_question'),
다음글은 게시글을 작성할 폼을 하나 만들어 주자.