html/css 미디어쿼리

jjyu_my·2024년 7월 6일

HTML & CSS

목록 보기

4/19

미디어쿼리란?

미디어 쿼리는 CSS에서 제공하는 기능으로, 사용자의 디바이스 특성(화면 너비, 높이, 해상도 등)에 따라 다른 스타일을 적용할 수 있도록 도와준다.
주로 반응형 웹 디자인(Responsive Web Design)에 사용되며, 다양한 디바이스(모바일, 태블릿, 데스크탑 등)에서 최적화된 웹 페이지를 제공하기 위해 사용된다.

1️⃣ 미디어 쿼리의 기본 문법

미디어 쿼리는 @media 키워드를 사용하여 정의하며, 조건을 괄호 안에 지정하고, 그 조건이 만족될 때 적용할 스타일을 중괄호 {} 안에 작성한다.

@media (조건) {
  /* 조건이 만족될 때 적용할 스타일 */
}

2️⃣ 주요 조건

min-width: 최소 너비를 지정. 지정된 너비 이상일 때 스타일이 적용된다
max-width: 최대 너비를 지정. 지정된 너비 이하일 때 스타일이 적용된다.

min-height: 최소 높이를 지정. 지정된 높이 이상일 때 스타일이 적용된다.

max-height: 최대 높이를 지정. 지정된 높이 이하일 때 스타일이 적용된다.
orientation: 화면의 방향을 지정.
portrait(세로) 또는 landscape(가로).

💡 미디어 타입을 생략하면 all 이 기본값이 되어 모든 미디어 타입에 적용된다.

3️⃣ 사용예시

📌 모바일 기기를 기준으로 기본 스타일을 정의하고, 화면이 커질수록 추가적인 스타일을 적용하는 방법.

/* 기본 스타일 (모바일) */
body {
  font-size: 16px;
  background-color: lightgrey;
}

/* 태블릿 스타일 (화면 너비가 768px 이상) */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    background-color: lightyellow;
  }
}

/* 데스크탑 스타일 (화면 너비가 1024px 이상) */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
    background-color: lightblue;
  }
}

📌 데스크탑 기기를 기준으로 기본 스타일을 정의하고, 화면이 작아질수록 추가적인 스타일을 적용하는 방법.

/* 기본 스타일 (데스크탑) */
body {
  font-size: 20px;
  background-color: lightblue;
}

/* 태블릿 스타일 (화면 너비가 1024px 이하) */
@media (max-width: 1024px) {
  body {
    font-size: 18px;
    background-color: lightyellow;
  }
}

/* 모바일 스타일 (화면 너비가 768px 이하) */
@media (max-width: 768px) {
  body {
    font-size: 16px;
    background-color: lightgrey;
  }
}

📌 특정 범위의 화면 너비를 설정하여 태블릿 크기 범위(768px ~ 1024px)에서만 스타일을 적용하는 방법.

@media (min-width: 768px) and (max-width: 1024px) {
  body {
    background-color: lightgreen;
  }
}

📌 전체예제

/* 기본 스타일 */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* 작은 모바일 기기 */
@media (max-width: 320px) {
  body {
    background-color: lightpink;
  }
}

/* 중간 크기 모바일 기기 */
@media (max-width: 375px) {
  body {
    background-color: lightgreen;
  }
}

/* 큰 모바일 기기 */
@media (max-width: 414px) {
  body {
    background-color: lightcoral;
  }
}

/* 작은 태블릿 */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 중간 크기 태블릿 */
@media (max-width: 768px) {
  body {
    background-color: lightyellow;
  }
}

/* 큰 태블릿 */
@media (max-width: 1024px) {
  body {
    background-color: lightgrey;
  }
}

/* 작은 데스크탑/노트북 */
@media (min-width: 1025px) and (max-width: 1280px) {
  body {
    background-color: lightgoldenrodyellow;
  }
}

/* 중간 크기 데스크탑/노트북 */
@media (min-width: 1281px) and (max-width: 1440px) {
  body {
    background-color: lightcyan;
  }
}

/* 큰 데스크탑 */
@media (min-width: 1441px) {
  body {
    background-color: lightseagreen;
  }
}

👩🏻‍💻 다양한 디바이스에 따라 창 크기는 다르지만, 일반적으로 다음과 같은 크기 기준을 사용한다.
( 개발자 도구를 사용하여 미디어 쿼리가 적용되는 방식과 각 화면 크기에 따라 스타일이 어떻게 변화하는지 실시간으로 확인할 수 있다.)

📱 모바일
작은 모바일 기기: 약 320px (예: iPhone SE)
중간 크기 모바일 기기: 약 375px (예: iPhone X)
큰 모바일 기기: 약 414px (예: iPhone 11 Pro Max)

💻 태블릿
작은 태블릿: 약 600px (예: Nexus 7)
중간 크기 태블릿: 약 768px (예: iPad Mini)
큰 태블릿: 약 1024px (예: iPad Pro 10.5)

🖥️ 데스크탑
작은 데스크탑/노트북: 약 1280px (예: 작은 랩톱)
중간 크기 데스크탑/노트북: 약 1440px (예: 표준 랩톱)
큰 데스크탑: 1600px 이상 (예: 큰 모니터)

html/css 미디어쿼리

HTML & CSS

미디어쿼리란?