[CSS] 미디어 쿼리(Media Query)

미디어 쿼리 ( Media Query )

미디어 쿼리는 단말기의 유형, 화면 해상도, 뷰포트 너비 등에 따라 사이트의 스타일(CSS)을 적용할 수 있다.

@media 타입 and (기능) { 스타일 }

 

📌 미디어 타입

• all : 모든 장치 (기본값)
• screen : 스크린 화면
• print : 인쇄 결과물 및 출력 미리보기

타입을 기본값 all로 지정한다면 all and 생략 가능 👉 @media (기능) { 스타일 }

 

📌 기능 - BreakPoint (중단점)

BreakPoint가 많을수록 관리하기 어렵다.

• width
• max-width
• min-width
• height
• max-height
• min-height
• orientation
  - portrait :세로로 긴 형태 ( x < y )
  - landscape : 가로로 긴 형태 ( x > y )
• grid
• hover

📌 적용하기

1️⃣ CSS 파일 내에 직접 규칙 설정하기

.box {
    width: 1200px;
    height: 150px;
    margin: 20px;
    border: 10px solid;
    background-color: orange;
}

@media screen and (max-width: 1260px) {
    .box {
        width: auto;
        height: 200px;
        background-color: red;
    }
}

@media screen and (max-width: 800px) {
    .box {
        height: 300px;
        background-color: royalblue;
    }
}

 

2️⃣ HTML의 link 태그의 media 속성을 이용하여 적용하기

<link rel="stylesheet" href="./main.medium.css" media="(max-width: 1260px)">
<link rel="stylesheet" href="./main.small.css" media="(max-width: 800px)">

/* main.medium.css  */
.box {
    width: auto;
    height: 200px;
    background-color: red;
}

/* main.small.css  */
.box {
    height: 300px;
    background-color: royalblue;
}

 

 

 

출처

프론트엔드 웹 개발의 모든 것 초격차 패키지