728x90
SMALL
Bootstrap이란?
HTML과 CSS 프레임워크로써, 페이지에 대한 CSS를 제공해준다.
CSS란
-> HTML과 같이 Markup Language로 web의 외관을 꾸미기 위한 언어
Bootstrap 적용
Django에서 bootstrap을 적용하는 방법은 워낙 쉽다.
아래 코드만 추가해주면 된다.
#html 파일의 <head> 부분
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
1. 적용전
2. 적용 후
아래는 bootstrap을 적용한 실제 code이다. bootstrap을 적용하면 container같은 class를 사용할 수 있다.
<!--base html-->
{% load static %}
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<title>SJ's Blog </title>
</head>
<body >
<div class= "page-header">
<h1><a href="/"> SangJeong's Blog </a></h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% block content %} <!--HTML 내에 들어갈 공간 block 을 만드는 것-->
{% endblock %}
</div>
</div>
</div>
<hr/>
<div class="page-footer">
<a href=""></a>
</div>
</body>
</html>
하지만 위에서 사용한 bootstrap 외에도 자신이 직접 디자인을 넣고 싶을 수 있다.
이 때, 사용하는 파일이 CSS파일이며 class나 id에 직접적으로 디자인을 입힐 수 있다.
정적 파일
static file이란?
요청 내용에 따라 바뀌는 것이 아니고 모든 사용자들이 동일한 내용을 보는 파일이다.
ex)css, image
Django 정적파일 위치
-> 정적파일은 application 폴더 아래 static이라는 폴더를 생성해주면 된다.
그리고 CSS파일을 사용하기 위해서 static 폴더 아래에 CSS폴더를 생성해준다.
마지막으로 blog.css를 생성해준다.
위의 사진을 보면 쉽게 이해할 것으로 생각한다.
이제 css파일에서 원하는 디자인을 추가해주면 된다. 디자인을 하는 곳은 포스팅하지 않겠다.
그리고 최종적으로 CSS파일을 사용하기 위해서, 사용하고자 하는 파일의 head부분에 link를 선언해주고 가장 상단에 load static을 선언해야 한다.
{% load static %}
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<title>SJ's Blog </title>
</head>
</html>참고로 css link는 bootstrap 선언 아래에 해야한다고 한다.
Bootstrap code를 무시할 수 있다고 한다.( 원인은 모르겠어용)
LIST
'Web > django' 카테고리의 다른 글
| (Django) first project 9 - post show page 만들기 (0) | 2020.08.14 |
|---|---|
| (Django) first project8 - template 확장 (0) | 2020.08.14 |
| (Django) first project6 - Model , view, template 데이터 전달 (0) | 2020.08.13 |
| (Django) ORM과 QuerySets (0) | 2020.08.13 |
| (Django) first project5 - Template (0) | 2020.08.12 |
