반응형 웹 with Media Queries(학습 50일차 TIL)

210824 오늘은 반응형 웹의 레이아웃을 잡아주는 Media Queries에 대해 학습했다.

Must Remember

• 뷰 포트 높이를 꽉 체우는 페이지를 만들때 vh를 사용하여 부모에 100%를 주는 등의 불필요한 스타일을 줄일 수 있다.
• 미디어쿼리도 가변적인 rem단위를 사용할 수 있다.

    /* PC (해상도 1024px)*/ 
    @media screen and (min-width:64rem) {
      
    }
    /* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px) */
    @media screen and (min-width:48rem) and (max-width:63.938rem) {
      
    } 
    /* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px) */ 
    @media screen and (max-width:47.938rem) {
      
    }

• 부모의 width에 상관하지 말고 무조건 100% 기준으로 자식의 width를 %로 잡아준다.