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는 재밌다 - 기초부터 실무 레벨까지
memories Of A front-end web developer