미디어 쿼리(Media Queries)란?
앞서 플렉스 박스나 그리드는 레이아웃을 설계하 속성이라고 설명했다. 그렇다면 그런 레이아웃을 꾸며줄 기능 또한 필요한데 그것이 바로 미디어 쿼리이다.
우리는 웹페이지를 볼때 반드시 스마트폰으로만 보는 것이 아니라 PC로도 보고 태블릿으로도 보고 심지어는 TV에 연결해서 대화면에서 보기도 한다.
사람으로 치자면 키가 큰 사람, 마른 사람, 뚱뚱한 사람처럼 다양한 체형이 있는 것이다. 미디어 쿼리는 그런 다양한 체형에 적응할 수 있는 고무줄이 달린 옷이라고도 할 수 있을 것이다.
미디어 쿼리의 주요 기능
- 반응형 웹 디자인 구현 : 다양한 화면 크기와 해상도를 가진 기기(데스크톱, 태블릿, 스마트폰 등)에서 웹 페이지가 최적의 모습으로 보이도록 스타일을 조정한다.
- 미디어 유형별 스타일 적용 : 화면, 프린터, 음성 합성 장치 등 다양한 미디어 유형에 따라 스타일을 다르게 적용할 수 있다.
- 미디어 특성 기반 스타일 적용 : 화면 너비, 높이, 해상도, 방향(가로/세로) 등 다양한 미디어 특성에 따라 스타일을 조정한다.
1. 화면 크기에 따른 레이아웃 변경
미디어 쿼리의 핵심 요소 중 하나는 반응형 웹 디자인인데 그 중 가장 중요한 요소가 화면의 크기에 따른 레이아웃의 변경이다.
간단하게 말하면 스마트폰, 태블릿, PC 등 우리가 웹 페이지를 보는 기기들은 모두 크기가 제각각인데 기기의 화면 크기에 맞춰서 웹페이지의 크기와 모양을 조절한다는 것이다.
html
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>css
.container {
display: flex;
flex-direction: column; /* 기본적으로 세로 레이아웃 */
}
.box{
width: 200px;
height: 200px;
}
.box1 {background-color: #5a80ff;}
.box2 {background-color: #006e09;}
.box3 {background-color: #ffbc02;}
@media (min-width: 768px) {
.container {
flex-direction: row; /* 화면 너비가 768px 이상이면 가로 레이아웃 */
}
}이런식으로 특정 크기에 반응해서 웹 페이지의 크기를 조정할 수 있다.
PC 버전에서 가로로 길게 봐야 하는 글을 그대로 스마트폰의 작은 화면으로 옮겨서 보려면 오른쪽으로 손에 불나도록 드래그해야할 것이다. 그런 불상사를 막기 위해서 웹 페이지 자체의 크기를 조정하는 것이다.
반대로 스마트폰을 기준으로 작성된 글을 PC에서 동일한 화면으로 보면 스크롤은 무한정 내려야 할 수도 있기 때문에 특정 크기에 반응해서 보여지는 방식을 조정하는 것이다.
2. 화면 크기에 따른 폰트 크기 변경
작은 화면에서는 가독성을 높이기 위해 폰트 크기를 줄이고, 큰 화면에서는 더 많은 정보를 표시할 수 있기 때문에 폰트 크기를 늘릴 수 있다.
html
<body>
<div class="box">
돈키호테는 자신의 애마 로시난테를 타고 그의 종자 산초 판사와 함께 길을 가던 중, 들판에 늘어선 풍차들을 발견합니다. 그는 풍차들을 팔을 휘젓는 거대한 거인들이라고 착각하고, 악당들을 물리치기 위해 돌진합니다. 산초 판사는 돈키호테에게 그것들이 단순한 풍차일 뿐이라고 말하지만, 돈키호테는 그의 말을 무시하고 창을 들고 공격합니다.
바람이 불어 풍차 날개가 돌아가기 시작하자, 돈키호테는 날개에 휩쓸려 땅바닥에 내동댕이쳐집니다. 그는 상처를 입고 쓰러지지만, 자신의 패배를 인정하지 않고 마법사들이 거인들을 풍차로 변신시켰다고 주장합니다.
</div>
</body>
css
body {
font-size: 16px; /* 기본 폰트 크기 */
}
@media (max-width: 480px) {
body {
font-size: 14px; /* 화면 너비가 480px 이하이면 폰트 크기 축소 */
}
}
@media (min-width: 800px) {
body {
font-size: 22px; /* 화면 너비가 1200px 이상이면 폰트 크기 확대 */
}
}
.box{background-color: rgb(221, 221, 221);}블록
이미지 크기 및 표시 방식 변경
화면 크기에 따라 이미지 크기를 조정하거나 표시 방식을 변경할 수 있다.
html
<body>
<div class="box">
<img class="img" src="IMG_001.jpeg">
이것은 맛있는 라면입니다.
</div>
</body>css
.box{background-color: rgb(221, 221, 221);}
.img {
max-width: 700px;
height: 700px;
object-fit: cover;
}
@media (max-width: 600px) {
.img {
display: none; /* 화면 너비가 600px 이하이면 이미지 숨김 */
}
}
@media (max-width: 800px){
.img{
height : 500px; /* 화면 너비가 800px 이하이면 이미지 크기 500px로 조정 */
}
}화면의 크기가 작아지니까 이미지 크기가 같이 작아졌다가 다시 일정 크기 이상 작아질 경우 아예 이미지를 숨김처리 하는 방식으로 사용할 수 있다.
4. 메뉴 표시 방식 변경
작은 화면에서는 공간 제약으로 인해 메뉴를 접거나 숨기고, 큰 화면에서는 전체 메뉴를 표시할 수 있다.
CSS
.menu {
display: none; /* 기본적으로 메뉴 숨김 */
}
@media (min-width: 768px) {
.menu {
display: block; /* 화면 너비가 768px 이상이면 메뉴 표시 */
}
}방법은 위와 비슷하다.
5. 특정 장치에 대한 스타일 최적화
미디어 쿼리를 사용하여 특정 장치(예: 인쇄)에 대한 스타일을 최적화할 수도 있다.
예를 들어, 인쇄 시에는 배경색을 제거하고 폰트 크기를 조정하여 가독성을 높일 수 있다.
@media print {
body {
background-color: white;
font-size: 12pt;
}
}
'프로그래밍 > html css 공부' 카테고리의 다른 글
| HTML 기초 공부(5) - 자주 사용하는 HTML 기본 태그 (0) | 2025.03.07 |
|---|---|
| HTML 기초 공부(4) - HTML의 기본 구조 (0) | 2025.03.07 |
| HTML 기초 공부(3) - 시맨틱 요소 (0) | 2025.03.07 |
| HTML 기초 공부(2) - 요소의 종류 (0) | 2025.03.07 |
| HTML 기초 공부(1) - 태그, 속성, 요소 (1) | 2025.03.07 |