CSS: 미디어 쿼리

8219 단어 codenewbietodayilearnedcssbeginners
안녕하세요 코드뉴비 여러분 👋

이제 앱 스타일 지정을 완료했다고 가정해 보겠습니다.
그러나 특정 크기의 페이지 보기에서는 앱에 다른 스타일을 적용하려고 합니다.
미디어 쿼리가 작동하는 시간입니다.

미디어 쿼리



미디어 쿼리는 응답 목적으로 사용됩니다.
다른 스타일을 적용하기 위해 일부 특정 유형과 조건을 대상으로 합니다.

구문 및 설명



구문:

@media () {...}


우리는 이것을 다음과 같이 표현합니다.

@media media-type and (media-conditions) {...}


매체 유형



미디어 쿼리로 타겟팅하는 다양한 유형의 미디어입니다.

화면



휴대 전화, 태블릿 또는 데스크톱과 같은 화면 기반 장치를 대상으로 합니다.

@media screen (...) {...}


인쇄



인쇄용 문서를 대상으로 합니다.
이 유형을 사용하면 사용자가 규칙을 설정한 형식으로 페이지를 인쇄할 수 있습니다.

 @media print {...}


연설



스크린 리더와 같이 콘텐츠를 소리로 읽는 장치를 대상으로 합니다.

@media speech {...}


모두



위의 모든 미디어 유형을 대상으로 합니다.
⭐ 이것은 일반적으로 사용되는 것입니다.

@media all and (...) {...}


어떤 유형도 할당하지 않으면 기본적으로 모든 유형에 속합니다.

@media (...) {...}


미디어 조건



미디어 쿼리로 타겟팅하는 특정 조건입니다.

너비




@media (min-width: ...) {...}


또는

@media (max-width: ...) {...}


또는

@media (min-width: ...) and (max-width: ...) {...}



  • 최소 너비

    명시된 값 이상의 크기에서 특정 스타일을 적용합니다.
    모바일 우선을 수행할 때 먼저 최소 너비로 시작하고 크기가 증가함에 따라 더 많은 규칙을 추가합니다.

  • 최대 너비

    명시된 값까지 특정 스타일을 적용합니다.
    데스크톱 우선용으로 앱을 디자인하고 아래로 작업할 때 max-width로 시작하는 것이 좋습니다.

    📝 min-width, max-width 신청 :

    @media (min-width: 400px) and (max-width: 800px) {
 .container {
    display: flex;
 }
}

    📖 너비 400px부터 800px까지 클래스 컨테이너가 있는 요소에 display: flex를 적용합니다.

    • 정위




    @media (orientation: portrait) {...}


    또는

    @media (orientation: landscape) {...}



  • 초상화

    페이지 뷰가 너비보다 높을 때의 방향

  • 풍경

    페이지 뷰가 높이보다 넓을 때의 방향

    • 추가 중요 참고 사항



  • 미디어 유형과 조건을 모두 적용하는 것은 선택 사항입니다.

    둘 다 적용할 필요는 없지만 적어도 하나는 적용해야 합니다.
  • media-type과 media-condition을 결합하려면 and 를 사용해야 합니다.

    • @media screen and (min-width: 640px) and (max-width: 1000px) {...}



  • 순서가 중요합니다.

    기본 CSS 규칙을 고수하면 다음에 오는 것이 무엇이든 이깁니다.
    따라서 초기 스타일 이후에 미디어 쿼리를 적용하여 재정의해야 합니다.
    이를 수행하는 좋은 방법은 모든 초기 스타일 코드의 끝에 미디어 쿼리를 맨 아래에 두는 것입니다.
  • 미디어 쿼리 블록 범위 내에서 수정하려는 요소를 명시해야 합니다.

    •   body {
     margin: 0;
     padding: 0;
  }

  h1 {
     color: green;
  }

  .container {
     margin: 0 auto;
  }

  .bigger-paragraph {
    font-size: 2rem;
  }

  @media (min-width: 500px) and (orientation: landscape) {
    h1 {
       color: blue;
    }

    .bigger-paragraph {
      font-size: 4rem;
    }
  }


    아래에서 함께 플레이할 Codepen을 제공합니다.



    결론


  • 우리는 응답 목적으로 미디어 쿼리를 사용합니다.
  • 미디어 쿼리의 대상:

  • 매체 유형
  • 화면
  • 프린트
  • 연설
  • 모두(기본값) ⭐


  • 미디어 조건

  • 너비
  • 최소 폭
  • 최대 너비


  • 정위
  • 초상화
  • 풍경



    • JavaScript의 지도
    버블 정렬

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage