[미디어쿼리] 미디어쿼리 소개
2023. 1. 3. 12:35
미디어쿼리는 각 매체에 따라 다른 스타일을 적용할 수 있게 만드는 것이다.
미디어 매체는 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들을 이야기한다.
미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해준다.
미디어쿼리는 CC2의 미디어 타입을 확장해서 만들어졌다.
미디어 타입은 이론적으로는 훌륭했지만, 결과적으로 많이 사용되지 못했다.
당시에 미디어 타입을 제대로 지원하는 기기들이 없었기 때문이다.
당시에는 사용자들의 환경이 제한적이었기 때문에 제작자는 대중적인 미디어 범위에서만 잘 보이도록 사이트를 제작하면 아무 문제가 없었다.
하지만 웹이 급격히 발전하면서 대응해야 하는 미디어의 폭이 아주 많이 늘어났다.
이런 상황에 따라 w3c는 CSS2의 미디어 타입을 확장하여, CSS3 미디어쿼리를 발표했다.
이 미디어쿼리로 인해 웹사이트를 제작함에 있어 이전의 정적인 고정 레이아웃 웹 사이트에서 동적으로 반응하는 반응형 웹 사이트로 패러다임이 변화하였다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs120/
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
'공부 > HTML과 CSS' 카테고리의 다른 글
[미디어 쿼리] Syntax와 예제 코드 (0) | 2023.01.04 |
---|---|
[미디어쿼리] 미디어 타입 & 미디어 특성 (0) | 2023.01.03 |
[CSS 속성] 레이아웃 (position, z-index) (0) | 2022.12.30 |
[CSS 속성] 레이아웃 (float, clear) (0) | 2022.12.29 |
[CSS 속성] 레이아웃 (display, visibility) (0) | 2022.12.28 |