해상도

해상도는 기기의 가로 x 세로의 픽셀 수로 표현을합니다. 가로 세로의 픽셀 수를 곱한값이 우리가 흔히 알고 있는 화소수입니다.

예를들어 Full HD 해상도의 경우는 가로 1920 세로 1080의 픽셀을 가지고 있고 1920x1080으로 표현합니다.

절대 길이

Hardware Pixels vs. Software Pixels

하드웨어 픽셀(물리적 픽셀)과 소프트웨어 픽셀(논리적 픽셀)은 모바일기기가 많이 생겨나면서 중요해진 개념이 아닐까 생각해봅니다.

아이폰6를 예로 들면 750x1334인 아이폰6은 소프트웨어 픽셀로는 375x667의 해상도를 가집니다.

또 다른 예로 화면을 통해 예를 들어 보겠습니다.

위 화면은 예시로 만들어진 웹페이지입니다. width 길이가 1200px일때 스크린샷을 찍고 중간에 위치한 컨텐츠들의 width가 480px입니다.

이 웹페이지를 크롬브라우저 Dev Tools를 통해 아이폰6 화면으로 만들어보겠습니다.

중간에 위치한 컨텐츠의 가로길이기 480px이라고 말씀드렸으니, 위 스크린샷에서는 아이폰6의 소프트웨어 픽셀이 아닌 하드웨어 픽셀로 표시가 되고 있는것을 대략적으로 알 수 있습니다.

스마트폰의 진화

요즘 스마트폰의 스크린은 높은 픽셀 밀도를 가지고 있습니다. 이미지의 품질을 높이거나 텍스트의 가독성을 높이기 위해서 같은 공간안에 더 많은 픽셀을 집어넣게 된것입니다.

-출처: www.mydevice.io

위 사진에서 phys. 가 하드웨어 픽셀을 의미하고 CSS.가 소프트웨어 픽셀을 의미합니다.

이러한 변화때문에 모바일 기기에서 해상도크기에 맞춰 웹페이지를 로드하도록 하는게 아니라 소프트웨어 픽셀에 맞게 페이지를 로드하도록 해야했습니다.

Viewport

모바일 디바이스의 소프트웨어 픽셀에 맞도록 웹페이지가 표시되도록 하려면 HTML에 추가해줘야할 '메타 태그'가 있습니다.

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

간략하게 설명을 드리자면 content 속성에서 'width=device-width'는 모바일 디바이스의 스크린 witdh로 설정되도록 해주고, initial-scale은 초기 zoom level을 설정하고 minimum-scale은 최소 zoom level을 설정하도록 합니다.

코드를 추가해준 뒤 결과는

아이폰 화면에 꽉 차도록 페이지가 보여지게 됩니다.

다음 컨텐츠

이 다음에는 DPR에 대해서 알아보고 해상도별로 다른 이미지를 로딩할 수 있는 picture 태그에 대해서 알아보도록 하겠습니다.