HTML CSS JavaScript

CSS 미디어 쿼리 (Media Query)

whs5758 2025. 7. 18. 11:55

반응형 웹 디자인과 Media Query 

1. 반응형 웹 디자인이란?

  • 쉽게 말해요: 반응형 웹 디자인(Responsive Web Design)은 웹사이트가 사용하는 기기에 따라 화면이 예쁘게 보이도록 만드는 기술이에요. 예를 들어, 스마트폰, 태블릿, 컴퓨터에서 모두 잘 보이게 하는 거죠!
  • 왜 중요할까요?
    • 요즘은 사람들이 스마트폰으로 웹 서핑을 많이 해요.
    • 기기마다 화면 크기가 다르니까, 모든 기기에서 웹사이트가 보기 좋도록 조정해야 해요.
    • CSS의 Media Query라는 기능을 사용하면 쉽게 가능해요!

2. Media Query가 뭔가요?

  • Media Query는 CSS에서 특정 조건에 따라 스타일을 다르게 적용하는 방법이에요.
  • 예를 들어, "화면 크기가 600px 이하일 때 이 스타일을 적용해!" 같은 조건을 줄 수 있어요.

Media Query의 기본 구조

@media (조건) {
  /* 조건이 맞을 때 적용할 CSS 스타일 */
}

조건 종류

  • all: 모든 기기에 적용 (기본값)
  • screen: 화면에 표시되는 기기 (스마트폰, 컴퓨터 등)
  • print: 인쇄할 때 적용
  • width, height: 화면의 너비와 높이 조건
    • min-width: 최소 너비
    • max-width: 최대 너비
  • orientation: 화면 방향 (가로/세로)
    • landscape: 가로 방향
    • portrait: 세로 방향
간단한 예제 
/* 화면 너비가 600px 이하일 때 */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 화면 너비가 600px 초과일 때 */
@media (min-width: 601px) {
  body {
    background-color: lightgreen;
  }
}

3. Viewport 설정하기

  • 반응형 웹을 만들 때 Viewport 설정이 중요해요. Viewport는 웹사이트가 표시되는 화면 영역을 말해요.
  • 스마트폰에서 웹사이트가 너무 작게 보이거나 확대되어 보이지 않도록 설정해야 해요.

Viewport 설정 방법

HTML에 아래 코드를 추가하세요:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width: 화면 너비를 기기의 실제 너비에 맞춤
  • initial-scale=1.0: 초기 확대 비율을 1배로 설정 (줌 안 함)

4. Pixel과 Viewport의 차이 이해하기

  • Pixel: 화면의 작은 점 하나를 말해요. 예를 들어, 320px * 480px 해상도의 화면은 가로 320개의 점, 세로 480개의 점으로 이루어져 있어요.
  • Viewport: 기기에서 실제로 보여지는 영역이에요. 스마트폰에서는 보통 Virtual Viewport라는 개념이 있어서 실제 픽셀과 다를 수 있어요.
    • 예: 스마트폰의 실제 해상도는 980px인데, Virtual Viewport가 320px로 설정되어 있을 수 있어요.
  • Viewport를 설정하지 않으면, 스마트폰에서 웹사이트가 너무 작게 보이거나 확대되어 보일 수 있어요.

5. 실습: 간단한 반응형 웹사이트 만들기 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>반응형 웹사이트 실습</title>
  <style>
    /* 기본 스타일 */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

header, main, footer {
  padding: 20px;
  text-align: center;
}

header {
  background-color: #3498db;
  color: white;
}

main {
  background-color: #ecf0f1;
}

footer {
  background-color: #2c3e50;
  color: white;
}

/* 스마트폰 화면 (600px 이하) */
@media (max-width: 600px) {
  header {
    font-size: 20px;
  }
  main {
    font-size: 16px;
  }
  footer {
    font-size: 14px;
  }
}

/* 컴퓨터 화면 (600px 초과) */
@media (min-width: 601px) {
  header {
    font-size: 40px;
  }
  main {
    font-size: 40px;
  }
  footer {
    font-size: 40px;
  }
}

  </style>
