media query
Mobile: 320-480px
tablet: 768-1024px
desktop: 1024px~
@media screen and (max-width: 768px) {
flex-direction: column;
}- 화면의 넓이가 0~768일때
flex-box로 지정해준 것이 수직으로 일렬로 나열된다.
px , em, rem
-
px은 고정값이기때문에 보통 부모 div에 width:80% 이런식으로 반응형으로 사용한다.
-
그래서 보통 em과 rem을 많이 쓴다.
-
em : 1em == 16px, 상대적인 값으로 책정하기 때문에 html의 기본값인 16px을 기준으로, 부모 글자2em일때, 자식 글자가 1em이면 부모글자크기를 기준으로 32px x 2 = 32px로 책정된다.
-
rem : em과 같이 반응형이지만, 부모를 기준으로 하는게 아닌 root(= html의 기본 폰트사이즈인 16px)를 기준으로 폰트사이트가 결정된다. 여기에서는 자식글자가 1em이어도 16px이 된다.-> 그렇기 때문에 html에서 px로 폰트사이즈를 지정해주게 되면 반응형이 안된다.
페이지 어디에서 사용해도 크기가 다 같아야하면 rem을 사용/ 박스에 들어가면 좀 더 작아지는 식으로 사이즈가 바뀌어야하면 em을 사용한다. -
부모안에서 상대적으로 크기를 조정할때는 %, em을 사용
-
부모와 상관없이 브라우저에서 크기를 조정할때는 rem, vw/vh를 사용
-
box는 %, vh/vw, flexbox, flexgrid를 사용
-
font size는 em, rem을 사용
*font size안에 padding을 넣는경우에 em을 사용하여 반응형이 되도록 한다. / rem을 사용하면 폰트사이즈에 상관없이 고정이 되기때문에 header와 p를 한상자에 같이쓰는거면 rem을 사용하면 좋다.
-> padding: 0.5em 0.5rem; 이렇게 위아래는 em으로, 좌우는 rem으로 해도 좋다.
