3. 미디어쿼리와 뷰포트

3. 미디어쿼리와 뷰포트 3.1 뷰포트(Viewport) 설정과 단위 활용 3.1.1 뷰포트(Viewport)란?3.1.2 단위 활용 3.2 미디어 쿼리(Media Query)3.2.1 미디어 쿼리(Media Query)란?3.2.2 미디어 쿼리의 기본 구조 3.2.3 브레이크 포인트에 따른 미디어쿼리 작업

3. 미디어쿼리와 뷰포트

3.1 뷰포트(Viewport) 설정과 단위 활용

3.1.1 뷰포트(Viewport)란?

뷰포트(viewport)란 현재 화면에 보여지고 있는 영역 말합니다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분을 말합니다. 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않습니다.

뷰포트는 두 가지로 나눌 수 있으며, 지금 볼 수 있는 부분인 시각적 뷰포트, 브라우저가 웹 페이지를 만들어내는 부분인 레이아웃 뷰포트로 나누어집니다. 스마트폰에서 사용자가 화면을 확대했을 때 레이아웃 뷰포트의 크기는 변하지 않지만 시각적 뷰포트는 작아지게 됩니다.

모바일 기기에서는 디스플레이의 크기가 작아서 뷰포트가 작은 경우가 많습니다. 이 경우, 웹 페이지의 컨텐츠가 작게 보이고, 가독성이 떨어질 수 있습니다. 이를 해결하기 위해 뷰포트를 조정할 수 있습니다. 뷰포트는 HTML 문서의 <meta> 태그를 이용하여 조정할 수 있습니다.


<meta name="viewport" content="width=device-width, initial-scale=1.0">

"viewport" 속성은 모바일에서만 적용됩니다. "width"는 웹 사이트를 렌더링 하고자 하는 뷰포트의 너비를 정의하고, "initial-scale"은 장치 너비(세로 모드에서는 device-width, 가로 모드에서는 device-height)와 뷰포트 너비의 비율을 정의합니다.

3.1.2 단위 활용

뷰포트를 조정하는데 활용할 수 있는 단위는 px, em, rem, vw, vh, %, vmin, vmax, calc가 있습니다.

px은 화소라고도 불리며, 화면을 구성하는 가장 기본이 되는 단위로 가장 많이 쓰이는 단위이지만 크기가 고정되기 때문에 반응형에서는 적합하지 않습니다.

em과 rem은 환경에 따라 변화하기 때문에 반응형에 적합한 단위라고 볼 수 있습니다. 공통된 특성은 브라우저 환경에 따라 px로 바뀌는 가변 단위라는 점입니다. 하지만 em은 상위의 부모 요소에서 지정된 font-size를 기준으로 px 단위로 변하는 반면, rem은 최상위 부모 요소에서 지정된 font-size를 기준으로 변하는 차이점이 있습니다.


