코딩ㆍ개발 정보/HTML 연습

[HTML] Viewport, DPR, 가로, 세로 다르게 지정

RioRex 2024. 7. 25.

view port 로 모바일과 PC 등에 어떤 효과가 적용되는지 알려줘

뷰포트(Viewport)는 웹 페이지가 다양한 장치에서 어떻게 표시되는지를 제어하는 중요한 요소입니다. 특히 모바일 장치와 PC에서 서로 다른 효과가 적용되며, 이를 이해하는 것은 반응형 웹 디자인의 핵심입니다.

1. 뷰포트 메타 태그:

웹 페이지의 헤더에 <meta name="viewport" content="..."> 태그를 추가하여 브라우저에게 화면 크기를 어떻게 조절할지 지시할 수 있습니다. 주로 사용하는 속성은 다음과 같습니다:

width: 뷰포트의 너비를 설정합니다. width=device-width는 장치의 너비에 맞추도록 합니다.
initial-scale: 초기 줌 레벨을 설정합니다. initial-scale=1은 페이지가 처음 로드될 때 1:1 줌 레벨로 설정합니다.
maximum-scale, minimum-scale: 최대 및 최소 줌 레벨을 설정합니다.
user-scalable: 사용자가 페이지를 확대/축소할 수 있는지 여부를 설정합니다. user-scalable=no는 확대/축소를 비활성화합니다.

2. PC와 모바일의 차이점:

PC:
- 일반적으로 뷰포트 너비가 넓습니다(보통 1024px 이상).
- 많은 콘텐츠를 한 화면에 표시할 수 있습니다.
- 마우스와 키보드로 조작됩니다.
모바일:
- 뷰포트 너비가 좁습니다(보통 320px ~ 480px).
- 더 큰 텍스트와 인터랙티브 요소가 필요합니다.
- 터치스크린으로 조작됩니다.
- 종종 초기에 확대된 상태로 페이지를 표시합니다.

3. CSS 미디어 쿼리:

미디어 쿼리를 사용하여 다양한 뷰포트에 맞춘 스타일을 적용할 수 있습니다.

/* 기본 스타일 (PC) */
body {
    font-size: 16px;
}

/* 모바일 스타일 */
@media only screen and (max-width: 480px) {
    body {
        font-size: 14px;
    }
}

/* 태블릿 스타일 */
@media only screen and (min-width: 481px) and (max-width: 1024px) {
    body {
        font-size: 15px;
    }
}

4. 반응형 이미지와 비디오:

이미지와 비디오도 뷰포트에 맞게 크기가 조절되어야 합니다. 이를 위해 max-width: 100%를 설정할 수 있습니다.

img, video {
    max-width: 100%;
    height: auto;
}

5. 기타:

플렉스박스(Flexbox)와 그리드 레이아웃(Grid Layout): 반응형 레이아웃을 쉽게 만들 수 있습니다.
뷰포트 단위: vw, vh 등을 사용하여 뷰포트 너비와 높이에 비례한 크기를 설정할 수 있습니다.

모바일, 세로모드일때와 가로모드일때의 뷰포트를 다르게 지정할 수 있어?

네, 모바일 장치에서 세로 모드(portrait)와 가로 모드(landscape)에 따라 다른 스타일을 적용할 수 있습니다. 이를 위해 CSS 미디어 쿼리를 사용할 수 있습니다. 미디어 쿼리를 통해 뷰포트의 방향에 따라 스타일을 변경할 수 있습니다.

다음은 이를 구현하는 예시입니다:

1. CSS 미디어 쿼리:

/* 세로 모드 (portrait) */
@media only screen and (orientation: portrait) {
    body {
        background-color: lightblue;
    }
    /* 다른 세로 모드 전용 스타일 */
}

/* 가로 모드 (landscape) */
@media only screen and (orientation: landscape) {
    body {
        background-color: lightgreen;
    }
    /* 다른 가로 모드 전용 스타일 */
}

2. 뷰포트 메타 태그:

뷰포트 메타 태그는 장치의 화면 크기와 초기 확대/축소 비율을 설정하는 데 사용됩니다. 그러나 뷰포트 메타 태그 자체는 세로 모드와 가로 모드에 대해 다르게 설정할 수 없습니다. 대신 CSS 미디어 쿼리를 사용하여 방향에 따라 다른 스타일을 적용합니다.

