https://www.daleseo.com/css-media-queries/
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
미디어 쿼리란 무엇일까?
미디어 쿼리는 CSS3에 도입된 CSS 기술이다. @media 특정 조건이 true인 경우에만 CSS 속성 블록을 포함하는 규칙을 사용한다.
맞춤형 스타일 시트(반응형 웹 디자인)를 테스크톱, 랩톱, 태블릿 및 휴대폰에 제공하는 데 사용되는 기술이다!
특정 스타일이 인쇄된 문서 또는 화면 판독기에만 사용되도록 지정가능! (미디어 유형 인쇄, 화면, 음성)
미디어 유형 외에도 미디어 기능도 있다.
예시) 브라우저 창이 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;
}
}