<head>
    <style>
        html{font-size: 10px;}
        .wrap{font-size: 16px; background: #000; color: #FFF;}
        .em{font-size: 1em;}
        .rem{font-size: 1rem;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="em">
            안녕하세요.
        </div>
        <div class="rem">
            반갑습니다.
        </div>
    </div>
</body>

em과 rem의 차이를 보여주는 코드를 실행시켰을 때 나오는 결과입니다.

em을 사용한 .em은 부모요소인 .wrap의 font-size: 16px;의 영향을 받아 16px로 출력되었고, rem을 사용한 .rem은 최상위요소인 html의 font-size: 10px;의 영향을 받아 10px로 출력되었습니다.

vw와 vh는 각각 viewport-width, viewport-height의 줄임말로 실행 중인 브라우저의 스크린 사이즈에 맞춰 값을 반환합니다. 현재 브라우저의 전체 크기는 총 100vw, 100vh로 width 800px, height 100px의 화면의 경우 1vw는 8px ,1vh는 1px이 됩니다. 이 경우 50vw, 50vh로 설정 시 width 400px, height 50px의 결과값이 반환됩니다. 이 상태에서 브라우저 크기를 줄이거나 늘리면 화면의 크기가 변하면서 100vw, 100vh에 대응하는 값이 달라지면서 크기가 유동적으로 변화하게 됩니다. vw와 vh는 각각 width와 height에만 적용할 수 있는 것이 아니라 vw를 height에도 사용할 수 있고, vh를 width에도 사용할 수 있습니다.

%는 부모 기준 자식 요소가 차지하는 크기가 몇%인지 정해주는 단위입니다. 부모 요소가 100px일 때, 자식 요소에 50%를 주면 자식 요소의 크기는 50px이 됩니다. 부모 요소의 크기가 변하면 자식 요소도 그에 맞는 크기로 바뀌게 됩니다. px 값을 %로 바꿀 때 몇%인지 알 수 있는 공식은 (자식요소(px) / 부모 요소(px)) * 100 = x% 입니다.

vw, vh와 %는 스크린 사이즈가 변하면 그에 맞는 크기로 바뀌는 점이 비슷하지만 vw, vh는 스크롤바의 크기까지 포함하는 반면 %는 스크롤바를 제외한 화면의 크기를 기준으로 하는 차이점이 있습니다.

vmin과 vmax의 v는 viewport로 각각 viewport의 최소 크기, 최대 크기를 뜻합니다. vmin은 viewport의 최소 크기의 몇%만큼 크기를 지정해 주는 단위이고, vmax는 반대로 최대 크기의 몇%만큼 크기를 지정해 주는 단위입니다.


<head>
    <style>
        html{background:black;}
        .box1{width:50vmin; height:100px; background:red;}
        .box2{width:50vmax; height:100px; background:blue;}
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

위 코드를 실행한 결과 .box1은 width가 viewport의 최소 크기인 세로 사이즈의 50%로 설정됐고, .box2는 viewport의 최대 크기인 가로 사이즈의 50%로 설정이 됐습니다. 화면 사이즈를 줄여 가로보다 세로의 크기가 커진다면 vmin과 vmax의 기준이 달라져 다른 결과가 나오게 됩니다.

calc는 calculator의 약자로 각 단위를 활용하여 사칙연산을 계산해 줍니다. 사용법은 calc() 형식으로 괄호 안에는 단위, 사칙연산 기호, 단위 형식으로 들어갑니다. calc(100vw - 50px)의 경우 100vw에서 50px만큼 줄어든 크기로 변환됩니다.


<head>
    <style>
        html{background:black;}
        .box1{width:calc(50vw - -50px); height:100px; background:red;}
        .box2{width:50vw; height:100px; background:blue;}
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

calc를 사용하며 주의해야 할 점은 + - 연산 기호는 띄어쓰기를 해야 한다는 점입니다. - 기호를 숫자와 붙여서 쓸 경우 음수로 인식되기 때문에 clac(50vw - -50px)의 경우 50vw에 50px이 더해진 결과값이 나오게 됩니다.

3.2 미디어 쿼리(Media Query)

3.2.1 미디어 쿼리(Media Query)란?

미디어 쿼리의 정의

미디어 쿼리(Media Query)는 CSS3의 기능으로, 웹 페이지 또는 애플리케이션의 내용을 다양한 디스플레이 장치와 환경에 맞게 적응적으로 표시하도록 하는 방법을 뜻합니다. 이때 미디어 쿼리는 특정 조건에 따라 다른 CSS 스타일을 적용할 수 있게 해주는데, 이 조건을 ‘미디어 타입’이라 정의합니다. 미디어 쿼리는 이 조건이 만족될 때 해당하는 CSS가 적용됩니다.

미디어 타입

스타일시트가 어떤 장치나 출력 방식에 적용되어야 하는지를 명시합니다. 이를 통해 웹 개발자는 특정 장치나 환경에 따라 다르게 표시되는 스타일을 정의할 수 있습니다.

all: 모든 장치에 적용됩니다.

screen: 주로 컴퓨터 화면, 스마트폰, 태블릿 등의 스크린을 대상으로 보여집니다. 웹 사이트를 방문하는 대부분의 사용자들은 이 screen 미디어 타입을 경험하게 됩니다.

print: 인쇄될 문서에 적용됩니다. 이는 웹페이지를 인쇄할 때 사용되는 스타일을 명시하는 데 사용됩니다.

speech: 음성 출력 장치나 스크린 리더를 위한 스타일을 정의합니다.

projection: 프로젝터를 통한 표시를 위한 스타일을 정의합니다.

tv: 텔레비전 타입의 디바이스에 적용됩니다.

이외에도 handheld, braille, tty, embossed 등의 미디어 타입이 있습니다. 그러나 CSS3에서는 몇몇 미디어 타입들이 더 이상 사용되지 않거나, 오용의 여지가 있기 때문에 대부분의 경우 screen, print, all과 같은 주요 미디어 타입을 중점적으로 사용합니다.


@media screen and (max-width: 768px) {
    /* 스크린용 스타일 규칙 */
}

@media print {
    /* 인쇄용 스타일 규칙 */
}

💡

왜 768px인가요?

768px이 특별한 값은 아닙니다. 그러나 초기 반응형 웹 디자인 사례(ex. iPad의 초기 모델)에서 768px이 자주 사용되면서, 이 값은 웹 디자인 커뮤니티에서 일종의 관행이 되었습니다. 때문에 많은 프레임워크나 템플릿, 튜토리얼에서 이 값을 기준으로 사용됩니다.

이렇게 미디어 쿼리를 사용하면 다양한 화면 크기와 장치에 따라 콘텐츠의 레이아웃과 디자인을 적절하게 조절할 수 있습니다. 예를 들면, 데스크탑에서는 콘텐츠를 여러 열로 표시하고, 모바일 화면에서는 한 열로 콘텐츠를 표시하는 것이 가능합니다.

이처럼 미디어 쿼리는 현대의 다양한 디바이스 환경에서 웹 사이트와 애플리케이션을 최적화된 화면으로 보여줌으로써, 반응형 디자인에 필수적으로 사용됩니다.

3.2.2 미디어 쿼리의 기본 구조

미디어 쿼리는 @media 규칙을 사용하여 시작됩니다.


@media (미디어 특성) {
		/* 스타일 */
}

미디어 타입을 사용하여 나타내어 보겠습니다.


@media screen and (max-width: 768px) {
			/* 스타일 */
}

💡

screen: 주로 컴퓨터 화면, 스마트폰, 태블릿 등의 스크린을 대상으로 함

이처럼 @media 다음에는 조건문이 옵니다. 이 조건문은 다양한 미디어 특성을 기반으로 스타일을 적용할 환경을 정의합니다.

이미지는 웹 사이트에서 효과적으로 커뮤니케이션을 하는 데 있어서 핵심적인 역할을 수행합니다. 웹 페이지의 시각적인 콘텐츠 중 하나로, 이미지의 품질과 성능은 사용자 경험을 크게 좌우합니다. 특히, 모바일 디바이스와 데스크톱 환경에서 사용되는 다양한 화면 크기와 해상도에 대응하려면 이미지 반응형 처리가 필수적입니다.

이미지 반응형 처리는 웹 페이지의 빠른 로딩 속도, 데이터 사용량 최적화, 그리고 다양한 환경에서 최상의 시각적 품질을 보장하는 데 도움을 줍니다. 이를 위해서는 이미지를 효과적으로 선택하고 관리하는 기술들이 필요합니다. 이번 장에서는 이미지 반응형 웹 디자인을 위한 핵심 기술에 대해 살펴보겠습니다.

미디어 특성

미디어 쿼리 내에서 사용되며, 렌더링 되는 장치나 환경에 대한 특정 속성이나 값에 따라 스타일을 조건적으로 적용하는 데 사용됩니다. 여기에는 화면의 너비, 높이, 해상도, 색상 능력 등이 포함됩니다.

미디어 특성(media features)는 미디어 쿼리 내에서 사용되며, 렌더링 되는 장치나 환경에 대한 특정 속성이나 값에 따라 스타일을 조건적으로 적용하는 데 사용됩니다. 여기에는 화면의 너비, 높이, 해상도, 색상 능력 등이 포함됩니다.

다음 아래는 주요한 미디어 특성에 대한 설명입니다.

width / height: 렌더링 영역(대개는 브라우저 뷰포트)의 너비와 높이를 기준으로 합니다.


@media (max-width: 768px)

orientation: 화면의 방향을 기준으로 합니다. 주로 `portrait`(세로) 또는 `landscape`(가로) 값을 가집니다.


@media (orientation: landscape)

aspect-ratio / device-aspect-ratio: 렌더링 영역의 너비와 높이의 비율 또는 전체 장치 화면의 너비와 높이의 비율을 기준으로 합니다.


@media (aspect-ratio: 16/9)

이 밖에도 여러 가지 미디어 특성들이 존재합니다. 위에 나열된 특성들은 반응형 웹 디자인에서 가장 일반적으로 사용되는 중요한 예시들이며, 각 미디어 특성은 웹사이트나 애플리케이션의 디자인을 다양한 장치와 환경에 최적화하는 데 중요한 역할을 합니다.

앞선 내용을 바탕으로 각 디바이스에 따른 미디어 쿼리를 적용해 보겠습니다.

제일 먼저 기본 CSS를 정의하여 모든 화면에 적용되도록 구성해 보겠습니다.


/* 기본 스타일 */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

핸드폰과 데스크탑에 미디어 쿼리를 사용하여 스타일을 정의하여 보겠습니다.


/* 핸드폰 화면용 스타일 */
@media screen and (max-width: 768px) {
    body {
        font-size: 16px;
        background-color: #e6e6e6;
    }

    .container {
        padding: 10px;
    }
}

/* 데스크탑 화면용 스타일 (가정: 화면 너비가 769px 이상일 때) */
@media screen and (min-width: 769px) {
    body {
        font-size: 18px;
    }

    .container {
        border: 1px solid #ddd;
    }
}

위의 예시는 코드는 화면의 너비가 768px 이하일 때 (핸드폰 등의 모바일 장치)와 769px 이상일 때 (대부분의 데스크탑 환경)에 서로 다른 스타일을 적용합니다.

이러한 방식으로, 미디어 타입(screen)과 미디어 특성(max-width와 min-width 사용됨)을 조합하여 다양한 화면 크기와 장치에 맞게 디자인을 최적화할 수 있습니다.

3.2.3 브레이크 포인트에 따른 미디어쿼리 작업

브레이크 포인트(Breakpoint)

브레이크 포인트란 반응형 웹 디자인에서 특정 화면 크기 또는 장치 특성에 따라 디자인이나 레이아웃이 변경되는 지점을 말합니다. 브레이크 포인트는 웹 페이지가 다양한 화면 크기와 장치에 적절하게 반응하여 사용자에게 최적의 화면을 구성하도록 도와줍니다.

일반적으로 사용되는 브레이크 포인트의 예시는 아래와 같습니다.


/* Extra Small Devices (핸드폰) 스타일 */
/* 기본적으로 모든 장치에 적용되는 스타일을 정의합니다 */

.content {
    padding: 10px;
}

/* Small Devices (태블릿 세로 모드) 스타일 */
@media (min-width: 577px) and (max-width: 768px) {
    .content {
        padding: 20px;
    }
}

/* Medium Devices (태블릿 가로 모드) 스타일 */
@media (min-width: 769px) and (max-width: 992px) {
    .content {
        padding: 30px;
    }
}

/* Large Devices (작은 데스크탑) 스타일 */
@media (min-width: 993px) and (max-width: 1200px) {
    .content {
        padding: 40px;
    }
}

/* Extra Large Devices (큰 데스크탑) 스타일 */
@media (min-width: 1201px) {
    .content {
        padding: 50px;
    }
}

이때 미디어 쿼리를 사용하여 브레이크 포인트를 정의하며, 특정 화면 크기 또는 장치 특성에 도달했을 때 적용되는 스타일을 지정할 수 있습니다.


/* 기본 스타일 */
.content {
    float: none;
    width: 100%;
}

/* 화면 너비가 600px 이상일 때의 스타일 */
@media screen and (min-width: 600px) {
    .content {
        float: left;
        width: 50%;
    }
}

위의 예제에서 600px은 브레이크 포인트입니다. 화면 너비가 600px 이상이 되면 .content 요소는 왼쪽으로 부동하고 너비가 50%로 변경됩니다.