Coding 코딩/CSS

[CSS @media] 미디어 쿼리 (Media Query) 개념

ryusudol 2022. 9. 9. 16:06

Media Query

 

웹페이지 제작을 마치고 나서

 

스크린 크기가 다른 디바이스로 접속하거나 브라우저 창 크기가 바뀔 때

 

상황에 맞게 UI가 변했으면 좋겠다는 생각이 든다.

 

이때 활용할 수 있는 게 '미디어 쿼리(Media Query)'다.

 

 

Media Query의 기본 문법은 다음과 같다.

 

CSS

@media ('condition') {
    'style'
}

 

condition을 충족시키면 아래 style이 적용된다는 의미로,

 

if문과 동일한 구조다.

 

 

HTML

<body>
    <div>Width가 500px 이하가 되면 베경색이 Tomato로 바뀝니다.</div>
</body>

CSS

@media (max-width: 500px) {
  div {
    background-color: tomato;
    color: white;
  }
}

 

위 CSS 코드의 의미는

 

브라우저 width가 500px 이하일 때 이하 구문을 적용시킨다는 의미다.

 

만약 500px 이상일 때를 가정하고 싶으면 max-width 대신 min-width를 쓰면 된다.

 

위 코드의 결과는 아래와 같다.

 

 

width more than 500px
width less than 500px

 

width가 500px 이하일 때 <div> 태그 배경색이 tomato로 변경된 것을 확인할 수 있다.

 

 

때에 따라선 width가 좁아짐에  따라 특정 element를 숨기고 싶을 때도 있다.

 

이 또한 가능하다.

 

CSS

@media (max-width: 600px) {
  div {
    display: none;
  }
}

Result

Media Query - Display None Example

width가 500px 이하가 되면 글이 사라지는 것을 확인할 수 있다.

 

이처럼 Media Query는 원하는 대로 조정할 수 있기 때문에

 

창의적이고 무궁무진한 활용성을 가진 기능이다.

 

잘 활요하면 user에게 훌륭한 UX를 제공할 수 있을 것 같다 !