3. 예제:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Orientation Example</title>
    <style>
        /* 세로 모드 (portrait) */
        @media only screen and (orientation: portrait) {
            body {
                background-color: lightblue;
                font-size: 16px;
            }
            /* 세로 모드 전용 스타일 */
            .container {
                padding: 10px;
            }
        }

        /* 가로 모드 (landscape) */
        @media only screen and (orientation: landscape) {
            body {
                background-color: lightgreen;
                font-size: 18px;
            }
            /* 가로 모드 전용 스타일 */
            .container {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Viewport Orientation Example</h1>
        <p>이 페이지는 세로 모드와 가로 모드에서 다르게 보입니다.</p>
    </div>
</body>
</html>

이 예제에서는 화면의 방향에 따라 배경색, 글자 크기, 패딩 등을 다르게 설정했습니다. 모바일 장치에서 화면을 회전하면 자동으로 적용된 스타일이 변경됩니다.

따라서, 뷰포트의 방향에 따라 다른 스타일을 지정할 수 있으며, 이를 통해 더 나은 사용자 경험을 제공할 수 있습니다.

이니셜 스케일도 변경이 가능한가?

뷰포트 메타 태그 자체로는 세로 모드와 가로 모드에 따라 다른 초기 스케일 값을 설정할 수 없습니다. 그러나 JavaScript를 사용하여 화면의 방향을 감지하고, 이를 바탕으로 뷰포트 메타 태그를 동적으로 변경할 수 있습니다.

다음은 JavaScript를 사용하여 초기 스케일 값을 변경하는 방법입니다:

1. 뷰포트 메타 태그를 동적으로 추가/변경:

HTML 파일에 아래와 같은 스크립트를 추가합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Viewport</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }
        .container {
            padding: 10px;
            background-color: lightgray;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Dynamic Viewport Example</h1>
        <p>Rotate your device to see changes in the viewport.</p>
    </div>

    <script>
        function updateViewport() {
            var viewportMeta = document.querySelector('meta[name="viewport"]');
            if (viewportMeta) {
                viewportMeta.parentNode.removeChild(viewportMeta);
            }

            var newViewport = document.createElement('meta');
            newViewport.name = "viewport";

            if (window.innerWidth > window.innerHeight) {
                // 가로 모드
                newViewport.content = "width=device-width, initial-scale=1.5";
            } else {
                // 세로 모드
                newViewport.content = "width=device-width, initial-scale=1.0";
            }

            document.getElementsByTagName('head')[0].appendChild(newViewport);
        }

        window.addEventListener('resize', updateViewport);
        window.addEventListener('orientationchange', updateViewport);

        // 초기 호출
        updateViewport();
    </script>
</body>
</html>

2. 스크립트 설명:

updateViewport 함수는 현재 뷰포트 메타 태그를 찾아 제거한 뒤, 새로 생성된 메타 태그를 추가합니다.
window.innerWidth와 window.innerHeight를 비교하여 가로 모드인지 세로 모드인지 확인합니다.
가로 모드에서는 initial-scale=1.5를, 세로 모드에서는 initial-scale=1.0을 설정합니다.
resize 및 orientationchange 이벤트 리스너를 통해 화면 크기나 방향이 변경될 때마다 updateViewport 함수를 호출합니다.
페이지가 처음 로드될 때 updateViewport 함수를 호출하여 초기 상태에서도 올바른 뷰포트 설정을 적용합니다.

이 스크립트를 통해 모바일 장치에서 세로 모드와 가로 모드에 따라 초기 스케일을 동적으로 변경할 수 있습니다.

PC에서는 영향을 주고 싶지 않은데, PC에서는 어떠한 뷰포트가 디폴트로 잡혀?

PC에서는 일반적으로 특별한 뷰포트 메타 태그 설정이 없을 경우, 브라우저가 기본적으로 뷰포트 너비를 화면 너비에 맞추고 초기 스케일을 1로 설정합니다. 이는 대부분의 PC 브라우저에서 기본적으로 웹 페이지를 적절히 표시하도록 설계된 기본 동작입니다.

만약 PC에서는 뷰포트 설정을 적용하지 않고, 모바일 장치에서만 동적으로 뷰포트를 변경하고 싶다면, JavaScript를 사용하여 장치 유형을 감지하고 모바일 장치에서만 뷰포트 메타 태그를 추가하는 방법을 사용할 수 있습니다.

다음은 이를 구현하는 예제입니다:

1. 뷰포트 메타 태그를 동적으로 추가/변경 - PC에서는 적용하지 않음:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Viewport</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }
        .container {
            padding: 10px;
            background-color: lightgray;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Dynamic Viewport Example</h1>
        <p>Rotate your mobile device to see changes in the viewport.</p>
    </div>

    <script>
        function isMobile() {
            return /Mobi|Android/i.test(navigator.userAgent);
        }

        function updateViewport() {
            if (!isMobile()) {
                return;
            }

            var viewportMeta = document.querySelector('meta[name="viewport"]');
            if (viewportMeta) {
                viewportMeta.parentNode.removeChild(viewportMeta);
            }

            var newViewport = document.createElement('meta');
            newViewport.name = "viewport";

            if (window.innerWidth > window.innerHeight) {
                // 가로 모드
                newViewport.content = "width=device-width, initial-scale=1.5";
            } else {
                // 세로 모드
                newViewport.content = "width=device-width, initial-scale=1.0";
            }

            document.getElementsByTagName('head')[0].appendChild(newViewport);
        }

        window.addEventListener('resize', updateViewport);
        window.addEventListener('orientationchange', updateViewport);

        // 초기 호출
        updateViewport();
    </script>
</body>
</html>

2. 스크립트 설명:

isMobile 함수는 navigator.userAgent를 사용하여 사용자가 모바일 장치에서 접속했는지 확인합니다.
updateViewport 함수는 isMobile 함수가 true를 반환할 때만 뷰포트 메타 태그를 추가하거나 변경합니다.
만약 PC에서 접속했을 경우, updateViewport 함수는 아무런 작업도 수행하지 않습니다.
모바일 장치에서 화면 크기나 방향이 변경될 때마다 resize 및 orientationchange 이벤트 리스너가 updateViewport 함수를 호출합니다.
페이지가 처음 로드될 때 updateViewport 함수를 호출하여 초기 상태에서도 올바른 뷰포트 설정을 적용합니다.

이 스크립트를 사용하면 모바일 장치에서만 뷰포트 메타 태그를 동적으로 변경하고, PC에서는 기본 설정을 유지할 수 있습니다.

접속된 장치의 뷰포트 크기가 얼마인지 확인할 수 있는 방법이 있을가?

네, JavaScript를 사용하여 현재 장치의 뷰포트 크기를 확인할 수 있습니다. 다음은 뷰포트의 너비와 높이를 확인하는 방법입니다:

1. JavaScript를 사용한 뷰포트 크기 확인:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Viewport Size</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }
        .container {
            padding: 10px;
            background-color: lightgray;
            border-radius: 5px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Viewport Size Example</h1>
    <p id="viewport-size"></p>
    <div class="container">
        <p>Resize your browser or rotate your device to see the viewport size update.</p>
    </div>

    <script>
        function updateViewportSize() {
            var width = window.innerWidth;
            var height = window.innerHeight;
            var viewportSizeText = "Viewport width: " + width + "px, height: " + height + "px";
            document.getElementById('viewport-size').textContent = viewportSizeText;
        }

        window.addEventListener('resize', updateViewportSize);
        window.addEventListener('orientationchange', updateViewportSize);

        // 초기 호출
        updateViewportSize();
    </script>
</body>
</html>

2. 스크립트 설명:

updateViewportSize 함수는 window.innerWidth와 window.innerHeight를 사용하여 뷰포트의 너비와 높이를 가져옵니다.
가져온 뷰포트 크기를 #viewport-size 요소의 텍스트 콘텐츠로 설정합니다.
resize 및 orientationchange 이벤트 리스너를 통해 화면 크기나 방향이 변경될 때마다 updateViewportSize 함수를 호출합니다.
페이지가 처음 로드될 때 updateViewportSize 함수를 호출하여 초기 상태에서도 뷰포트 크기를 표시합니다.

이 코드를 사용하면 현재 장치의 뷰포트 크기를 실시간으로 확인할 수 있습니다. 브라우저 창 크기를 변경하거나 모바일 장치의 방향을 변경할 때마다 뷰포트 크기가 업데이트되어 화면에 표시됩니다.

플 OS를 사용하는 장치의 경우, 레티나 디스플레이를 사용하기도 하는데, 그럴 경우 해상도와 뷰포트는 별개로 동작하는건지, 레티나 디스플레일때는 뷰포트의 크기가 그에 비례해서 커지는지 동일한지 궁금해

레티나 디스플레이와 같은 고해상도 디스플레이에서는 실제 픽셀 해상도와 CSS 픽셀 해상도가 다를 수 있습니다. 이러한 디스플레이는 일반적으로 더 높은 픽셀 밀도를 가지고 있으며, 이를 "디바이스 픽셀 비율 (device pixel ratio, DPR)"이라고 합니다.

레티나 디스플레이와 뷰포트의 관계

레티나 디스플레이의 경우, 실제 화면 해상도는 매우 높지만, CSS 뷰포트 크기는 동일하게 유지됩니다. 이는 CSS 픽셀이 물리적 픽셀보다 더 큰 단위로 처리된다는 것을 의미합니다. 예를 들어, 디바이스 픽셀 비율이 2인 경우, 한 CSS 픽셀은 2x2 실제 픽셀로 구성됩니다.

예시

1. 디바이스 픽셀 비율 (DPR):

- 일반적인 디바이스: 1
- 레티나 디스플레이: 2 (혹은 그 이상)

2. 뷰포트 크기와 해상도 비교:

function getViewportAndResolution() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    const dpr = window.devicePixelRatio;
    const screenWidth = screen.width * dpr;
    const screenHeight = screen.height * dpr;

    console.log(`Viewport size: ${width}px x ${height}px`);
    console.log(`Device pixel ratio: ${dpr}`);
    console.log(`Screen resolution: ${screenWidth}px x ${screenHeight}px`);
}

getViewportAndResolution();

결과 해석

window.innerWidth와 window.innerHeight는 CSS 픽셀 단위의 뷰포트 크기를 반환합니다.
window.devicePixelRatio는 디바이스 픽셀 비율을 반환합니다.
screen.width와 screen.height는 물리적 픽셀 단위의 화면 크기를 반환합니다. 여기에 dpr을 곱하면 실제 해상도를 얻을 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Retina Display Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }
        .container {
            padding: 10px;
            background-color: lightgray;
            border-radius: 5px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Retina Display Example</h1>
    <p id="viewport-size"></p>
    <div class="container">
        <p>Check the console for viewport size and screen resolution.</p>
    </div>

    <script>
        function getViewportAndResolution() {
            const width = window.innerWidth;
            const height = window.innerHeight;
            const dpr = window.devicePixelRatio;
            const screenWidth = screen.width * dpr;
            const screenHeight = screen.height * dpr;

            const viewportSizeText = `Viewport size: ${width}px x ${height}px`;
            const resolutionText = `Screen resolution: ${screenWidth}px x ${screenHeight}px (DPR: ${dpr})`;

            document.getElementById('viewport-size').textContent = `${viewportSizeText}\n${resolutionText}`;
            console.log(viewportSizeText);
            console.log(resolutionText);
        }

        getViewportAndResolution();

        window.addEventListener('resize', getViewportAndResolution);
        window.addEventListener('orientationchange', getViewportAndResolution);
    </script>
</body>
</html>

이 코드를 통해, 레티나 디스플레이 장치에서 뷰포트 크기와 실제 해상도를 비교할 수 있습니다. 대부분의 브라우저에서 기본적으로 디바이스 픽셀 비율을 고려하여 웹 콘텐츠를 스케일링하기 때문에, 개발자는 뷰포트의 CSS 픽셀 크기를 주로 다루게 되며, 이는 일반 디스플레이와 고해상도 디스플레이 간에 일관성을 유지합니다.

장치에 따른 DPR 수치를 확인 할 수 있는 레퍼런스가 있을가?

디바이스 픽셀 비율(DPR)은 다양한 장치에 따라 다를 수 있으며, 이를 확인할 수 있는 몇 가지 방법과 레퍼런스가 있습니다. 다음은 DPR 수치를 확인할 수 있는 몇 가지 유용한 정보와 사이트입니다:

일반적인 DPR 값

일반적인 장치 DPR 값:
- 데스크탑 모니터: 1 (표준 해상도)
- 애플 레티나 디스플레이:
  - iPhone 6, 7, 8: 2
  - iPhone 6 Plus, 7 Plus, 8 Plus: 3
  - iPhone X, XS, 11 Pro: 3
  - iPhone XR, 11: 2
  - iPad (7세대): 2
  - MacBook Pro Retina: 2
- 안드로이드 디바이스:
  - Nexus 5: 3
  - Samsung Galaxy S8: 4
  - Google Pixel: 2.5
  - Google Pixel 2: 2.75

온라인 레퍼런스와 도구

My Device.io:
- My Device.io는 다양한 장치의 해상도, DPR, 뷰포트 크기 등을 확인할 수 있는 사이트입니다. 다양한 기기의 세부 정보를 검색할 수 있습니다.
CSS-Tricks DPR Table:
- CSS-Tricks는 여러 기기의 DPR 값을 정리해둔 표를 제공합니다.
Viewport Sizes:
- Viewport Sizes는 다양한 장치의 뷰포트 크기와 DPR 값을 확인할 수 있는 데이터베이스를 제공합니다.
WhatIsMyScreenResolution.com:
- WhatIsMyScreenResolution.com은 현재 사용 중인 장치의 화면 해상도와 DPR을 확인할 수 있는 도구를 제공합니다.

JavaScript로 DPR 확인하기

JavaScript를 사용하여 클라이언트 장치의 DPR을 동적으로 확인할 수도 있습니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Device Pixel Ratio</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }
        .container {
            padding: 10px;
            background-color: lightgray;
            border-radius: 5px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Device Pixel Ratio Example</h1>
    <p id="dpr-info"></p>
    <div class="container">
        <p>Check the console for device pixel ratio and resolution details.</p>
    </div>

    <script>
        function updateDPRInfo() {
            const dpr = window.devicePixelRatio;
            const screenWidth = screen.width * dpr;
            const screenHeight = screen.height * dpr;

            const dprInfoText = `Device Pixel Ratio: ${dpr}\nScreen resolution: ${screenWidth}px x ${screenHeight}px`;
            document.getElementById('dpr-info').textContent = dprInfoText;
            console.log(dprInfoText);
        }

        updateDPRInfo();

        window.addEventListener('resize', updateDPRInfo);
        window.addEventListener('orientationchange', updateDPRInfo);
    </script>
</body>
</html>

이 코드를 사용하면 사용 중인 장치의 DPR을 실시간으로 확인할 수 있습니다. 또한, 사용자가 창 크기를 변경하거나 화면 방향을 변경할 때마다 DPR 정보가 업데이트됩니다.

위의 방법들을 통해 다양한 장치의 DPR 값을 쉽게 확인할 수 있습니다.

저작자표시 비영리 변경금지

'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글

[sublimetext] 코드 정렬 애드온 (0)	2024.07.25
[sublimeText] 코드 찾아가기 애드온 (0)	2024.07.25
[CSS] 스타일시트 팁 30가지 (0)	2024.07.24
[HTML] 부모 relative, 자식 absolue 사이에, wrapper 태그를 삽입? (0)	2024.07.24
[CSS] 2 x 2 이상의 자식을 가진 요소의 flex 레이아웃으로 (0)	2024.07.24

[HTML] Viewport, DPR, 가로, 세로 다르게 지정

1. 뷰포트 메타 태그:

2. PC와 모바일의 차이점:

3. CSS 미디어 쿼리:

4. 반응형 이미지와 비디오:

5. 기타:

레티나 디스플레이와 뷰포트의 관계

일반적인 DPR 값

온라인 레퍼런스와 도구

JavaScript로 DPR 확인하기

'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글

댓글

티스토리툴바