🙌 이전 포스팅 참고
📜 static(css,js)과 연동하는법을 알아보자.
📕 준비
📖 필요한 작업
- app 폴더에 static 폴더 생성
- 계층적으로 폴더를 생성하는게 좋다
- 예 : app/static/image_data/
- 하지만, 나중에 웹 앱을 여러개 만들경우 앱 폴더명과 동일하게 하는게 좋음
- static 폴더 인식을 위한 setting.py 수정
STATIC_URL = '/static/'
# 새로 추가한 부분 (static 파일을 인식하기위해 경로를 추가해주었음.)
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]- 사용할 HTML 파일 맨위에
{% load static %}코드를 추가
- static 파일을 HTML에 표시하기 위해 필요함.
{% load static %}
<!DOCTYPE html>
<html lang="en">
...📕 예제
메인페이지에 강아진 사진을 보여보자!
📖 static 사용하기
사용하는 법
- 지정된 양식으로 static 파일 사용 (이전 포스팅 url 지정시와 동일)
- "{% static 'static 경로' %}"
<img src="{% static 'image_data/image1' %}" alt="image1">📖 변경사항
파일 경로 : app/templates/main_page.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>메인 페이지</title>
</head>
<body>
<p>안녕하세요 메인페이지 입니다.</p>
<hr>
<p>현재시각 : {{now}}</p>
<a href="{% url 'login_page' %}">Sign in</a>
<br/>
<a href="{% url 'signup_page' %}"><button>Sign up</button></a>
<p>사진 보여주기 예시</p>
<img src="{% static 'image_data/image1.jpeg' %}" alt="강아지">
</body>
</html>결과확인
📕 HTML 재사용하기
HTML 코드에서 반복적으로 사용되는 부분은 재사용하는게 좋다.
재사용되는 코드 : recycle.html
- 아래에서 block에 둘러쌓인 부분이 사용자정의하는 부분
- block 명은 지정할 수 있음
- 아래에선 custom하는 부분이란 의미로 custom이라 지었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>! 내가 만들어보는 웹페이지 !</title>
</head>
<body>
{% block custom %}
{% endblock %}
</body>
</html>재사용코드 가져와 사용하는 코드 : main.html
- extends 를 통해 재사용할 HTML을 명시해준다.
- block 내부에 작성된 코드가 사용자가 정의한 코드
block 내부 = 사용자 정의 코드기억!
{% extends 'app/recycle.html' %}
{% load static %}
{% block custom %}
<p>안녕하세요 메인페이지 입니다.</p>
<hr>
<p>현재시각 : {{now}}</p>
<a href="{% url 'login_page' %}">Sign in</a>
<br/>
<a href="{% url 'signup_page' %}"><button>Sign up</button></a>
<p>사진 보여주기 예시</p>
<img src="{% static 'image_data/image1.jpeg' %}" alt="강아지">
{% endblock %}📕 HTML & Static 사용시 기억
- HTML 사용시
- settings.py 에 app 등록 필수
- static 사용시
- static 경로 지정 필요
- HTML 파일에 load static 지정
유능한 개발자가 되고 싶은 헬린이