CSS - (5) Media Query

frenchkebab·2021년 11월 19일

htmlcss

김버그 - css는 재미있다 강의 정리

목록 보기

11/12

Media Query

반응형 웹을 만들기 위해 반드시 필요한 것

HTML5 에서

viewport meta

CSS3 에서

Media Query

viewport

position: fixed;에 대해 배울 때 언급했었다.
browser의 화면 크기를 말한다.
반응형 화면을 위해 필수적으로 넣어야 한다!

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

media query

@media screen and (minwidth: 768px) {
  /* Where all the magic happens... */
}

내 화면이 몇 px 이상/이하 일 때 '이 스타일을 적용해 줘~' 하는 것이다.
위 코드의 경우 768px 이상이면 이렇게 적용해달라는 의미이다.

코드로 확인해 보자!

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox 2</title>
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

styles.css

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  color: #212529;
}

아직은 아무 것도 없는 빈 흰색 화면이다.

vh ?

.box {
  width: 100%;
  height: 100vh;
  background-color: black;
}

vh : Viewport Height
1vh는 우리가 보고 있는 viewport의 세로 길이의 1%을 의미한다.

css 수정하기

화면 가운데 배치 & 가상요소 넣어주기

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #ff4949;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
}

.box::after {
  content: 'Mobile';
}

@media 사용

@media screen and (min-width: 576px) {
  /* CSS 선언 */
  .box {
    background-color: #ff5216;
  }

  .box::after {
    content: 'Landscape Phone';
  }
}

width가 576px 이상이 되면 괄호 안의 CSS 속성들이 적용이 된다.

@media screen and (min-width: 768px) {
  .box {
    background-color: #ffc82c;
  }

  .box::after {
    content: 'Tablet';
  }
}

@media screen and (min-width: 992px) {
  .box {
    background-color: #13ce66;
  }

  .box::after {
    content: 'Desktop';
  }
}

@media screen and (min-width: 1200px) {
  .box {
    background-color: #1fb6ff;
  }

  .box::after {
    content: 'Large Desktop';
  }
}

@media screen and (min-width: 1360px) {
  .box {
    background-color: #7e5bef;
  }

  .box::after {
    content: 'Super Large Desktop';
  }
}