Django 입문 css 연결

1c2·2023년 7월 24일
0

Django

목록 보기
10/12

HTML, CSS, javascript를 정적 파일이라고 한다. 규모가 커지면 정적 파일을 따로 보관한다.
장고에서는 서버와 정적파일을 따로 보관할 수 있도록 기능을 제공해준다. 기본적으로 정적 파일은 앱 내부에 디렉토리를 만들어 관리한다.
템플릿처럼 정적파일또한 polls/static 디렉토리에 직접 두게되면 다른 응용 프로그램에 같은 이름이 있는 경우 이를 구분하지 못할 것이다.
고로 namespace로 앱 이름을 가지는 디렉토리를 하나 더 생성해준다.

polls/static/polls/style.css

li a {
    color: green;
}

polls/templates/polls/index.html

{% load static %}

<link rel="stylesheet" href="{% static 'polls/style.css' %}">

html에서 해당 코드를 추가하여 css를 로드하자

static 디렉토리에 images디렉토리를 만들고 사진을 추가하였다. 사진의 이름은 guitar_image.png
css 에 해당 이미지를 배경화면으로 사용하도록 설정하였다.

polls/statics/polls/style.css

body {
    background: white url("images/guitar_image.png") no-repeat;
}
정상적으로 설정한 배경화면이 적용된 것을 확인할 수 있다.

0개의 댓글