미디어 쿼리 @media

미디어쿼리는 화면 크기, 해상도, 디바이스 종류 등에 따라 CSS 스타일을 다르게 적용하는 방법이야. 즉, 하나의 CSS 파일로 여러 디바이스에 최적화된 웹페이지를 만들 수 있어!

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

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

특정 화면 크기에서 스타일 적용

@media (max-width: 768px) { 
    /* 화면 너비가 768px 이하일 때 배경색 변경! */
  body {
    background-color: lightgray;
  }
}

max-width: 768px : 768px 이하(모바일, 태블릿)에 적용
min-width: 1024px : 1024px 이상(PC)에 적용

여러 개의 조건을 지정하기

and, or, not 연산자를 사용할 수 있어!

@media (min-width: 600px) and (max-width: 1024px) {
    /* 화면 너비가 600px ~ 1024px 사이일 때 적용! */
  body {
    background-color: lightblue;
  }
}

@media (max-width: 480px), (min-width: 1200px) {
    /* 화면 너비가 480px 이하이거나 1200px 이상이면 적용! */
  body {
    background-color: pink;
  }
}

@media not screen and (max-width: 768px) {
    /* 768px 이하가 아닌 경우(즉, 769px 이상)일 때 적용! */
  body {
    background-color: yellow;
  }
}

미디어 타입(Media Types)

미디어쿼리는 출력 장치(디바이스 종류)에 따라 스타일을 다르게 적용할 수도 있어! @media 뒤에 미디어 타입을 지정하면 특정 장치에서만 적용 가능

all : 모든 장치 (기본값)
screen : 컴퓨터, 태블릿, 모바일 화면 (일반적인 CSS 적용 대상)
print : 프린터 출력 스타일 적용
speech : 화면 낭독기(Screen Reader)용 스타일 적용

body {
  background-color: lightgray; /* 웹에서는 연한 회색 */
}
@media print {
  body {
    background-color: white; /* 프린트에서는 흰색 */
  }
}

반응형 웹 디자인

기기별 화면 크기에 맞게 스타일 조정

/* 모바일 (최대 480px) */
@media (max-width: 480px) {
  body {
    background-color: lightblue;
  }
}

/* 태블릿 (481px ~ 1024px) */
@media (min-width: 481px) and (max-width: 1024px) {
  body {
    background-color: lightgreen;
  }
}

/* 데스크톱 (1025px 이상) */
@media (min-width: 1025px) {
  body {
    background-color: lightcoral;
  }
}

네비게이션 메뉴를 반응형으로 만들기

.nav {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .nav {
    flex-direction: column; /* 모바일에서는 세로 메뉴 */
  }
}

고급 미디어쿼리 활용

orientation

디바이스가 가로/세로 모드인지 감지할 수 있음!

@media (orientation: portrait) {
  body {
    background-color: lightblue;
  }
}
@media (orientation: landscape) {
  body {
    background-color: lightcoral;
  }
}
/* 세로 모드에서는 파란색, 가로 모드에서는 빨간색 배경 적용! */

aspect-ratio

화면 비율(예: 16:9, 4:3 등)에 따라 스타일 적용 가능!

@media (min-aspect-ratio: 16/9) {
  body {
    background-color: gold;
  }
}
/* 화면 비율이 16:9 이상이면 배경색 변경! */

hover

터치스크린(모바일)에서는 hover 효과 제거 가능!

@media (hover: hover) {
  button:hover {
    background-color: red;
  }
}

@media (hover: none) {
  button {
    background-color: gray;
  }
}
/* 마우스가 없는 터치스크린에서는 기본 회색 버튼! */

prefers-color-scheme

사용자가 다크 모드를 설정했을 때 자동 변경 가능!

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
/* 사용자의 시스템 설정에 따라 자동으로 다크 모드 적용! */

3.8 KiB Raw Blame History