(CSS) Media Query

Mirrer·2022년 4월 30일
0

CSS

목록 보기
7/15
post-thumbnail

Media Query

반응형 웹이라고도 불리며, 사용자가 접속하는 해당 디바이스 브라우저크기 맞춰 화면을 보여주는 것

CSS @media 속성은 CSS @규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있다.

@media를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있다.

/* 화면의 크기가 768px이상일 경우 */

@media screen and (min-width: 768px) {
	/* 변경될 동작 */
}

Media Query 예제

<body>
  <div class="box"></div>
</body>
.box {
  width: 100%;
  /* viewport width(vw) : 보고있는 화면 너비의 전체 퍼센트값(%) */
  /* 100vw = 보고있는 화면 너비의 100% */
  /* viewport height(vh) : 보고있는 화면 높이의 전체 퍼센트값(%) */
  /* 1vh = 보고있는 화면 높이의 1% */
  height: 100vh;
  background-color: red;
}

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

/* 너비가 500px이상일 경우 변경 */
@media screen and (min-width: 500px) {
  .box {
    background-color: blue;
  }

  .box::after {
    content: "Computer";
  }
}

/* 너비가 700px이상, 900이하일 경우 변경 */
@media screen and (min-width: 700px) and (max-width: 900px) {
  .box {
    background-color: yellow;
  }

  .box::after {
    content: "Super Computer";
  }
}

위 코드를 실행하면 아래와 같은 결과가 출력된다.


참고 자료

@media - CSS: Cascading Style Sheets | MDN
김버그의 CSS는 재밌다 - 기초부터 실무 레벨까지

profile
memories Of A front-end web developer

0개의 댓글