์ฌ์ฉ์๊ฐ ์๋ฒ๋ก๋ถํฐ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ์์ ์ ํ๋ฉด์ ๋ณด์ฌ์ง๋ ์์ ์ ๋ ๋๋ง์ด๋ผ ํ๋ค.
ํ๋ฉด์ด ๋ณด์ฌ์ง๊ธฐ ์ํด์๋ ํ๋ฉด์ ๋ทฐ๋ฅผ ๋ด๋นํ๋ html
, css
, javascript
๊ฐ ํ์ํ๋ค.
์ด ์ธ๊ฐ์ง๋ฅผ ์ฅ๊ณ ์์๋ static file
์ฆ, ์ ์ ํ์ผ์ด๋ผ๊ณ ํ๋ค.
์ฅ๊ณ ์์๋ ์๋ฒ์ static
ํ์ผ์ ๋ถ๋ฆฌํ ์ ์๋๋ก ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค.
์ฌ๊ธฐ์๋ static ํ์ผ์ด ๋ถ๋ฆฌ๊ฐ ๊ฐ๋ฅํ๊ตฌ๋ ์ ๋๋ง ์๊ณ ๋์ด๊ฐ์!
static
ํ์ผ์ ๊ธฐ๋ณธ์์น๋ ์ฑ(polls)
๋ด๋ถ์ static
๋๋ ํ ๋ฆฌ๋ฅผ ๋ง๋ค์ด ๊ด๋ฆฌ๋ฅผ ํด์ค์ผํ๋ฉฐ,
์ด๋ ๋ค๋ฅธ ์ฑ์์ ์ด๋ฆ์ด ์ค๋ณต๋๋ ๊ฒฝ์ฐ๊ฐ ์๊ธฐ ๋๋ฌธ์ ์ฑ ์ด๋ฆ์ผ๋ก namespace
๋ฅผ ๋ช
์ํด์ฃผ๊ธฐ ์ํด ์ฑ์ด๋ฆ์ ๊ฐ๋ ๋๋ ํ ๋ฆฌ๋ฅผ ํ๋ ๋ ๋ง๋ค์ด ์ฃผ๋ ๊ฒ์ ๊ถ์ฅํ๋ค.
polls/
static/polls
style.css
static
ํ์ผ ๋ถ๋ฆฌํ๊ธฐ๋ค์๊ณผ ๊ฐ์ด static
ํด๋์ css
ํ์ผ์ ๋ง๋ค์ด ์ค๋ค.
li a {
color: green;
}
css
ํ์ผ์ ๋ง๋ค์ด์ค ๋ค, html
ํ์ผ์ css
ํ์ผ์ ์ฐ๊ฒฐ(load
)ํด์ฃผ๋ ์ฝ๋๋ฅผ ๋งจ ์์ ์ถ๊ฐํด์ค๋ค.
- polls/templates/polls/index.css
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
๊ทธ ๋ค์ ๋ง๋ค์ด์ค css
ํ์ผ์ด ์ ์ ์ฉ๋์๋์ง ํ์ธํ๊ธฐ ์ํด ์๋ฒ๋ฅผ ์ฌ์์ํด์ฃผ๋ฉด,
๋ค์๊ณผ ๊ฐ์ด ์ง๋ฌธ์ ๋งํฌ๊ฐ ๋
น์์ผ๋ก ํ์๋๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ๊ณ ์ถ๋ค๋ฉด, polls/static/polls
๋๋ ํ ๋ฆฌ ์์ image
์๋ธ ๋๋ ํ ๋ฆฌ๋ฅผ ๋ง๋ค์ด ๊ด๋ฆฌํด์ฃผ๋ฉด ๋๋ค.
polls/
static/polls/
image/
background.gif
์ด๋ฏธ์ง ํ์ผ์ ๋ฃ์ ๋ค polls/static/polls/style.css
์ ๋ค์ ์ฝ๋๋ฅผ ์ถ๊ฐํด์ค๋ค.
- polls/static/polls/style.css
body {
background: white url("images/background.gif") no-repeat;
}
๐ ์ฐธ๊ณ
๋์ฅ๊ณ ๊ณต์๋ฌธ์
๋์ฅ๊ณ ๊ณต์๋ฌธ์ ๊ฐ์์๋ฃ