CSS | 미디어 쿼리

나는경서·2021년 11월 11일
2

미디어 쿼리

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

<!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>max</title>
    <style>
        body {
            background-color: burlywood;
        }

        @media screen and (max-width:800px) {
            body {
                background: cadetblue;
            }
        }
        @media screen and (max-width: 600px) {
            body {
                background: chartreuse;
            }
        }
    </style>
</head>
<body>
 
</body>
</html>
  • 화면이 800px 이하면 백그라운드가 바뀌고 600px 이하면 또 바뀌는 것을 볼 수 있다.
  • max-width라서 최대라고 생각할 수 있는데 1000px 이하일때 작동하는 것이다.
    그러니 1000px일때까지!라고 이해하는 것이 좋당.
  • @media screen에서 screen은 액정이 있는 모든 화면 기기를 뜻하고 and 는 모든 조건을 만족해야 반응한다는 논리 연산자.

미디어 쿼리 유형

all : 모든 장치를 대상으로 한다.
print : 인쇄 결과물 및 출력 미리보기 화면에 표시하는 경우이다.
screen : 모니터, 화면, 액정이 있는 디바이스

@media print 의 경우

<!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>
    <link rel="stylesheet" href="">
    <style>
    @media print {
            /* abbr의 마지막 자식 요소를 만들어주고 */
        abbr::after {
            /* attr() : css 속성 함수입니다. (title)값->인수, 인자라고함 애트리뷰트를 불러온다.*/
    content: ' ('attr(title)')'
        }
    }
    @media screen and (-webkit-device-pixel-ratio : 2){ 
        body{background:royalblue;}
    }
    </style>
</head>
<body>
    <abbr title="world wide web consortium">w3c</abbr>
    
</body>
</html>
  • <abbr>은 요소의 약어나 축약형을 정의하는 데 사용한다.
    <abbr title=""> 짧은 형식 </abbr>
  • -webkit-device-pixel-ratioCSS 픽셀당 장치 픽셀 수.
  • css 를 보면 abbr에 가상요소(::after)로 마지막 자식요소를 만들어주고 contentattr 함수를 사용해 abbr의 인수인 title을 불러왔다.
  • @media print를 사용하였으므로 화면상엔 보이지 않고 인쇄 미리보기 화면에서 title이 보이는 걸 알 수 있다.

결과

레티나 대응

  • 화소 : 화면을 구성하는 가장 기본이 되는 단위
  • Ppi(Pixels per inch): 화소 밀도, 인치당 화소가 들어가는 양
  • 물리픽셀 : 디바이스가 실제로 처리할수 있는 화소의 기본 단위
  • 논리픽셀 : css에서 표현하는 화소의 기본단위
  • 레티나 : 특정한 시야거리에서 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도를 가진 애플 LCD 제품의 브랜드 이름

→ 레티나는 1px에 화소 2개를 차지하는 두꺼운 선이 된다. 그래서 이미지가 흐리흐리해진다.

미디어 쿼리 조건

이름요약
[webkit-min-device-pixel-ratio, webkit-max-device-pixel-ratio]출력 장치의 최소, 최대 픽셀 비율. css의 1px 안에 들어가는 디바이스의 스크린 픽셀의 숫자를 값으로 합니다.
min-width, max-width스크롤바를 포함한 뷰포트의 최소, 최대 넓이
orientation뷰포트의 방향
profile
얼레벌레 돌아가는 Frontend Developer

0개의 댓글