[HTML+CSS][미디어 쿼리] 01 - 미디어 쿼리 이해하기

[HTML+CSS][반응형 웹] 03 - 가변 레이아웃과 가변 요소

[HTML+CSS][반응형 웹] 02 - 가변 그리드 레이아웃 [HTML+CSS][반응형 웹] 01 - 반응형 웹과 뷰포트(viewport)의 개념 [HTML+CSS][CSS3와 애니메이션] 03 - 트랜지션 [HTML+CSS][CSS3와 애니메이션] 02 - 변형과..

onelight-stay.tistory.com

미디어 쿼리가 무엇인지에 대해 알아보고

미디어 쿼리를 사용할 때 고려해야 할 여러 조건들에 대해서

알아보도록 하자.

미디어 쿼리

CSS3 모듈 중에 하나로 사용자가 어떤 미디어를 사용하는가에 따라

사이트의 형태가 바뀌도록 CSS를 작성하는 방법이다.

미디어 쿼리 구문

@media 속성을 사용해 특정 미디어에서

어떤 CSS를 적용할 것인지를 지정해 준다.

해당 소스는 미디어 유형이 screen 이면서 최소 너비가 200px이고

최대 너비가 360px 일 경우에 적용할 CSS를 설정하는 구문이다.

- 미디어 유형의 종류 -

미디어 쿼리는 미디어별로 적용한 CSS를 따로 작성하기 때문에

@media 속성을 다음에 미디어 유형을 알려주어야 한다.

미디어 쿼리의 조건

- 웹 문서의 가로나비와 세로 높이 -

뷰포트의 너비와 높이를 미디어 쿼리의 조건으로 사용할 수 있는데

height(높이) 값은 미디어에 따라 달라지기 때문에 주의해야 한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>화면 너비에 따라 배경 이미지 바꾸기</title>
    <style>
        body { /* 문서의 기본 배경 */
            background: url(images/bg0.jpg) no-repeat fixed;
            background-size: cover;
        }
        @media screen and (max-width: 1024px) {
            body { /* 화면너비 1024px 이하일 때 배경 */
                background: url(images/bg1.jpg) no-repeat fixed;
                background-size: cover;
            }
        }
        @media screen and (max-width: 768px) {
            body { /* 화면너비 768px 이하일 때 배경 */
                background: url(images/bg2.jpg) no-repeat fixed;
                background-size: cover;
            }
        }
        @media screen and (max-width: 320px) {
            body { /* 화면너비 320px 이하일 때 배경 */
                background: url(images/bg3.jpg) no-repeat fixed;
                background-size: cover;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>

- 단말기의 가로 너비와 세로 높이 -

대부분의 단말기들은 단말기 해상도와 실제 브라우저의 너비가 다르기 때문에

단말기 너비나 높이를 고려해 미디어 쿼리를 작성해야 한다.

( 단말기 크기와 뷰포트 크기를 하나로 통일해 사용하기 위해

뷰포트를 지정할 때 width="device-width"로 놓고 사용한다.)

- 화면 회전 -

스마트폰이나 태블릿에서는 기기를 세로나 가로로 볼 때

웹 사이트의 화면 방향이 달라지는데 이를 적용시키려면

orientation 속성을 사용해 화면 방향을 체크할 수 있다.

웹에서 단말기 방향을 바꿔 결과를 확인하고 싶다면

크롬 개발자 도구의 디바이스 모드에서 모바일 기기를 선택한 후

Rotate 도구를 클릭하면 스마트폰 방향을 직접 바꾸지 않고서도

결과를 확인할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>화면 회전에 따라 배경 색 바꾸기</title>
    <style>
        body { /* 기본 배경색 설정 */
            background-color: #eee;
        }
        @media screen and (orientation: landscape) {
            body  {background-color: orange;} /*가로모드 일때 오렌지색*/
        }
        @media screen and (orientation: portrait) {
            body {background-color: yellow;} /*세로모드 일때 노란색*/
        }
    </style>
</head>
<body>
    <h1>Media Query</h1>
</body>
</html>

- 화면 비율, 단말기의 물리적 화면 비율 -

화면 비율은 뷰포트(단말기 브라우저 화면)의
너비 값(width)을 높이 값(height)으로 나눈 것으로 숫자 값이나 계산식을 사용할 수 있다.

단말기 화면 비율은 단말기의 너비 값(device-width)과

높이 값(device-height)을 이용해 계산한다.

- 색상당 비트수 -

단말기에서 사용하는 최대 색상 비트수를 미디어 쿼리 조건으로 사용할 수 있다.

color:1 이면 최대 2가지 색상을 나타낼 수 있으며,

color:3이라면 비트 3개로 표현할 수 있는 최대 색상인

8가지(2*2*2)로 표현할 수 있다.

- 미디어 쿼리 중단점 만들기 -

중단점

미디어 쿼리를 작성할 때 서로 다른 CSS를 적용할 화면 크기이다.

중단점을 어떻게 지정하는가에 따라 CSS가 달라지고 화면 레이아웃이 바뀌는데

대부분 기기의 화면 크기를 기준으로 한다.

하지만 시중의 모든 기기들을 반영할 수 없으므로

모바일 기기와 태블릿, 데스크톱 정도로만 구분하며,

처리속도나 화면 크기 등에서 다른 기기보다

모바일 기기의 제약 조건이 더 많이 때문에

모바일 기기의 레이아웃을 기본으로 해 CSS를 제작한다.

(모바일용 CSS는 태블릿과 데스크톱에서도 기본적으로 적용된다.)

이후에 사양이 훌륭하고 화면이 큰 태블릿과 데스크톱에 맞추어

더 많은 기능과 스타일을 추가한다.

모바일 퍼스트

모바일을 먼저 고려해 미디어 쿼리를 작성하는 것이다.

미디어 쿼리의 개념에 대해서 이해하는 것은

굉장히 재미있지만

직접 만들기 위해 코드를 작성하는 것은

꽤나 어려울 것 같다.

그래도 오늘은 미디어 쿼리를 이해하는 것이니

가볍게 듣고 다음에 깊게 배워나가야겠다.

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

※ 해당 글은 습득 목적으로 작성된 글입니다 ※

저작자표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS][미디어 쿼리] 03 - 미디어 쿼리를 사용해 웹 문서 만들기 (0)	2020.08.09
[HTML+CSS][미디어 쿼리] 02 - 미디어 쿼리 적용하기 (0)	2020.08.06
[HTML+CSS][반응형 웹] 03 - 가변 레이아웃과 가변 요소 (0)	2020.08.04
[HTML+CSS][반응형 웹] 02 - 가변 그리드 레이아웃 (0)	2020.08.03
[HTML+CSS][반응형 웹] 01 - 반응형 웹과 뷰포트(viewport)의 개념 (0)	2020.08.02

IT Information Notebook

[HTML+CSS][미디어 쿼리] 01 - 미디어 쿼리 이해하기

미디어 쿼리