9. include/ extends/ block 구문을 이용한 뼈대 html 만들기

뼈대 만들기

1. head.html 만들기
2. < div>태그 사용
3. < div style = "height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem">
4. footer header 파일 추가
5. {% block content %}
   {% endblock %} 추가
6. accountapp 안에 templates파일 만들고 그 안에 hello_world.html 만들기

alt + 커서로 다중커서 이용가능

---

10. style, 구글 폰트를 통해 Header, Footer 꾸미기

1. header랑 footer 수정
2. bootstrap 링크 삽입
3. 구글폰트 사용

---

11. Static 설정 및 CSS 파일 분리

setting에 STATIC_ROOT, STATICFILES_DIRS 추가(static 사용 위해)
static 만들고 base.css 파일 추가
footer에서 class 적용

---

12. CSS 간단 핵심

CSS

Cascading
Style
Ssheet

display 속성

Block

Inline

Inline-block

None

Visibility 속성

Hidden

Size 단위

px: 부모랑 상관없음
em: 부모에 비례. 부모가 여럿 있으면 모든 부모에 비례해서 불편.
rem: 부모랑 상관없음. HTML에 기본적으로 적용된 size값에 따라감.
%

사이트를 반응형으로 만들어야 하기에 중요