템플릿 여러개 + CSS/JS 여러개 적용하기
고정된 헤드(메뉴바) : base.html & base.css & base.js
로그인 : signin.html & signin.css
회원가입 : signup.html & signup.css & signup.js
- static파일들(css/js/img) 적용
(프로젝트의) settings.py 에서 경로
import os
STATIC_URL = 'static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
- 이미지 삽입하려면 이거 꼭 필수
(프로젝트의) urls.py에서 경로
from django.conf.urls.static import static
from django.conf import settings
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
- 각 파일
base.html
<!DOCTYPE html>
{% load static %} # css/js파일 적용하려면 필수
<html lang="en">
<head>
<link rel="stylesheet" href="{% static '/css/base.css' %}">
# 다음 html에 적용할 css 파일 경로 넣는 곳
{% block static %} {% endblock %}
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="/static/img/titlelogo.png" rel="shortcut icon" type="image/x-icon">
<title>{% block title %}{% endblock %} | liflix</title>
</head>
<body>
헤더(상단메뉴고정부분)
{% block content %} -> 헤더 밑에 바뀌는 부분이 오는 곳
{% endblock %}
#base.html에 적용될 자바스크립트 경로
<script type="text/javascript" src="{% static '/js/base.js' %}"></script>
# 다음 html에 적용할 js 파일 경로 넣는 곳
{% block js %}
{% endblock %}
</body>
</html>회원가입(signup) 페이지에 적용
#base.html 상속받기 위해 꼭 쓰기 (base.html에 연결되어 있는 css/js까지 같이 상속)
{% extends 'base.html' %}
#얘도 꼭 넣기 안 넣으면 css/js 적용 안 됨
{% load static %}
#base.html에 넣어두었던 곳 사이에 signup.html에 적용할 css파일 경로 끼워넣기
{% block static %}
<link rel="stylesheet" href="{% static '/css/signin.css' %}">
{% endblock %}
{% block title %}
SignIn
{% endblock %}
{% block content %}
헤더 밑에 바뀌는 부분 오는 곳
{% endblock %}
#signup.html에 적용될 js파일 경로 끼워넣기
{% block js %}
<script type="text/javascript" src="{% static '/js/signup.js' %}"></script>
{% endblock %}- 될지 안될지 장담 못함
-
이미지반영 안 될 때 이미지파일 전체 경로 써주기
background-image: url("/static/img/profile_default.jpg"); -
css 변경했는데 반영 안 될 때
쿠키삭제 후 새로고침
그래도 안 됐을 땐 css 잘못됐을 경우가 거의다...ㅎ
오늘 점심 뭐 먹지