Django로 Pinterest 따라만들기 : 섹션 1. Django Tutorial (11 ~ 13강)

#11 Static 설정 및 CSS 파일 분리

• css 파일 : 디자인 파일만 분리한 것 (html의 뼈대만 남겨두고 따로 빼서 관리함)
• 이전강의까지는 이를 style=로 직접 html 파일 안에 넣어줬었음

 

분리하기 전에 Static 설정 필요

pragmatic>settings.py 에서 STATIC_ROOT 설정해주기

STATIC_ROOT=os.path.join(BASE_DIR,'staticfiles')

static dir을 설정해줘서 app에 종속되어있지 않은 다른 static 파일들도 관리 가능

 

 

head.html 수정

{% load static %}

을 head.html에 추가해주기

⇒ static 파일을 사용할 수 있도록..

<link rel="stylesheet" type="text/css" href="{% static 'base.css' %}">

어느 파일에서 불러올 건지 css link도 추가해줌

 

 

base.css 에 style 추가

class 이름 설정해주고

base.css에서 class에 들어갈 내용 넣어주기

.class 이름{

style 내용

}

 

개발자모드에서 확인해보면 style에 들어있던 값이 .pragmatic_footer_logo로 잘 적용된 것 볼 수있음

 

 

---

 

 

#12 CSS 간단 핵심

Cascading Style Sheet : html을 스타일링 하기 위한 스타일 묶음

 

DISPLAY 속성

• Block

        부모의 최대 높이(?)를 가져옴

 

• Inline 

       말 그대로 줄 안에 글씨가 들어가있으면 그 글씨의 높이만큼만 가져옴

• Inline-block

       inline인데 block 처럼 쌓이는

• None

        있긴 있는데 시각화되는 과정에서 아무것도 X

 

 

 

Visibility 속성

Hidden

none과 비교했을 때, display none은 아예 그게 없는 것 처럼 반응하나,

hidden의 경우, 화면상에서 안보이지만 존재하는 것 (위치를 차지함)

 

Size

크기 : responsive ⇒ 반응형으로 만들기 위해서는 크기가 어떻게 변하는지에 따라 통제력을 가지고 있어야함.

• px: child의 가로 세로 너비가 100x100px 이라면 부모가 어떻게 변하든 상관없이 무조건 크기 고정
• em :부모의 폰트 사이즈가 크고 작아지는 대로 따라감/. 부모가 1.5배면 child도 1.5 배가 됨.
  • 근데 부모가 여러개인 경우 (중첩된 경우)는 관리하기 어려워서 X  
  • ex) 만약 위위의 부모가 2배, 위의 부모가 2배가 된 경우 자식은 4배가 됨..
• rem : 가장 많은 곳에 사용하게 될 것

        ( HTML에 기본적용 되는 폰트 크기 : 16px 즉, 1rem = 16px)

        부모가 있고 자식이 있으면 root HTML에 기본적으로 적용된 폰트 값을 기준으로 하여 바로 위의 부모가 커지든 작아          지든 가만히 있으나, 그 폰트 값이 변화되면 그 변화를 따라감 ( 즉, 반응형으로 만들기 쉬움~)

• %

 

 

 

---

 

#13 CSS display 속성, rem 단위 실습

 

12강에서 배운 속성 내용들을 실습

이런식으로 css 파일 대신 html 파일 내에서도 class 생성 및 선언 가능

 

즉, style을 설정해주는 방법은

1. 태그 내에서 style=로 선언해주기
2. 해당하는 html 파일에서 <style> 따로 분리해서 적어주기
3. 따로 css 파일로 분리해서 관리하기

 

가 있으며, 적용되는 순서는 1→2→3임.

<div class="testing" style="display:block">block</div>
<div class="testing" style="display:inline">inline</div>
<div class="testing" style="display:inline-block">inline=block</div>
<div class="testing">default</div>

위와 같이 적용하면 아래처럼 !

• div 의 default 는 block으로 적용됨

       ⇒ block 을 여러개 쌓으면 width를 다 가져가기 때문에 수직으로 쌓임

       ⇒ inline을 여러개 쌓으면 해당하는 줄만큼만 가져가기 때문에 옆으로 쌓임

• span의 default는 inline

 

 

!실습 코드라 커밋하기 싫을 때!

$ git reset --hard HEAD

해서 마지막 커밋 올리기 전 상태로 되돌아가기

 

 

---

 

박홍석님의 인프런 강의를 수강하며 정리해보는 글입니다.

https://www.inflearn.com/course/%EC%9E%A5%EA%B3%A0-%ED%95%80%ED%84%B0%EB%A0%88%EC%8A%A4%ED%8A%B8

작정하고 장고! Django로 Pinterest 따라만들기 : 바닥부터 배포까지 강의 - 인프런