📝
나의 MBIT(My Best IT personalities) Page 만들기!/
⛴️
009. 템플릿 적용하기
⛴️

009. 템플릿 적용하기

지금까지 프론트엔드(템플릿)과 백엔드(서버)를 따로 개발하였습니다. 왜냐하면 장고 템플릿의 경우 html/css/javascript 뿐 아니라 장고 템플릿 언어(django template language)가 섞여 있어서 스타일링과 서버 개발을 동시에 하면 매우 복잡해집니다. 따라서 템플릿은 따로 html/css/javascript으로만 작업을 하여 완성한 뒤 서버가 완성되면 장고 템플릿 언어를 통해 데이터를 뿌려주는 방식으로 완성합니다. 이제 프론트엔드 파트에서 완성한 템플릿을 가져와 장고 템플릿 언어를 추가해 봅시다.
1. static 파일 가져오기2. 메인 페이지3. 설문 페이지4. 결과 페이지

1. static 파일 가져오기

템플릿에 사용될 js 파일과 css파일을 앱의 static 폴더에 배치합니다.
notion imagenotion image

2. 메인 페이지

notion imagenotion image
{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <title>나의 개발 유형찾기</title>
</head>
<body> 
    <section id="main_contents">
        <div class="wrapper">
            <div class="title">
                <h3 class="main_title">나의 MBIT</h3>
                <h3 class="sub_title">My Best IT personalities</h3>
            </div>
            <div class="explain">
                <p>
                    "코딩 공부를 시작하려는데...<br>
                    도대체 뭐 부터 공부해야 할까?"<br><br>
                    나의 개발 유형을 테스트 해보자!
                </p>
            </div>
            <div class="buttons">
                <a href="/form/">
                    <button class="start" type="button">시작하기</button>
                </a>
                <a href="http://www.paullab.co.kr/curriculum.html" target="_blank">
                    <button class="lecture">강의 보러가기</button>
                </a>
            </div>
            <div class="result_data">
                <div class="data_wrap">
                    <ul>
                        {% for developer in developers %}
                            <li>{{ developer.name }} : {{ developer.count }}명</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="weniv">
                <a href="http://www.paullab.co.kr">
                    <img src="{% static 'img/weniv_text_logo.png' %}" alt="weniv">
                </a>
            </div>
        </div>
    </section>
</body>
</html>
  • {% load static %} : static 태그를 쓸 수 있도록 합니다.
  • 모든 static 파일의 경로를 static 태그로 표현합니다.
  • 설문 참여 현황을 for 태그를 통해 표현합니다.
      • <ul>
    {% for developer in developers %}
        <li>{{ developer.name }} : {{ developer.count }}명</li>
    {% endfor %}
</ul>
 

3. 설문 페이지

notion imagenotion image
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/form.css' %}">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <title>나의 개발 유형찾기</title>
</head>
<body>
    <section id="survey">
        <div class="wrapper">
            <form id="form" action="/result/" method="post">
                {% csrf_token %}
                {% for question in questions %}
                    <div class="test">
                        <div class="question_container">
                            <h3 class="number">{{ question.number }}/{{ questions.count }}</h3>
                            <h3 class="question">{{ question.content }}</h3>
                        </div>
                        <div class="answer">
                          {% for choice in question.choice_set.all %}
                            <div>
                              <input 
                                type="radio" 
                                name="question-{{ question.number }}" 
                                id="choice-{{ choice.pk }}" 
                                value="{{ choice.developer.pk }}"
                              />
                              <label for="choice-{{ choice.pk }}">{{ forloop.counter }}. {{ choice.content }}</label>
                            </div>
                          {% endfor %}
                        </div>
                        {% if not forloop.first %}
                        <div class="btn_wrap btn_sort">
                        {% else %}
                        <div class="btn_wrap">
                        {% endif %}
                        {% if not forloop.first %}
                            <button class="prev_btn">이전</button>
                        {% endif %}
                        {% if not forloop.last %}
                            <button class="next_btn">다음</button>
                        {% else %}
                            <input type="submit" value="제출" class="submit_btn"/>
                        {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </form>
        </div>
    </section>
    <script type="text/javascript" src="{% static 'js/form.js' %}"></script>
</body>
</html>
  • {% load static %} : static 태그를 사용할 수 있도록 합니다.
  • {% csrf_token %} : CSRF 보안을 위해 항상 form 태그 안에 넣어주어야 합니다.
  • 데이터들을 변수와 for, if 태그를 이용해 채워줍니다.
 

4. 결과 페이지

notion imagenotion image
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/result.css' %}">
    <title>나의 개발 유형찾기</title>
</head>
<body>
    <section id="main_contents">
        <div class="wrapper">
            <div class="result">
                <div class="titles">
                    <h3>예술적 감각이 뛰어난 당신은!</h3>
                    <h1>{{ developer.name }}</h1>
                </div>
                <div class="result_img">
                    <img src="{% static 'img/' %}{{ developer.pk }}.png" alt="frontend">
                </div>
            </div>
            <div class="result_explains">
                <div class="explain">
                    <h3 class="title">나와 맞는 개발 유형은 {{ developer.name }}?!</h3>
                    <ul>
                        <li>
                            프론트엔드는 어쩌고 저쩌고 이기 때문에 기본적으로 무엇을 그렇기 때문에 HTML,CSS를 공부하고 JS를 어쩌고 하는 것이 좋아!
                        </li>
                        <li>
                            프론트엔드는 어쩌고 저쩌고 이기 때문에 기본적으로 무엇을 그렇기 때문에 HTML,CSS를 공부하고 JS를 어쩌고 하는 것이 좋아!
                        </li>
                        <li>
                            프론트엔드는 어쩌고 저쩌고 이기 때문에 기본적으로 무엇을 그렇기 때문에 HTML,CSS를 공부하고 JS를 어쩌고 하는 것이 좋아!
                        </li>
                        <li>
                            프론트엔드는 어쩌고 저쩌고 이기 때문에 기본적으로 무엇을 그렇기 때문에 HTML,CSS를 공부하고 JS를 어쩌고 하는 것이 좋아!
                        </li>
                    </ul>
                </div>
                <div class="explain">
                    <h3 class="title">Front-end 개발자가 뭐지?</h3>
                    <ul>
                        <li>
                            프론트엔드는 어쩌고 저쩌고 이기 때문에 기본적으로 무엇을 그렇기 때문에 HTML,CSS를 공부하고 JS를 어쩌고 하는 것이 좋아!
                        </li>
                        <li>
                            프론트엔드는 어쩌고 저쩌고 이기 때문에 기본적으로 무엇을 그렇기 때문에 HTML,CSS를 공부하고 JS를 어쩌고 하는 것이 좋아!
                        </li>
                        <li>
                            프론트엔드는 어쩌고 저쩌고 이기 때문에 기본적으로 무엇을 그렇기 때문에 HTML,CSS를 공부하고 JS를 어쩌고 하는 것이 좋아!
                        </li>
                        <li>
                            프론트엔드는 어쩌고 저쩌고 이기 때문에 기본적으로 무엇을 그렇기 때문에 HTML,CSS를 공부하고 JS를 어쩌고 하는 것이 좋아!
                        </li>
                    </ul>
                </div>
                <div class="explain">
                    <h3 class="title">그래서 어떤 언어부터 공부해야 할까?</h3>
                    <ul class="language_lists">
                        <li>
                            <div class="img_wrap">
                                <img src="{% static 'img/html.png' %}" alt="html">
                            </div>
                            <h3>HTML</h3>
                        </li>
                        <li>
                            <div class="img_wrap">
                                <img src="{% static 'img/css.png' %}" alt="css">
                            </div>
                            <h3>CSS</h3>
                        </li>
                        <li>
                            <div class="img_wrap">
                                <img src="{% static 'img/js.png' %}" alt="javascript">
                            </div>
                            <h3>JavaScript</h3>
                        </li>
                    </ul>
                    <p>
                        프론트엔드는 어쩌고 저쩌고 이기 때문에 기본적으로 무엇을 그렇기 때문에 HTML,CSS를 공부하고 JS를 어쩌고 하는 것이 좋아!
                    </p>
                </div>
            </div>
            <div class="lectures">
                <h3 class="title">강의 추천</h3>                
                <p>Front-end 공부를 시작하기 좋은 강의를 추천해 드릴게요!</p>
                <ul>
                    <li>
                        <img src="{% static 'img/lec_30minutes.png' %}" alt="30분 요약강좌">
                        <h3>HTML, CSS, JS, Python 30분 요약강좌</h3>
                        <a href="https://www.inflearn.com/course/제주코딩-웹개발-30분요약" target="_blank">
                            <button type="button">강의 보러가기</button>
                        </a>
                    </li>
                    <li>
                        <img src="{% static 'img/lec_web_fullstack.png' %}" alt="코알못에서 웹서비스 런칭까지">
                        <h3>코알못에서 웹서비스 런칭까지 : 제주 코딩 베이스캠프(Django)</h3>
                        <a href="https://www.inflearn.com/course/web_fullstack" target="_blank">
                            <button type="button">강의 보러가기</button>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="buttons">
                <ul>
                    <il>
                        <h3>...이건 내가 아니야... 잘못된게 분명해!</h3>
                        <a href="/">
                            <button type="button">테스트 다시 하기</button>
                        </a>
                    </il>
                    <il>
                        <h3>다른 사람들은 어떤 유형일까?</h3>
                        <a href="#">
                            <button type="button">다른 결과 알아보기</button>
                        </a>
                    </il>
                    <il>
                        <h3>이런 테스트는 도대체 누가 만든거야? ^0^;;</h3>
                        <a href="#">
                            <button class="color" type="button">제주코딩베이스캠프</button>
                        </a>
                    </il>
                </ul>
            </div>
            <div class="weniv">
                <a href="http://www.paullab.co.kr">
                    <img src="{% static 'img/weniv_logo_purple.png' %}" alt="weniv">
                </a>
                <p>
                    ※ 본 서비스 내 이미지 및 콘텐츠의 저작권은 주식회사 위니브에 있습니다.<br>
                    수정 및 재배포, 무단 도용 시 법적인 문제가 발생할 수 있습니다.
                </p>
            </div>
        </div>
    </section>
</body>
</html>
  • {% load static %} : static 태그를 사용할 수 있도록 합니다.
  • 데이터들을 변수와 for, if 태그를 이용해 채워줍니다.