CSS ⑧ 반응형 웹과 미디어 쿼리

🎨 Frontend/HTML & CSS

CSS ⑧ 반응형 웹과 미디어 쿼리

kongmi 2023. 3. 20. 19:54

반응형 웹 디자인

다양한 크기의 디바이스에서 일관된 사용자 경험을 제공하기 위한 디자인 방법론 입니다.
그리드 레이아웃, 플렉스 박스, 미디어 쿼리 등의 CSS 기술을 사용합니다.

미디어 쿼리

사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용하는 기술

뷰포트

모바일 기기에서 웹 페이지를 볼 때, 실제 화면에 보이는 영역을 말합니다.
모바일 기기에서는 뷰포트가 다양한 크기로 나타날 수 있으므로, 웹 페이지가 다양한 뷰포트 크기에 대응할 수 있도록 반응형 웹 디자인을 구현해야 합니다.
브라우저에서는 기본적으로 뷰포트가 설정되어 있습니다. 그러나 브라우저마다 뷰포트의 크기가 다를 수 있으므로, 뷰포트를 설정하는 것이 중요합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

✅ VS Code에서 만드는 기본 설정이자 가장 많이 사용하는 특성 입니다.

✅ html 문서의 너비를 기기의 너비로 설정하라는 의미이며, 이 값 대문에 어떤 기기로 접속하더라도 뷰포트는 접속한 기기의 해상도를 올바르게 인식 합니다.

뷰포트 단위

vw(viewport width) : 뷰포트 너비의 1%
vh(viewport height) : 뷰포트 높이의 1%
vmin(viewport minimum) : 뷰포트 너비와 높이 중 작은 값의 1%
vmax(viewport maximum) : 뷰포트 너비와 높이 중 큰 값의 1%

뷰포트 크기에 따라 폰트 사이즈 변경

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>viewport units</title>
  <style>
    h1{
      font-size:5vw;      
      text-align:center;
    }
  </style>  
</head>
<body>
  <h1>안녕하세요?</h1>             
</body>
</html>

미디어 쿼리의 기본 문법

@media only screen and (min-width:360px) and (max-width:720px) {
    /* CSS 코드 */
}

not / only

not : 뒤에 오는 모든 조건을 부정
only : 미디어 쿼리를 지원하는 기기만 미디어 쿼리를 해석하라는 의미

mediatype

미디어 쿼리가 적용될 미디어 타입을 명시, 생략하면 all로 인식 합니다.

media feature

미디어 쿼리가 적용될 미디어 조건을 적습니다.

뷰포트 적용

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    @media only screen and (max-width: 500px) {
      div {
        background-color: blue;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

저작자표시 비영리 변경금지 (새창열림)