미디어 쿼리 Media Query 예제 모음집! 디바이스 해상도에 따른 반응형 웹 완성하는 핵심 코드 정리

PC에서는 멀쩡한데, 모바일에서 왜 이렇게 깨져요…?

웹을 만들다 보면 꼭 한 번은 겪게 되는 이 문제, 그 중심에는 바로 미디어 쿼리(Media Query)가 있습니다.

미디어 쿼리 예제만 제대로 이해해도 내 웹사이트는 어떤 기기에서도 깔끔하게 보이게 만들 수 있어요.

오늘은 실무에서 바로 써먹을 수 있는 디바이스 해상도 화면 크기별 반응형 웹 코드를 깔끔하게 정리해서 공유드릴게요.

미디어 쿼리가 뭐예요?

미디어 쿼리는 CSS의 조건문 같은 거예요.
“화면 너비가 768px 이하라면, 이 스타일을 적용해!” 이렇게 기기의 크기에 따라 다른 스타일을 적용할 수 있게 해주는 도구죠.

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

→ 화면이 768px 이하일 때 본문 글자 크기를 14px로 줄이라는 뜻입니다.

실전 예제를 통해 어떤 식으로 적용되는지 자주 사용하는 예제와 참고 이미지를 올려드립니다!

@media (max-width: 480px) {
  .navbar {
    display: none;
  }
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

@media (max-width: 1024px) {
  h1 {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  body {
    padding: 20px;
  }

  .content {
    width: 100%;
  }
}

미디어 쿼리를 적용하기 전에는 <head> 안에 이 코드가 꼭 들어가야 해요.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

반응형 웹을 만들고 싶다면, 먼저 미디어 쿼리 예제를 익히는 것이 첫걸음입니다.

처음엔 헷갈릴 수 있지만, 몇 번만 적용해 보면 어느 순간 “아 이거 진짜 유용하네” 싶어질 거예요.

이 글 하나만 저장해 두면, 실전에서 바로 복붙 해서 쓸 수 있는 구조로 만들어놨으니 코딩하실 때 바로 활용해 보세요!

반응형 웹사이트 만들기 기초부터 실전까지! 초보도 가능한 쉬운 방법

반응형 웹사이트 만들기, 왜 이렇게 어렵게 느껴질까요? 아마 이런 경험 있으실 거예요. 데스크탑에선 완벽하게 보이던 내 블로그, 스마트폰에서 보니까 이미지가 튀어나오고 글자가 짤려 있죠.

justsunblog.com

CSS 말줄임 처리 3줄 코드로 끝내기! 한 줄 두 줄 말줄임까지 완벽 정리

텍스트가 넘칠 때 자동으로 … 처리하는 법! 실무에서 자주 쓰이는 CSS 말줄임 코드 완벽 가이드

justsunblog.com

반응형 웹사이트 만들기 기초부터 실전까지! 초보도 가능한 쉬운 방법 (0)	2025.04.17
CSS 말줄임 처리 3줄 코드로 끝내기! 한 줄 두 줄 말줄임까지 완벽 정리 (0)	2025.04.16
ChatGPT와 YouTube Summary로 유튜브 영상 핵심 내용 요약 및 스크립트 추출하는 방법! 시간 절약 팁 공개 (9)	2025.04.11
무료 배경 지우기 누끼 따기 사이트 TOP 8 추천 2편 (13)	2024.08.18
무료 배경 지우기 누끼 따기 사이트 TOP 8 추천 1편 (0)	2024.08.17