CSS(4) - Responsive Web Design

2023.01.07. Responsive Web Design
https://www.youtube.com/watch?v=8-uJ_4136uI
위 링크를 통해 공부함.

반응형 웹 디자인을 위해서 알아야 할 것들이 있음.

-> Flex grid, Felx box, px, %, vw, vh

Media Queries : 웹 창을 커서로 줄이며 조정할 때에 어느정도 포인트에 도달하면 레이아웃이 재배치 되는 것 구현할 수 있음. 어디까지 데스크탑, 태블릿, 모바일로 보여줄 건지 정해줄 수 있음.

/
mobile : 320px ~ 480px
tablet : 768px ~ 1024px
desktop : 1024px~
/

위를 구현 :

@media screen and (min-width: 800px) {
   .container {
   width: 50%;
   }
}

적어도 800px 이상에서만 컨테이너가 50%를 차지하게 해달라.

screen 말고도 speech, print, all 로 나눠서 이용
and 이란 문법은 not, only, ,(comma)를 이용해서 작성 가능.

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

위 사이트에서 문법과 예제 자세히 확인 가능.