20210817 장고 핀터레스트 12강 ~13강

<12강> CSS 간단핵심

HTML을 꾸미기 위한 디자인 언어묶음이라 생각하자
ESSENTIALS 

Display
- block 모든 태그에는 부모가 존재한다. 부모의 최대한의 넓이를 가져간다.
높이는 따로 설정을 하지않는 이상 기본적인 설정값에 맞춘다.

- inline 글씨가 들어가있으면 글씨의 높이만큼만 한줄내의 일정 부분만 가져간다. 

- inline-block 블로인데도 불구하고 인라인처럼 안쪽에 오른쪽으로 쌓인다.

- None 아무것도 없는 것 

visibility
- hidden parent가 있고 child 1,2가 있을때 차일드 2가 히든이라면 안보인다.

size
Responsive 반응형으로 사이트를 만들어야한다. 
웹사이트에서 볼수도있고, 모바일에서도 볼수 있다. 크기에대한 통제력을 가지고 있어야한다.

related to font size
-px : width 100px x height 100px 픽셀로 고정.
-em : 부모가 커지면 차일드가 따라간다 (부모가 여러개 있을 때, 부모 2개가 프론트 사이즈가 커지면, 차일드는 4배가 된다.)
-rem : 페런트와 차일드가 있다면 어디서든 html문서자체가 존재할건데 루트 html 폰트사이즈가 존재하고,
부모가 커지든 작아지든 가만히 있는다, 루트 html이 16에서 24로 올라가면 부모는 따라간다.
-% :바로 부모위의 크기만 받는다 . 

 

---

<13강> CSS display 속성, rem 단위 실습

html태그에서 바로 적용하는 스타일이 제일 적용순위가 빠르다
    <div style=""></div>
2순위
    <style>
        .testing {
            background-color: white:
        }


    </style>
3순위 
따로css파일에서 불러오는것을 3순위로한다.

div는 블럭 같은것 
    <div class="testing" style="display: block;">block</div>
    <div class="testing" style="display: inline;">inline</div>
        <div class="testing" style="display: inline;">inline</div> 옆으로쌓임 
        <div class="testing" style="display: inline;">inline</div>
        <div class="testing" style="display: inline;">inline</div>
    <div class="testing" style="display: None;">None</div>
    <div class="testing" style="display: inline-block;">inline-block</div>
    <div class="testing" >default</div>
   <span style="height: 3rem; width: 3rem;"> test </span> 
   내가생각한대로 크기가 안된다면 디스플레이설정을 보고 수정
   
  

---

git 이전 실습한것으로 넘어가는 명령어