CSS 정리

<div>

(division: 나누기)

아무런 의미 없이 디자인 목적으로 사용하는 태그

block level element 이기 때문에 화면 전체를 사용(개행이 된다.)

 

<span>

inline element 이기 때문에 화면 일부분만 사용(개행이 안된다.)

 

 

display: grid;

grid-template-columns: 150px 1fr;      

->첫번째 컬럼은 150픽셀의 부피를 가지고, 두번째 컬럼은 나머지 공간을 다 쓴다.

첫번째 div는 150으로 고정되어 창 크기를 움직여도 변하지 않고

두번째 div (1fr)가 움직이며 조절됨.

 

----------------------------------------------------------------------------------------------------------------------------------

[미디어 쿼리]

 

@media(min-width:800px) {

    div{

        display: none;

     }

}

-> 화면의 폭이 최소 800px/ 800px보다 화면이 크다면 div 태그가 동작(div태그 부분이 화면에서 사라짐)

 

max-width: 800px

-> 스크린의 크기가 800px보다 작다