프로젝트 밑에 templates폴더를 만들고 base.html을 만듭니다.
어느페이지를 가든 기본적으로 적용되는 html입니다.
load static로 이미지파일을 로딩합니다.
base.html에서는 부트스트랩을 사용하였습니다.
상단바와 풋터(페이지 하단)를 구현하였습니다.
웹 어플리케이션 한증막.GG의 모든 html들은 페이지의 가로를 12개의 영역으로 나누는 부트스트랩의 격자 체계에 기반하여 디자인했다. 전체적인 디자인 컨셉은 블랙 테마+옐로의 투 컬러.
▶ home.html
-
비록 이번 프로젝트에서는 구현하지 못했지만 현재 진행중인 할인과 사용자 정보 등에 기반한 추천 시스템이 구현됐을 때 활용할 수 있는 카드 앨범을 배치.
-
기타 한증막.GG에 사용된 html들
-
요소들의 횡적 배치는 부트스트랩의 격자 체계에 기반하여 공간을 나눈 뒤 필요에 따라 배치.
-
요소들의 종적 배치는 <div>를 통한 구분이나 <table>을 최대한 활용하여 원하는 형태에 가깝게 표현하고자 노력했다.
-
각 페이지에서의 적합한 디자인을 고려하여 사이드바(대시보드)를 활용.
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>한증막.GG - Welcome</title>
<!--부트스트랩 css를 call-->
<link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'bootstrap/css/navbar-top-fixed.css' %}" rel="stylesheet">
<!--footer 등의 아이콘을 쓰기 위한 call-->
<link href="{% static 'fontawesomefree/css/all.css'%}" rel="stylesheet">
<!-- detail.html 실행을 위해 꼭 있어야 하는 세가지 코드 -->
<!-- static폴더에 popper.min.js 옮겨놓고 -->
<!-- 터미널에서 python manage.py collectstatic 실행해줘야함 -->
<script src="{% static 'jquery/jquery-3.5.1.min.js'%}"></script>
<script src="{% static 'popper/popper.min.js'%}"></script>
<script src="{% static 'bootstrap/js/bootstrap.js'%}"></script>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
table {border-collapse: collapse;}
td {border-bottom: 5px solid #202020; }
</style>
</head>
<body style="background-color: #202020; color: #ffffff">
<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #000000">
<a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'images/hjmlogo.jpg' %}" class="d-block w-100" alt="..."></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'game:list' %}">게임 목록</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'board:list' %}">커뮤니티</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'support:list' %}">지원</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="/admin">관리</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="{% url 'game:create' %}">게임 등록</a>
</li>
</ul>
{% if not user.is_authenticated %}
<ul class='nav navbar-nav navbar-right'>
<a class="btn btn-warning my-2 my-sm-0" href = '/accounts/login' style="font-weight: bold">로그인</a>
</ul>
<ul class='nav navbar-nav navbar-right'>
<a class="btn btn-outline-warning my-2 my-sm-0" href = '/accounts/join'>회원가입</a>
</ul>
{% else %}
<ul class='nav navbar-nav navbar-right'>
<a class="btn btn-warning my-2 my-sm-0" href='/accounts/logout' style="font-weight: bold">로그아웃</a>
</ul>
{% endif %}
</div>
</nav>
<!--각 페이지의 html에서는 base.html을 extends하고 block content 안에 표현할 내용 작성-->
{%block content%}{%endblock content%}
<!--푸터(모든 페이지 가장 아래에 깔림)-->
<footer class="container-fluid" style="background-color: #151515">
<br>
<br>
<div class='row'>
<div class="col-sm-1" style="text-align: left"></div>
<div class="col-sm-2" style="text-align: left">
<h5 style="color: #ffffff">한증막.GG</h5>
<br>
<p style="color: #FFC107">최저가 비교 사이트</p>
</div>
<div class="col-sm-2" style="text-align: left">
<h5 style="color: #ffffff">내비게이션</h5>
<br>
<a href="{% url 'game:list' %}" style="color: #FFC107">게임 목록</a><br>
<a href="{% url 'board:list' %}" style="color: #FFC107">커뮤니티</a><br>
<a href="{% url 'support:list' %}" style="color: #FFC107">지원</a><br>
</div>
<div class="col-sm-2" style="text-align: left">
<h5 style="color: #ffffff">제작 정보</h5>
<br>
<p style="color: #FFC107"> 분석반 1조</p>
<P style="color: #FFC107">A,B,C,D</P>
</div>
<div class="col-sm-1" style="text-align: left"></div>
<div class="col-sm-3" style="text-align: left">
<a href="https://www.facebook.com/"><i class="fab fa-facebook-f fa-2x" style="color: #FFC107" href="#"></i></a>
<a href="https://twitter.com/"><i class="fab fa-twitter fa-2x" style="color: #FFC107" href="#"></i></a>
<a href="https://www.youtube.com/"><i class="fab fa-youtube fa-2x" style="color: #FFC107" href="#"></i></a>
<a href="https://www.twitch.tv/"><i class="fab fa-twitch fa-2x" style="color: #FFC107"></i></a>
</div>
<div class="col-sm-1" style="text-align: left"></div>
</div>
<br>
<br>
</footer>
<footer class="container-fluid" style="background-color: #000000">
<br>
<div class='row'>
<div class="col-sm-1" style="text-align: left"></div>
<div class="col-sm-11" style="text-align: left">
<p style="color: #ffffff">Copyright ⓒ 2020 분석반 1조. All Rights Reserved.</p>
</div>
</div>
</footer>
</body>
</html>728x90
반응형
'자격증 & 문제풀이 > Django-Project' 카테고리의 다른 글
| [Django] Game Update와 Delete (0) | 2020.07.19 |
|---|---|
| [Django] Game Model과 Game 등록(create) (0) | 2020.07.19 |
| [Django] Home.html (0) | 2020.07.19 |
| [Django] 한증막.GG 사이트 설명 (0) | 2020.07.19 |
| [Django] 한증막.GG는 무엇인가 (0) | 2020.07.19 |