지금까지 기능을 구현할 때... 디자인적 요소는 하나도 고려하지 않았다!
테두리 정도만 지정해줬는데, 이도 html상에 적어줬을 뿐!
물론 이렇게 해도 되지만... 모든 CSS속성을 html에 적어주면 코드가 한도끝도 없이 길어질테다.
그렇기 때문에 디자인을 담당할, CSS 파일을 따로 만들어주도록 하자.
우선 CSS파일을 만들어야한다. 어디에?
이전 미디어 파일을 다룰 때 만들었던 static폴더 - CSS라는 폴더 만들기 - CSS파일 작성 ← 이렇게!
즉 이런 식으로 만들면 된다는 말씀.
우선 가장 큰 틀, 즉 base.html에 해당하는 CSS파일을 만들어볼 예정.
이를 위해 base.html로 이동!
static을 사용하기 위해, 해당 html상에 {% load static %}을 반드시 붙여줘야한다!
이후 head태그 안에 일반적인 CSS파일을 연결하듯 하면 되는데...
href에는 django 탬플릿 태그를 이용해 적어주면 된다!
이전에는 html에서 body태그 안에다 style속성을 지정해줬다면...
이제는 이 CSS파일에 적어주면 된다! 참으로 깔끔해지겠군.
현재 블로그 페이지의 상태를 보자.
커다란 페이지 상에... 우리가 400*300으로 지정해준 크기만 덩그러니 남아있다.
실제 배포를 완료하면 이를 PC, 모바일 등 다양한 환경에서 구현할테다.
그런데 이들은? 각각 다른 크기와 접근 방법을 가지고 있다! (당장 모바일만해도 종류가 얼마인가)
이 모든 환경에 맞춰서 url을 만드는 건... 말도 안되는 일.
그렇기 때문에 우리는 반응형 웹을 이용한다.
즉 객체의 크기를 정해두는 것이 아니라, 화면 크기의 변화에 따라 상대적으로 변하게 하는 것!
이를 위해 크기를 px과 같은 고정 값이 아니라, em 또는 %로 나타낸다.
너비를 100%로 해주면?
어라라. 분명 100%인데, 왼쪽과 위쪽 공간에 약간의 틈이 보인다.
이는 각 객체가 가지고 있는 margin과 padding의 기본값 때문!
따라서 이렇게 설정해주면....
화면에 꽉 찰 뿐만 아니라, 임의로 브라우저의 크기를 줄이면 자동으로 선이 늘었다가 줄었다가 한다!
너비를 100%로 하면 보기가 너무 이상하니...
너비 50%에 브라우저 가운데 정렬을 시켜주자!
그럼 이렇게 된다.
다음은 CSS 상속.
현재 우리는 base.html을 상속해 각 페이지에 사용하고 있다.
이제는 CSS파일도 마찬가지! 상속 기능을 이용해보자.
link부분을 block extrahead로 감싸주자!
상속 받을 home.html에는 이렇게!(물론 home.css도 만들어줬다)
이때 block.super로 상위 block을 상속받은 것.
'source-code > Django' 카테고리의 다른 글
| Django REST Framework 맛보기 (0) | 2021.01.19 |
|---|---|
| PNU Quiz App _ django로 퀴즈 구현하기 (3) | 2021.01.15 |
| Blogs App _ 좋아요 기능 (0) | 2021.01.10 |
| Blogs App _ 동적 페이지 만들기 (0) | 2021.01.08 |
| Blogs App _ 인증 기능 with 사용자 지정 (0) | 2021.01.07 |
