지난번에는 view에 대해서 설명했습니다.
사실은 view는 파고들면 설명할 것들이 너무 많아서 더 자세한 것은 나중에 설명하고.
일단 template, 즉 html을 만들어서 기존에 작성해 놓은 index view에서 렌더링 하도록 하겠습니다.
html은 마크업 랭기지로.. 블라블라 거두절미하고 그냥 만들겠습니다.
폴더 구조는 저를 따라오시는게 편할 것이기 때문에 폴더 구조부터 보여드리겠습니다.
1.폴더 구조 및 파일 만들기
다음처럼 app_main 밑에 폴더를 추가할 것입니다.
1. templates -> html을 둘 용도
2. static -> css , js 등의 파일을 둘 용도(html을 보다 화려하게 만들어 줄 친구들)
3.static 밑에 css폴더 만들기.
폴더를 만들었으면 html과 css를 만들 것입니다.
1. templates 폴더 밑에 base.html을 만들기
2. css 폴더 밑에 "base.css" 만들기
2. static 사용 전에 settings 설정
static은 쉽게 html에 사용될 리소스들을 모아둔 그룹이라고 생각하시면 되는데
이를 쉽게 사용하기 위해서 settings에서 (경로)설정을 해줘야합니다.
project 폴더로 이동해서 settings.py를 찾아봅니다.
(저는 config-> settings.py)
STATIC_URL = '/static/'이 부분이 있을 겁니다. 해당부분을 다음과 같이 변경해주십쇼
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')3. html에 css 파일 연결
css파일이 뭐고 html이 뭐냐...라고 궁금하실 수 있는데요
html은 페이지에서 구역의 위치나 크기 등을 정하고 글씨를 넣는 곳이면
css는 그 구역의 테두리, 배경색등을 정하고 글씨 크기, 색을 정할 수 있는 것입니다.
그래서 html에 css주소를 연결해 놓고 css에 html에서 사용하는 태그 등에 대한 디자인 정의를 해두는 것이죠.
base.html
<!DOCTYPE html>
<html lang="ko">
{% load static %}
<head>
<link rel="stylesheet" href="{% static 'css/base.css' %}">
{% block header %}
{% endblock %}
<title> CSS 레이아웃 테스트</title>
</head>
<body>
<section id="header">
<div class="wrapper">
<div class="header_title">
<li class="bugger area">
</li>
</div>
<div class="header_icon">
HOKlNG
</div>
<div class="profile">Log In</div>
</div>
</section>
<div class="container">
<section class="item section-a">
<h1> Section a</h1>
<p>
나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 영광을 위하여 충성을 다할 것을 굳게 다짐합니다
</p>
</section>
</div>
{% block contents %}
{% endblock %}
</body>
</html>base.css
body {
margin:0;
}
h2, p{
margin:0;
}
#header{
font-weight: bold;
background-color: #FF8C0A;
font-size: 15px;
color: white;
}
.wrapper{
width: 100%;
min-height: 65px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header_icon{
display: flex;
margin: 0 auto;
list-style:none;
}
.header_list li{
margin-right: 4%;
}
.header_title{
font-size: 30px;
margin-left: 30px;
}
.profile{
margin-right: 3%;
}
.container {
}
.item {
padding: 5%;
}
.section-a {
background-color: yellow;
}이런식으로 구성하면
html에서 head > link에 href 부분을 보면 css/base.css 라는 부분을 볼 수 있습니다. 아까 settings에서 경로를 설정해 두었기 때문에 base.css가 바로 적용됩니다.
해당 내용을 view에 실행해보면 다음과 같은 화면이 나옵니다.
views.py -> index
def index(request):
return render(request,'base.html')
