@media, Responsive Design

이재홍·2022년 6월 27일
0
post-thumbnail

https://www.daleseo.com/css-media-queries/
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

반응형 웹 디자인 - 미디어 쿼리

미디어 쿼리란 무엇일까?

미디어 쿼리는 CSS3에 도입된 CSS 기술이다. @media 특정 조건이 true인 경우에만 CSS 속성 블록을 포함하는 규칙을 사용한다.

맞춤형 스타일 시트(반응형 웹 디자인)를 테스크톱, 랩톱, 태블릿 및 휴대폰에 제공하는 데 사용되는 기술이다!

특정 스타일이 인쇄된 문서 또는 화면 판독기에만 사용되도록 지정가능! (미디어 유형 인쇄, 화면, 음성)

미디어 유형 외에도 미디어 기능도 있다.

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

예시) 브라우저 창이 600px 이하인 경우 배경색이 lightblue 로 변함!

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

다른 프로그래밍 언어의 if 조건문과 비슷한 개념이라고 생각하면 이해가 쉬울 것이다.

@media (조건) {
  스타일
}

스타일 부분에는 일반적인 css코드가 들어가는데, 조건 부분이 만족될 때 스타일이 적용, 그렇지 않다면 스타일 무시

화면 너비에 따라 엘리먼트 숨기기

미디어쿼리는 특정 엘리먼트를 화면의 너비에 따라 숨길 때도 많이 사용된다.
목록에서 어떤 항목은 넓은 화면에서 숨기고 어떤 항목은 좁은화면에서 숨기고 싶다.

그렇다면 max-width, min-width속성을 이용한 미디어 쿼리문을 작성해주자.

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

@media (min-width: 1000px) {
  .mobile {
    display: none;
  }
}

0개의 댓글