PC에서는 예쁘게 보이던 블로그가 스마트폰에서는 글자가 너무 작거나, 이미지가 화면 밖으로 삐져나온 적 없으신가요? 이런 문제를 해결하는 핵심 기술이 바로 미디어 쿼리(Media Query)입니다. 화면 크기에 따라 다른 CSS를 적용할 수 있게 해주는 기능입니다.
[반응형 웹이란?]
PC, 태블릿, 스마트폰마다 화면 크기가 다릅니다. 반응형 웹은 이 화면 크기를 감지해서 레이아웃, 글자 크기, 여백 등을 자동으로 조절해주는 방식을 말합니다. 요즘은 블로그 방문자의 절반 이상이 모바일에서 접속하기 때문에, 반응형 처리가 안 되어 있으면 이탈률이 크게 올라갑니다.
[미디어 쿼리 기본 문법]
@media (max-width: 768px) {
/* 화면 너비가 768px 이하일 때 적용할 CSS */
}max-width: 768px는 "화면 너비가 768px 이하일 때"라는 뜻입니다. 즉 위 코드 안에 있는 스타일은 태블릿이나 스마트폰처럼 화면이 좁을 때만 적용됩니다.
[실전 예제: 글자 크기 줄이기]
PC에서는 큼직하게 보이던 제목이 스마트폰에서는 화면을 꽉 채워 답답해 보일 수 있습니다. 아래처럼 화면 크기별로 글자 크기를 다르게 지정할 수 있습니다.
h1 {
font-size: 32px;
}
@media (max-width: 768px) {
h1 {
font-size: 24px;
}
}기본 글자 크기는 32px로 두고, 화면이 768px 이하로 좁아지면 24px로 줄어들도록 설정한 예시입니다.
[실전 예제: 이미지가 화면 밖으로 삐져나올 때]
이미지 반응형 처리는 미디어 쿼리 없이도 아래 CSS 한 줄로 대부분 해결됩니다. 모든 이미지에 기본으로 적용해두는 걸 추천합니다.
img {
max-width: 100%;
height: auto;
}max-width: 100%는 "이미지가 부모 요소보다 커지지 않게" 제한하고, height: auto는 가로세로 비율이 깨지지 않게 유지해줍니다.
[자주 쓰는 화면 크기 기준값]
화면 크기 기준값(브레이크포인트)에 정답은 없지만, 실무에서 가장 널리 쓰이는 값은 아래와 같습니다.
/* 태블릿 */
@media (max-width: 1024px) { }
/* 스마트폰 */
@media (max-width: 768px) { }
/* 작은 스마트폰 */
@media (max-width: 480px) { }블로그 글처럼 단순한 레이아웃이라면 768px 기준 하나만 써도 대부분 충분합니다.
[초보자가 자주 하는 실수 3가지]
- min-width와 max-width를 헷갈리는 경우:
max-width는 "이 크기 이하일 때",min-width는 "이 크기 이상일 때"입니다. 반대로 쓰면 의도한 것과 정반대로 동작합니다. - viewport meta 태그를 빼먹는 경우: 미디어 쿼리를 아무리 잘 써도,
<head>에 아래 코드가 없으면 모바일 브라우저가 PC 화면을 억지로 축소해서 보여줘서 반응형이 전혀 작동하지 않습니다. - 미디어 쿼리 순서가 잘못된 경우: CSS는 아래쪽 코드가 위쪽 코드를 덮어씁니다. 기본 스타일보다 미디어 쿼리를 반드시 아래에 적어야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">참고로 블로그스팟 기본 테마에는 이 태그가 대부분 이미 포함되어 있지만, 테마를 직접 수정했다면 <head> 안에 있는지 한 번 확인해보시는 게 좋습니다.
[모바일에서 직접 확인하는 방법]
PC에서도 실제 모바일 화면을 시뮬레이션해볼 수 있습니다. 크롬 브라우저에서 F12를 눌러 개발자 도구를 열고, 좌측 상단의 기기 아이콘(모바일/태블릿 모양)을 클릭하면 여러 기기 화면으로 미리보기가 가능합니다.
핵심 요약
- 미디어 쿼리는
@media (max-width: 값px) { }형태로 작성합니다. - 이미지는
max-width: 100%; height: auto;만 기본으로 걸어둬도 대부분의 반응형 문제가 해결됩니다. - 모바일 대응을 위해선
<meta name="viewport"...>태그가 반드시 있어야 합니다. - CSS는 아래쪽이 위쪽을 덮어쓰므로, 미디어 쿼리는 기본 스타일보다 아래에 작성해야 합니다.
- 크롬 개발자 도구의 기기 아이콘으로 직접 모바일 화면을 확인할 수 있습니다.
여러분의 블로그를 모바일로 열어보셨을 때, 가장 먼저 고치고 싶은 부분은 어디였나요?