[포스코x코딩온] 풀스택 부트캠프 3주차 정리 -3 (mediaQuery)

media Query

반응형 웹을 만들 수 있는 쿼리로 특정 높이나 너비에 도달하면 css를 활용하여 레이아웃을 바꿀 수 있다.

 

    /* all: 모든 경우 */
      @media all and (max-width: 600px) {
        .all {
          font-size: 2rem;
        }
      }
      /* print : 인쇄, 인쇄 미리보기 */
      @media print and (max-width: 600px) {
        .print {
          font-size: 2rem;
        }
      }
      /* screen: 인쇄, 인쇄 미리보기를 제외한 모든 css 적용 */
      @media screen and (max-width: 600px) {
        .screen {
          font-size: 2rem;
        }
      }

        /* 미디어 유형 작성하지 않을 경우 default인 all로 적용됨. */
      @media (max-width: 600px) {
        .no {
            font-size: 3rem;
        }
      }
      
      /* 미디어 쿼리 안의 and는 말 그대로 연산자인 and이다. screen 조건과 max-width 조건을 만족할 경우
      css설정을 하는 것.
      조건을 말할 때 or 또한 사용할 수 있다.*/
      
      /*아래도 가능*/
       @media (max-width: 600px) or (min-width: 800px) {
        .no {
            font-size: 3rem;
        }
      }
      
      
     <hr>
     /* 아래 두 쿼리는 동일한 코드*/
      @media (max-width: 800px) and (min-width: 600px) {
        .no {
            font-size: 3rem;
        }
      }
      
      @media (600px <= width <= 800) {
        .no {
            font-size: 3rem;
        }
      }

 

max-width와 min-width가 조금 헷갈리지만 직선 위를 기점으로 생각하면 편하다.

max-width는 직선 위의 한 점을 기점으로 max를 설정하는 것이니까 직선 상에서 왼쪽으로 적용된다. 고로

max-width: 800px이 조건이라면 width가 800px 이하일 때 적용된다고 생각하면 된다.

 

가로모드 세로모드 또한 설정이 가능하다.

 

@media screen and (orientation: landscape) {
            /* 가로모드일때 = 종횡비에서 횡이 더 높을 떄*/
            body {
                background-color: gold;
            }
        }

@media screen and (orientation: portrait) {
            /* 세로모드일때 = 종횡비에서 종이 더 높을 떄 */
            body {
                background-color: pink;
            }
        }

 

가로모드는 가로 세로 비율에서 가로가 1이라도 더 길 때 적용된다.

반면에 세로모드는 가로 세로 비율에서 가로와 세로가 같을 때 + 세로가 더 길 때 적용된다.

왜 portrait과 landscape인지는 초상화와 풍경화로 따온 듯 하다.

풍경화는 세로가 길고 풍경화는 가로가 더 기니까.