장고를 활용한 웹사이트 만들기 - 템플릿으로 html 불러오기

이어서 보기 처음부터 보기

다음 강의 보기: 템플릿에 정보 채우기 동영상 다시보기 이 강의 동영상에 대한 의견 보내기

강의노트
질문 (8)

템플릿으로 html 불러오기

1. 서버 실행 - python manage.py runserver

2. 브라우저에서 localhost:8000으로 접속

3. HTML 소스보기

windows
- Internet Explore :
  1. 마우스 우클릭 - 소스보기
  2. Ctrl + U
- Chrome :
  1. 마우스 우클릭 - 페이지 소스보기
  2. 상단 메뉴바에 보기 - 소스 또는
  3. Ctrl+U
- Firefox :
  1. 마우스 우클릭 - 페이지 소스
  2. Ctrl + U
OS X
- Safari : [Safari - 환경설정 - 고급 - 하단의 메뉴 막대에서 개발자용 메뉴 보기 체크] 필수
  1. 마우스 우클릭 - 페이지 소스보기
  2. Command + Option + I
- Chrome :
  1. 마우스 우클릭 - 페이지 소스보기
  2. 상단 메뉴바에 보기 - 개발자 정보 - 소스 보기
  3. Command + Option + U
- Firefox :
  1. 마우스 우클릭 - 페이지 소스
  2. Command + U

4. 템플릿 추가하기

앱(elecetions) 폴더 아래에 templates 폴더 생성 (C\Code\mysite\elections\templates)
templates 폴더 아래 elecetions 폴더 생성(C\Code\mysite\elections\templates\elections)
elecetions 폴더 아래 index.html 파일 생성 (C\Code\mysite\elections\templates\elections\index.html)
index.html 과 views.py 수정

<!-- C\Code\mysite\elections\templates\elections\index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>선거 후보</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <table class="table table-striped">
        <thead>
        <tr>
            <td><B>이름</B></td>
            <td><B>소개</B></td>
            <td><B>출마지역</B></td>
            <td><B>기호</B></td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>가후보</td>
            <td>후보입니다.</td>
            <td>우리나라</td>
            <td>기호1번</td>
        </tr>
        <tr>
            <td>나후보</td>
            <td>후보입니다.</td>
            <td>우리나라</td>
            <td>기호2번</td>
        </tr>
        <tbody>
    </table>
</body>

# C\Code\mysite\elections\views.py

from django.shortcuts import render
from django.http import HttpResponse

from .models import Candidate

def index(request):
    candidates = Candidate.objects.all()
    return render(request, 'elections/index.html')