blog/views.py
안의 파일을 살펴보면 다음과 같이 되어있다.
xfrom django.shortcuts import render# Create your views here.여기에 간단한 뷰를 만들어본다.
xxxxxxxxxxdef post_list(request): return render(request, 'blog/post_list.html', {})post_list라는 함수(def)를 만들어 요청(request)을 넘겨 받아서 render 메소드를 호출한다. 위 함수는 호출하여 return 받은 blog/post_list.html 템플릿을 보여준다.
서버를 실행하고 http://127.0.0.1:8000/ 로 접속하여 확인해보면 TemplateDoesNotExist 에러를 볼 수 있다. 이는 템플릿 파일이 없어서 발생하는 오류이다.
HTML 시작하기
HTML 이란?
HTML은 HyperText Markup Language의 줄임말로, 웹 페이지를 만들기 위한 마크업 언어이다.
첫 번째 템블릿
템플릿은 blog/templates/blog 디렉토리에 저장된다. blog 디렉토리 안에 templates 디렉토리를 생성하고, templates 디렉토리 안에 blog 디렉토리를 생성한다.
xxxxxxxxxxblog└───templates└───blog
그 다음 blog/templates/blog 디렉토리 안에 post_list.html 파일을 만든다.
서버를 실행시키고, http://127.0.0.1:8000/ 로 접속하여 확인해보면 빈 화면을 볼 수 있다.
post_list.html 파일에 다음과 같이 코드를 작성한다.
xxxxxxxxxx<html> <p>Hi there!</p> <p>It works!</p></html>그 다음 다시 확인해보면 아래와 같이 내용을 확인할 수 있다.
모든 웹 페이지는 <html로 시작해 </html>로 끝나고 그 사이에 모든 내용이 있다. <p>는 문단을 나타내는 태그인데 이것 역시 </p>로 닫는다.
Head & Body
HTML은 head와 body 두 가지 요소로 구분한다.
- head는 직접 웹 페이지 내에서는 보여지지 않는 페이지의 설정들을 알려준다.
- body는 웹 페이지에 직접적으로 보여지는 내용이 있으며, 실제 보여줄 내용은 모두 body 태그 안에 있다.
<html> <head> <title>Ola's blog</title> </head> <body> <p>Hi there!</p> <p>It works!</p> </body></html>위와 같이 파일을 작성하고 새로 고침을 해보면 다음과 같이 브라우저의 제목 표시줄에 Ola's blog가 표시된다.
맞춤형 템플릿 만들기
우선 아래 태그들을 알고 넘어간다.
<h1></h1>- 큰 제목<h2></h2>- 중 제목<h3></h3>- 소 제목 (<h6>레벨까지 사용할 수 있다.)<em></em>- 이탤릭체<strong></strong>- 텍스트를 두껍게<br/>- 줄바꿈<a href="http://djangogirls.org">link</a>- 하이퍼링크 걸기<ul><li>first item</li><li>second item</li></ul>- 목록 만들기<div></div>- 페이지 섹션
아래와 같이 post_list.html을 작성한다.
xxxxxxxxxx<html> <head> <title>Django Girls Blog</title> </head> <body> <div> <h1><a href="">Django Girls Blog</a></h1> </div> <div> <p>published: 22.12.2018, 17:07</p> <h2><a href="">My first post</a></h2> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> </div> <div> <p>published: 22.12.2018, 17:07</p> <h2><a href="">My second post</a></h2> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.</p> </div> </body></html>이 템플릿에는 세 개의 div 섹션이 있는데
- 첫 번째
div는 블로그의 제목을 나타내고 있고 - 나머지 두
div는 포스트의 게시일과h2로 된 블로그 제목이 있다.
배포하기
Github 커밋, 푸시
git에게 현재 폴더에 있는 모든 변경 내용을 포함시키기 위해서 아래 명령을 터미널에 입력한다.
xxxxxxxxxx$ git add --all .
파일을 업로드 전 git status 명령을 통해 업로드 할 파일을 확인하고
xxxxxxxxxx$ git status
Github 저장소에 변경 사항을 저장하기 위해서 커밋 메시지를 작성해, 수정된 내용을 알려준다.
xxxxxxxxxx$ git commit -m "Changed the HTML for the site."
그리고 업로드(push) 한다.
xxxxxxxxxx$ git push
PythonAnywhere에서 새 코드 가져오기
PythonAnywhere 콘솔 페이지에서 아래와 같이 명령어를 입력한다.
xxxxxxxxxx$ cd ~/my-first-blog$ git pull[...]
코드 다운이 완료되면 파일 탭에서 코드가 PythonAnywhere에 있는지 확인하고 웹 탭으로 가서 웹 앱을 리로드하면 변경된 내용을 볼 수 있다.
'Python > Django' 카테고리의 다른 글
| 장고 걸즈 튜토리얼 따라하기 9 - 템플릿 동적 데이터 (0) | 2018.12.27 |
|---|---|
| 장고 걸즈 튜토리얼 따라하기 8 - 장고 ORM과 쿼리셋 (0) | 2018.12.27 |
| 장고 걸즈 튜토리얼 따라하기 6 - 장고 urls (0) | 2018.12.24 |
| 장고 걸즈 튜토리얼 따라하기 5 - 배포 (0) | 2018.12.23 |
| 장고 걸즈 튜토리얼 따라하기 4 - 장고 관리자 (0) | 2018.12.19 |