</head>
<body>
  <header>헤더</header>
  <main>메인 콘텐츠</main>
  <footer>푸터</footer>
</body>
</html>
  • 위 코드는 화면 크기에 따라 글자 크기를 다르게 설정해요. 스마트폰에서는 글자가 작게, 컴퓨터에서는 크게 보이죠!

6. 레이아웃과 미디어 쿼리

  • 데스크탑 레이아웃: 헤더, 내비게이션, 메인 콘텐츠, 사이드바, 푸터
  • 모바일 레이아웃: 헤더, 내비게이션, 메인 콘텐츠, 푸터 (사이드바는 숨김)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexible Layout</title>
    <style>
      /* 
      * :root는 CSS의 최상위 스코프를 나타냅니다. 
      * 여기에 정의된 변수는 문서 전체에서 사용할 수 있는 전역 변수입니다.
      * - :root는 CSS 선택자(Selector) 중 하나로, 문서의 루트 요소를 선택
      * - HTML에서는 <html> 요소가 루트 요소이므로, :root는 <html>을 선택하는 것과 동일
      */
      :root {
        /* --header-bg는 커스텀 속성(변수) 이름입니다. 
         #00ffff(청록색)를 저장해 header의 배경색으로 사용합니다. */
        --header-bg: rgb(61, 187, 204);
        /* --nav-bg는 네비게이션 배경색으로, #faebd7(앤티크 화이트)을 지정합니다. */
        --nav-bg: #faebd7;
        /* --main-bg는 메인 콘텐츠 영역의 배경색, #a52a2a(갈색)을 정의합니다. */
        --main-bg: #a52a2a;
        /* --aside-bg는 사이드바 배경색으로, #f0ffff(밝은 청록)를 사용합니다. */
        --aside-bg: #f0ffff;
        /* --footer-bg는 푸터 배경색, #ffe4c4(비스킷 색)을 지정합니다. */
        --footer-bg: #ffe4c4;
      }

      /* Reset */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      /* 기본 Layout 설정 */
      .container {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        text-align: center;
      }

      .header {
        /* var() 함수로 --header-bg 변수를 참조해 색상을 적용합니다. */
        background-color: var(--header-bg);
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .nav {
        /* --nav-bg 변수로 배경색을 설정해 코드 중복을 줄입니다. */
        background-color: var(--nav-bg);
        flex: 0.7;
      }

      .content {
        flex: 3;
        display: flex;
        flex-direction: row;
        /* --aside-bg로 content 영역의 배경색을 정의합니다. */
        background-color: var(--aside-bg);
      }

      .main {
        /* --main-bg 변수를 사용해 메인 영역의 배경색을 설정합니다. */
        background-color: var(--main-bg);
        flex: 0.7;
      }

      .aside {
        flex: 0.3;
      }

      .footer {
        /* --footer-bg로 푸터의 배경색을 적용합니다. */
        background-color: var(--footer-bg);
        flex: 1;
      }
			
      @media (max-width: 768px) {
        .content {
          flex-direction: column;
        }
        nav {
          display: none;
        }

        .main,
        .aside {
          flex: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header class="header">Header</header>
      <nav class="nav">Navigation</nav>
      <div class="content">
        <main class="main">Main Content</main>
        <aside class="aside">Sidebar</aside>
      </div>
      <footer class="footer">Footer</footer>
    </div>
  </body>
</html>

'HTML CSS JavaScript' 카테고리의 다른 글

웹 페이지 만들어 보기 - 헤더 작업 하기  (0) 2025.07.21
웹 페이지 만들어 보기 - 패키지 구조 및 기본 설정  (1) 2025.07.21
CSS 우선순위와 상속  (1) 2025.07.18
CSS flexbox 사용해보기(2)  (0) 2025.07.18
CSS flexbox 사용해보기  (2) 2025.07.18

'HTML CSS JavaScript'의 다른글

  • 현재글CSS 미디어 쿼리 (Media Query)

관련글

티스토리툴바