17. 미디어쿼리 - 반응형 웹

1. sample file 2. 미디어쿼리 유형 3. 미디어 쿼리 조건 4. 논리연산자 5. sample page 6. 각 기기 사이즈(google)7. viewport

미디어 쿼리는 특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일만 적용되도록 만들어주는 기능입니다.


/* @media 논리연산자 미디어타입 논리연산자 ( 조건 ) 논리연산자 { 적용할 스타일 } */
@media screen and (max-width: 420px) {
  body {
    position: relative;
  }

  .activity-header {
    min-width: 100%;
  }

  .activity-header-box {
    width: 100%;
  }

  .preview-main {
    width: 100%;
  }
}

1. sample file

백문이 불여일타다닥!


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미디어쿼리 기본</title>
    <style>
        /* mobile first!! bootstrap이 대표적 */
        body {
            background-color: tomato;
        }
        /* max니 1000px 이상이라고 오해하기 쉽지만, 1000px 이하일때 작동, 그러니 1000px일때까지!라고 이해하는 것이 좋음 */
        @media screen and (max-width:1000px) {
            body {
                background-color: green;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미디어쿼리 기본</title>
    <style>
        /* mobile first!! bootstrap이 대표적 */
        body {
            background-color: tomato;
        }
        /* max니 1000px 이상이라고 오해하기 쉽지만, 1000px 이하일때 작동, 그러니 1000px일때까지!라고 이해하는 것이 좋음 */
        @media screen and (max-width:1000px) {
            body {
                background-color: green;
            }
        }

        @media screen and (max-width:500px) {
            body {
                background-color: violet;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미디어쿼리 기본</title>
    <style>
        /* mobile first!! bootstrap이 대표적 */
        body {
            margin: 0;
            background-color: tomato;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            box-sizing: border-box;
            border: 10px solid red;
            height: 500px;
            width: 100%;
            background-color: yellow;
        }

        .item {
            margin: 50px;
            width: 500px;
            background-color: sienna;
        }
        /* max니 1000px 이상이라고 오해하기 쉽지만, 1000px 이하일때 작동, 그러니 1000px일때까지!라고 이해하는 것이 좋음 */
        @media screen and (max-width:1000px) {
            body {
                background-color: green;
            }
            .container {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                box-sizing: border-box;
                border: 10px solid red;
                height: 800px;
                width: 100%;
                background-color: yellow;
            }

            .item {
                margin: 50px;
                width: 800px;
                background-color: sienna;
            }
        }

        @media screen and (max-width:500px) {
            body {
                background-color: violet;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ea illo eius architecto sed qui, incidunt corporis labore! Nobis nemo consequuntur commodi pariatur iure saepe dolorum neque tempore temporibus at!</div>
        <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ea illo eius architecto sed qui, incidunt corporis labore! Nobis nemo consequuntur commodi pariatur iure saepe dolorum neque tempore temporibus at!</div>
    </div>
</body>
</html>

2. 미디어쿼리 유형

all

: 모든 장치를 대상으로 합니다.

print

: 인쇄 결과물 및 출력 미리보기 화면에 표시하는 경우입니다.


<abbr title="world wide web consortium">w3c</abbr>


@media print {
    abbr::after {
				/* attr() : css 속성 함수입니다. */
        content: ' ('attr(title)')'
    }
}

screen

: 모니터나 스크린이 있는 디바이스를 의미합니다.

3. 미디어 쿼리 조건

자주 사용하는 조건 목록

이름

요약

webkit-min-device-pixel-ratio, webkit-max-device-pixel-ratio

출력 장치의 최소, 최대 픽셀 비율. css의 1px 안에 들어가는 디바이스의 스크린 픽셀의 숫자를 값으로 합니다.

min-width, max-width

스크롤바를 포함한 뷰포트의 최소, 최대 넓이

orientation

뷰포트의 방향

4. 논리연산자

and : 조건을 모두 만족하는 경우에만 스타일을 적용합니다.

not : 조건을 반전하는 경우 스타일을 적용합니다.

컴마( , ) : 조건중 하나라도 만족하는 경우 스타일을 적용합니다.

only : 미디어쿼리를 지원 하는 브라우저에서만 작동하게 합니다.

(미디어 쿼리 css3 버젼은 IE9 부터 지원하지만 사실 미디어 쿼리 자체는 이미 IE6부터 지원합니다. 하지만 이땐 아직 논리 연산자를 지원하지 않기 때문에 오류를 미연에 방지하고자 only 키워드가 탄생하게 됩니다.)


body{background:black;}

@media screen and (min-width:481px) and (max-width:1280px){
  body{background:red;}
}

@media screen and (max-width:480px){ 
  body{background:green;}
}

@media not screen and (orientation : landscape){ /* not은 항상 @media 뒤에 옵니다. 기본값은 portrait */
  body{background:pink;}
}

@media screen and (-webkit-device-pixel-ratio : 2){ 
  body{background:royalblue;}
}

** 기기의 픽셀 비율을 알아내는 방법 **