CSS #11 (@media 쿼리)

웹 페이지가 다양한 화면 크기나 기기 종류에 맞게 스타일을 조정할 수 있게 해준다. 

이를 통해 웹 페이지는 데스크탑, 태블릿, 모바일 등에서 자동으로 최적화된 레이아웃을 제공할 수 있다. 

미디어 쿼리는 화면 크기, 해상도, 오리엔테이션(세로/가로 모드) 등을 기반으로 특정 스타일을 적용할 수 있다.

 

 

 

 

 

 

 

※ Media Query : 화면 크기, 해상도, 장치 타입 등에 따라 다른 CSS 스타일을 적용할 수 있도록 하는 CSS 기능

@media media-type and (조건) {
  /* 조건이 참일 때 적용할 CSS */
}

• media-type: 미디어 유형을 정의. (예: screen, print, all 등.)
• condition: 조건을 설정. (예: min-width, max-width, orientation 등.)

조건 예시

• min-width: 최소 너비 조건. 이 조건은 화면이 지정된 크기 이상일 때 적용.
• max-width: 최대 너비 조건. 이 조건은 화면이 지정된 크기 이하일 때 적용.
• orientation: 화면의 오리엔테이션이 세로(portrait)인지 가로(landscape)인지에 따라 스타일을 변경 가능.

 

 

 

예시 

@media screen and (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

화면 너비가 768px 이하인 모바일/태블릿 화면에서 배경색을 lightblue로 변경

 

 

참고 자료

 

See the Pen Media queries practice. by Ysaias Martinez (@ypmm) on CodePen.

 

 

 

예제 

 

화면 크기 별 스타일 변경

/* 데스크탑 */
@media (min-width: 1025px) {
  .box {
    font-size: 20px;
  }
}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1024px) {
  .box {
    font-size: 18px;
  }
}

/* 모바일 */
@media (max-width: 767px) {
  .box {
    font-size: 16px;
  }
}

 

세로 모드에서만 적용

@media (orientation: portrait) {
  .container {
    flex-direction: column;
  }
}

 

다크 모드 사용자를 위한 스타일

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: white;
  }
}

 

화면 방향에 따라 다른 스타일 적용

@media screen and (orientation: portrait) {
    /* 세로 모드 */
    body {
        background-color: lightyellow;
    }
}

@media screen and (orientation: landscape) {
    /* 가로 모드 */
    body {
        background-color: lightgreen;
    }
}

세로 모드에서는 lightyellow 배경색을 적용하고, 가로 모드에서는 lightgreen 배경색을 적용

 

 

 

※ 실전 Tip !

• 모바일 우선 전략(Mobile First): min-width를 기준으로 스타일을 점진적으로 추가하는 것이 좋습니다.
• 단일 CSS 파일 관리가 가능해 유지보수에 유리합니다.
• TailwindCSS 같은 프레임워크는 md:, lg: 등의 접두어로 내부적으로 미디어 쿼리를 사용합니다.

 

 

 

연습 문제

 

See the Pen media query by Cheolho Jang (@chiro-J) on CodePen.

 

• 모바일 우선 디자인: 기본적으로 1열 레이아웃을 사용하고, 화면 크기가 768px 이상일 때 2열 레이아웃으로 변경됩니다.
• max-width 속성을 사용하여 1024px 이상일 때 레이아웃의 최대 너비를 설정하고, 화면이 커지면 콘텐츠가 중앙 정렬됩니다.

 

 

 

요약

1. 미디어 쿼리 이해하기:
   • 미디어 쿼리는 특정 조건(화면 크기, 해상도, 오리엔테이션 등)을 기반으로 스타일을 적용할 수 있게 해주는 CSS 기능입니다.
   • @media 규칙을 사용하여 조건에 맞는 스타일을 정의합니다.
2. 미디어 쿼리 적용하기:
   • min-width, max-width, orientation 등을 사용하여 다양한 화면 크기에서 다른 스타일을 적용합니다.
   • 미디어 쿼리를 사용하여 반응형 웹 디자인을 구현하고, 화면 크기에 따라 레이아웃을 조정할 수 있습니다.
3. 미디어 쿼리를 사용해 웹 문서 만들기:
   • 반응형 웹 페이지를 만들 때, @media 규칙을 사용하여 모바일, 태블릿, 데스크탑에서 각각 적합한 스타일을 적용할 수 있습니다.
   • 그리드 레이아웃과 플렉스박스를 활용하여 유연한 레이아웃을 설계할 수 있습니다.