콘텐츠로 이동

개요

CSS에서 디바이스의 특성(화면 크기, 해상도, 방향 등)에 따라 다른 스타일을 적용할 수 있게 해주는 기술

주요 용도

  • 반응형 웹 디자인: 데스크톱, 태블릿, 모바일에 맞는 레이아웃
  • 다크모드 지원: 사용자 시스템 설정에 따른 테마 변경
  • 인쇄용 스타일: 웹페이지 인쇄 시 최적화
  • 고해상도 디스플레이: 레티나 디스플레이 대응

자주 사용하는 조건들

  • max-width: 768px - 모바일 (768px 이하)
  • min-width: 769px - 태블릿 이상
  • min-width: 1024px - 데스크톱
  • prefers-color-scheme: dark - 다크모드
  • orientation: landscape - 가로 방향

기록

@media screen and (min-width:1024px) 
{ /* Desktop */ } 
@media screen and (min-width:768px) and (max-width: 1023px) 
{ /* Tablet */ } 
@media screen and (max-width:767px)
{ /* Mobile */ }
노트북과 태블릿 가로 : 1024px ~ 1279px
태블릿 가로 : 768px ~ 1023px
모바일 가로 & 태블릿 세로 : 480px ~ 767px
모바일 : ~479px 
@media screen and (min-width:1024px) 
{ /* Desktop */ } 
@media screen and (min-width:768px) and (max-width: 1023px) 
{ /* Tablet */ } 
@media screen and (max-width:767px)
{ /* Mobile */ }

기본 설정 <head></head> 사이에 meta viewport를 작성해준다.

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

모바일 퍼스트(최근 선호되는 추세) 

/* Default CSS */
/* Mobile - Portrait */
/* Mobile - Landscape */
@media (min-width: 576px) {}

/* Tablet */
@media (min-width: 768px) {}

/* Desktop */
@media (min-width: 992px) {}

/* Desktop (Large) */
@media (min-width: 1200px) {}


/* 작은 태블릿 */ 
@media (min-width: 576px) { 
    .container { 
        width: 90%; 
        min-height: 80vh; 
    } 
    .sign-in-container, .sign-up-container { 
        width: 50%; 
    } 
} 
/* 태블릿 */
@media (min-width: 768px) { 
    .container { 
        width: 85%; 
        min-height: 70vh; 
    } 
} 
/* 데스크탑 */ 
@media (min-width: 992px) { 
    .container { 
        width: 80%; 
        min-height: 60vh; 
    } 
} 
/* 큰 데스크탑 */ 
@media (min-width: 1200px) { 
    .container { 
        width: 70%; 
        min-height: 50vh; 
    }
}

데스크톱 퍼스트 

/* Mobile - Portrait */
@media (max-width: 575px) {}

/* Mobile - Landscape */
@media (max-width: 767px) {}

/* Tablet */
@media (max-width: 991px) {}

/* Desktop */
@media (max-width: 1199px) {}


/* Default CSS */

해상도 범위지정 

/* Mobile - Portrait */
@media (max-width: 575px) {}

/* Mobile - Landscape */
@media (min-width: 576px) and (max-width: 767px) {}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {}

/* Desktop */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Desktop (Large) */
@media (min-width: 1200px) {}


/* 모바일 - 세로 */ 
@media (max-width: 575px) 
{ .container 
    { width: 100%; min-height: 100vh; } } 
/* 모바일 - 가로 및 작은 태블릿 */ 
@media (min-width: 576px) and (max-width: 767px) 
{ .container { width: 90%; min-height: 80vh; } } 
/* 태블릿 */ 
@media (min-width: 768px) and (max-width: 991px) 
{ .container { width: 85%; min-height: 70vh; } } 
/* 데스크탑 */
@media (min-width: 992px) and (max-width: 1199px) 
{ .container { width: 80%; min-height: 60vh; } } 
/* 큰 데스크탑 */ 
@media (min-width: 1200px) 
{ .container { width: 70%; min-height: 50vh; } }

/* 작은 태블릿 미디어 쿼리 */
@media (min-width: 300px) {
  .container {
    width: 300px; /* 작은 장치에서의 너비 값을 적절하게 조정 */
    height: 200px;
    font-size: 10px; /* 작은 장치에서의 글꼴 크기를 조정 */
  }

  button {
    font-size: 3px; /* 큰 데스크탑에서의 버튼 글꼴 크기를 조정 */
    padding: 3px 11px;
  }

  a {
    font-size: 4px;
    margin: 4px 0;
  }
}

/* 작은 태블릿 */
@media (min-width: 576px) {
  .container {
    width: 232px;
    font-size: 10px; /* 작은 태블릿에서 글꼴 크기를 적절하게 조정 */
  }

  button {
    font-size: 6px; /* 큰 데스크탑에서의 버튼 글꼴 크기를 조정 */
    padding: 6px 22px;
  }
  a {
    font-size: 7px;
    margin: 7px 0;
  }
}

/* 태블릿 */
@media (min-width: 768px) {
  .container {
    width: 400px; /* 태블릿에서의 너비 값을 적절하게 조정 */
    font-size: 16px; /* 태블릿에서의 글꼴 크기를 그대로 유지 */
  }

  button {
    font-size: 8px; /* 큰 데스크탑에서의 버튼 글꼴 크기를 조정 */
    padding: 8px 29px;
  }
  a {
    font-size: 9px;
    margin: 10px 0;
  }
}

/* 데스크탑 */
@media (min-width: 992px) {
  .container {
    width: 600px; /* 데스크탑에서의 너비 값을 적절하게 조정 */
    font-size: 16px; /* 데스크탑에서의 글꼴 크기를 그대로 유지 */
  }

  button {
    font-size: 10px; /* 큰 데스크탑에서의 버튼 글꼴 크기를 조정 */
    padding: 10px 37px;
  }
  a {
    font-size: 12px;
    margin: 12px 0;
  }
}

/* 큰 데스크탑 */
@media (min-width: 1200px) {
  .container {
    width: 35vw; /* 큰 데스크탑에서의 너비 값을 그대로 유지 */
    font-size: 16px; /* 큰 데스크탑에서의 글꼴 크기를 그대로 유지 */
  }
  button {
    font-size: 12px; /* 큰 데스크탑에서의 버튼 글꼴 크기를 조정 */
    padding: 12px 45px;
  }
  a {
    font-size: 14px;
    margin: 15px 0;
  }
}

레퍼런스

https://ifhead.tistory.com/entry/Web-%EB%AF%B8%EB%94%94%EC%96%B4-%EC%BF%BC%EB%A6%AC-%EA%B8%B0%EA%B8%B0%EB%B3%84-%ED%95%B4%EC%83%81%EB%8F%84-%EB%B6%84%EA%B8%B0%EC%A0%90 https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries https://velog.io/@nemo/css-media-queries