[CSS] 반응형 웹 미디어 커리(@media) ✍️

👨‍💻 미디어 커리란?

반응형 웹 디자인에서 가장 기본적인 개념으로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법이다.

아래 예시 사진 처럼, 미디어 커리는 다양한 기기와 화면 크기에 대응하여 웹 사이트를 더 효과적으로 표현할 수 있게 한다.

미디어 커리는 <style></style> 사이에 사용하며 기본적으로 미디어 유형을 지정하고 필요한 경우에는 and 연산자로 조건을 적용한다.

---

1. 웹 페이지의 최대 가로 너비(max-width)가 980px 이하인 경우

@media screen and (max-width:980px) {

    #page { width: 94%;}

    #main {width: 65%;}

    #sidebar {width: 30%;}

}

---

2. 웹 페이지의 최대 가로 너비(max-width)가 700px 이하인 경우

@media screen and (max-width:700px) {

    #main {width: auto; float: none;}

    #sidebar {width: auto; float:none;}

}

---

3. 웹 페이지의 최대 가로 너비(max-width)가 480px 이하인 경우

@media screen and (max-width:480px) {

    #header {height: auto;}

    h2 {font-size: 24px;}

    #sidebar {display: none;}

}

---

 

💡  미디어 쿼리를 작성할 때 대부분 기기의 화면 크기를 기준으로 하지만, 시중에 나온 모든 기기를 반영할 수는 없으므로 모바일과 태블릿, 데스크톱 정도로만 구분하는 것이 좋겠다.