< django - 11 >

# 표준 HTML 구조

<!DOCTYPE html> -> HtML5 문서임을 알리는 지시어

<html>

<head>

문서 제목, 자바스크립트 코드, 메나데이터 정의, CSS 스타일 정의

</head>

<body>

문서의 본문 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등

</body>

</html>

- 태그 : <html>, <head> 등

- 엘리먼트 : <table> ~ </table> 처럼 태그와 태그 사이의 닫힌 구간(Block). <table> 태그로 둘러싸인 구간의 경우 table 엘리먼트라고 한다.

# 템풀릿 상속(extend)

: 기본 틀이 되는 템플릿을 먼저 작성한 후 다른 템플릿에서 그 템플릿을 상속하여 사용

1. 기본 틀의 역할을 할 base.html 템플릿을 파일 이름을 projects/mysite/templates/base.html 으로 하여 아래와 같이 작성한다.

+ base.html 템플릿 : 모든 템플릿이 상속해야 하는 템플릿이자 표준 HTML 문서의 기본 틀

+ Line 16, 17의 {% block content %}와{% endblock %} 템플릿 태그 : base.html을 상속한 템플릿에서 개별적으로 구현해야 하는 영역

2. projects/mysite/templates/pybo/question_list.html 파일의 question_list.html 템플릿을 아래와 같이 수정

+ Line 1, 2, 31 추가

+ Line 1에 extends 템플릿 문법 사용 --> base.html 템플릿을 상속하기 위함

+ {% block content %} 와 {% endblock %} 사이에 question_list.html에서만 쓰이는 내용 작성

3. question_detail.html도 아래와 같이 수정

+ Line 1, 2, 40 추가

4. view-source:http://localhost:8000/pybo/ 페이지를 호출 --> 브라우저에서 소스보기 기능으로 생성된 HTML을 확인

# style.css 처리

: 부트스트랩을 적용하여 style.css 의 내용은 더 이상 필요하지 않으니 기존 내용을 삭제한다. 단, projects\mysite\static\style.css 파일은 이후 부트스트랩으로는 표현을 할 수 없는 스타일을 위해 사용해야 하니 파일 자체는 남겨둔다.

🕰️ 공부하자 공부 🕰️