[CSS] 반응형 미디어 쿼리 - 유튜브 강좌 정리(디자인베이스)

https://www.youtube.com/watch?v=dtBNnijA1QU 

 

vw, %와는 다른것
% 는 상위개념의 패딩값까지 다 포함한 기준으로 
vw는 패딩무시하고 뷰포트 기준으로 따짐

 

---

미디어쿼리
*진짜 많이 쪼개는데는 이렇게
1920~1080 (중간에 1440 분기)
1024~1078
태블릿,
모바일

보통은 아래로 나눔
* PC, 태블릿, 모바일
* PC, 모바일
(구분되는 것을 분기, 브레이크 포인트)

최대폭이 768일때 실행
@media screen and (max-width:768px) {
}

@media screen and (max-width:480px) {
}

 

---

반응형작성시 분기점에서 flex-directionLcolumn; 으로 설정하면 아래로 떨어뜨리게 할 수 있다.

이때 item인 .col은 width:100%로 주면 해당 분기점에서 가득차서 적용된다.