CSS - 예쁘게 만들기

이제 눈에 보기 좋게 예쁘게 만들어 볼 시간이에요. CSS를 사용해 만들어볼 거에요.

CSS는 무엇인가요?

CSS(Cascading Style Sheets)는 HTML와 같이 마크업언어(Markup Language)로 작성된 웹사이트의 외관을 꾸미기 위해 사용되는 언어입니다.

부트스트랩을 사용해봐요!

부트스트랩(Bootstrap)은 유명한 HTML과 CSS프레임워크로 예쁜 웹사이트를 만들 수 있습니다. :

https://getbootstrap.com/⁠

⁠

부트스트랩 설치하기

부트스트랩을 설치하려면, .html파일 내 <head>에 이 링크를 넣어야 합니다.

blog/templates/blog/post_list.html

이 링크는 프로젝트에 새 파일을 추가하는 게 아니에요. 인터넷에 있는 파일을 연결하는 거죠.

이제 웹사이트를 열어 새로고침 버튼을 눌러보세요.

⁠

(보기 좋아졌죠?)

정적 파일

마지막으로 정적 파일(static files) 을 다뤄볼 거에요.

정적 파일은 CSS와 이미지 파일에 해당합니다.

이 컨텐츠는 요청 내용에 따라 바뀌는 것이 아니기 때문에 모든 사용자들이 동일한 내용을 볼 수 있어요.

정적 파일은 어디에 넣어야 하나요?

서버에서 collectstatic를 실행할 때 처럼, 장고는 "admin"앱에서 정적 파일을 어디서 찾아야하는지 이미 알고 있어요. 이제 "blog"앱에 정적파일을 추가하면 됩니다.

"blog"앱 안에 static라는 새 폴더를 만드세요.

djangogirls

├── blog

│ ├── migrations

│ ├── static

│ ├── templates

├── mysite

(디렉토리는 다음과 같을거에요 :) )

장고는 app 폴더 안에 있는 static폴더를 자동으로 찾을 수 있어요. 이 컨텐츠를 정적 파일로 사용하게 되는 것입니다.

나의 첫 번째 CSS 파일!

CSS파일을 만들어 나만의 스타일을 가진 웹페이지를 만들어봐요. static디렉토리 안에 css라고 새로운 디렉토리를 만드세요. 그리고 css디렉토리 안에 blog.css라는 파일을 만드세요.

static디렉토리 안에 css 라고 하는 새로운 디렉토리 만들기

css디렉토리 안에 blog.css라는 파일을 만들기

djangogirls

└─── blog

└─── static

└─── css

└─── blog.css

(디렉토리가 다음과 같아야 해요!)

CSS를 쓸 차례예요! 코드 에디터에서 blog/static/css/blog.css파일을 열어보세요.

CSS는 꽤 쉽고 워크샵 후에도 스스로 배울 수 있기 때문에 CSS에 대해 깊이 살펴보지는 않을 거에요.

제목 색상을 바꿔볼까요? 컴퓨터는 특별한 코드를 사용해 색상을 나타내요. #으로 시작해 알파벳(A-F)와 숫자(0-9) 중 6개를 조합해 헥사코드(hexacode)로 나타냅니다. 이 곳에서 원하는 색상 코드를 찾을 수 있어요.

https://www.colorpicker.com/⁠

또는 빨간색(red) 또는 녹색(green) 등

미리 명시된 색상⁠

을 사용할 수 있어요.

blog/static/css/blog.css 파일에 아래 코드를 추가하세요.

blog/static/css/blog.css

h1 a {

color: #FCA205;

}

h1 a는 CSS 셀렉터(Selector)라고 합니다. h1요소 안에 어떠한 a요소를 넣어 스타일을 적용 할 수 있다는 거죠.

예를 들어 <h1><a href="">link</a></h1> 라면, 오렌지색 #FCA205으로 바꿀 수 있어요.

내가 원하는 다른 색상을 지정해도 되요!

CSS 파일에서는 HTML 파일에 있는 각 요소들에 스타일을 정의할 수 있어요.

요소를 식별하는 첫 번째 방법은 요소 이름을 사용하는 것입니다. HTML 섹션에서 태그로 기억할 수 있습니다.

a,h1,body와 같은 것은 모두 요소 이름의 예입니다.

class 속성이나 id 속성에 의해 요소를 식별합니다.

클래스와 ID는 요소에 직접 부여한 이름이에요.

클래스는 요소 그룹을 정의하고 ID는 특정 요소를 가리킵니다.

아래 코드와 같이 태그 이름은 a, 클래스는 external_link 또는 ID는 link_to_wiki_page로 사용하여 태그를 통해 요소를 식별할 수 있습니다.

이제 CSS를 HTML에 추가해봅시다.

templates/blog/post_list.html 파일을 열고 맨 처음 줄에 이 라인을 추가하세요.

blog/templates/blog/post_list.html

{% load static %}

여기에서 정적 파일을 로딩하는 거에요.

다음 <head>와 </head> 사이에 부트스트랩 CSS파일 링크 다음에 아래 코드를 추가하세요.

blog/templates/blog/post_list.html

브라우저는 주어진 순서대로 파일을 읽으므로 파일이 올바른 위치에 있는지 확인해야합니다.

그렇지 않으면 파일 코드가 부트 스트랩 파일의 코드를 무시할 수 있습니다.

이제까지 CSS파일이 있는 템플릿에 대해 알아보았어요.

코드는 아래와 같아야 해요.

blog/templates/blog/post_list.html

{% load static %}

<html>

<head>

<title>Django Girls blog</title>

</head>

<body>

<div>

<h1><a href="/">Django Girls Blog</a></h1>

</div>

{% for post in posts %}

<div>

<p>published: {{ post.published_date }}</p>

<h1><a href="">{{ post.title }}</a></h1>

<p>{{ post.text|linebreaksbr }}</p>

</div>

{% endfor %}

</body>

</html>

이제 파일을 저장하고 새로고침을 해보세요!

⁠

웹사이트 왼쪽 여백을 좀더 주고 싶지 않나요? 한번 해봐요!

blog/static/css/blog.css

body {

padding-left: 15px;

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.