이 데모 살펴보기
- 사이트를 미리 보려면 View App을 누른 다음 Fullscreen 을 누릅니다.
- 브라우저가 다른 이미지를 로드하도록 여러 기기를 사용하여 페이지를 새로고침합니다.
이를 위해 기기 에뮬레이터를 사용할 수 있습니다. 특정 디스플레이 밀도를 찾고 있다면 다음과 같은 기기를 사용해 보세요.
1배 밀도 | Blackberry 플레이북, 여러 외부 모니터 |
2배 밀도 | iPad 또는 iPhone 5/6 |
3배 밀도 | Galaxy S5 또는 iPhone X |
- 작동하는 코드는
index.html
를 확인하세요.
기본 원리
밀도 설명자라는 개념은 대부분의 사람에게 생소할 수 있습니다. 이 두 가지를 더 잘 이해하려면 브라우저에서 픽셀이 어떻게 작동하는지에 관한 배경 지식이 있으면 도움이 됩니다.
픽셀이란?
가장 먼저 픽셀이 무엇인지 정의해 보겠습니다. 간단해 보이지만 '픽셀'에는 여러 가지 의미가 있습니다.
- 기기 픽셀 (일명 '물리적 픽셀')
- 기기에 표시할 수 있는 가장 작은 색상의 점입니다.
- 논리 픽셀
- 그리드의 특정 위치에 색상을 지정하는 정보입니다. 이 유형의 픽셀에는 고유한 실제 크기가 없습니다.
- CSS 픽셀
- CSS 사양에서는 실제 측정 단위로 픽셀을 정의합니다. 1픽셀 = 1인치의 96분의 1입니다.
픽셀 밀도
픽셀 밀도('화면 밀도' 또는 '디스플레이 밀도'라고도 함)는 특정 물리적 영역에서 기기 픽셀의 밀도를 측정합니다. 이는 일반적으로 인치당 픽셀 수 (ppi)를 사용하여 측정됩니다.
오랫동안 96ppi는 매우 일반적인 디스플레이 밀도였습니다. 따라서 CSS에서는 픽셀을 1/96인치로 정의했습니다. 1980년대부터 Windows의 기본 해상도였습니다. 또한 CRT 모니터의 해상도였습니다.
이러한 변화는 2000년대에 LED 모니터가 일반화되면서 변화하기 시작했습니다. 특히 Apple은 2010년 Retina 디스플레이를 출시하면서 큰 화제를 모았습니다. 이러한 디스플레이의 최소 해상도는 192ppi로, '일반' 디스플레이의 두 배 해상도 (192ppi/96ppi = 2)입니다.
window.devicePixelRatio
최신 디스플레이 기술이 도입됨에 따라 '기기 픽셀'은 실제 크기와 모양이 다양해지기 시작했으며 더 이상 'CSS 픽셀'과 크기가 동일하지 않습니다. '기기 픽셀'과 'CSS 픽셀' 간의 관계를 정의해야 하는 이유로 인해 devicePixelRatio
('CSS 픽셀 비율'이라고도 함)이 도입되었습니다.
devicePixelRatio
는 특정 기기의 기기 픽셀과 CSS 픽셀 간의 관계를 정의합니다. 192ppi 기기의 devicePixelRatio
는 2 (192ppi/96ppi = 2)입니다. '디스플레이 픽셀 중 2개가 1 CSS 픽셀 크기'이기 때문입니다.
오늘날 대부분의 기기의 기기 픽셀 비율은 1.0~4.0입니다.
콘솔에
window.devicePixelRatio
를 입력하여 기기의 픽셀 밀도를 확인합니다.일반적인 기기의 픽셀 비율을 확인하려면 이 표를 참고하세요. 대부분은 1.0에서 4.0 사이입니다.
그렇다면 이 정보를 실제로 어떻게 적용할 수 있을까요?
기기 픽셀 비율을 기반으로 이미지 크기를 조절합니다.
고해상도 화면에서 이미지가 가장 잘 표시되려면 다양한 devicePixelRatios
에 다른 이미지 버전을 제공해야 합니다.
기기 픽셀 비율 | 다음을 나타냅니다. | 이 기기에서 CSS 너비가 250픽셀인 <img> 태그는 소스 이미지가... |
---|---|---|
1 | 기기 픽셀 1개 = CSS 픽셀 1개 | 너비 250픽셀 |
2 | 기기 픽셀 2개 = CSS 픽셀 1개 | 너비 500픽셀 |
3 | 기기 픽셀 3개 = CSS 픽셀 1개 | 너비 750픽셀 |
다음 사항을 참고하세요.
- 이미지 편집기, 파일 디렉터리 및 기타 위치에 나열된 픽셀 크기는 논리 픽셀의 측정값입니다.
- 고해상도 화면과 큰 디스플레이에는 더 큰 크기의 이미지가 필요합니다. 단순히 더 작은 이미지를 확대하는 것은 여러 이미지 버전을 제공하는 목적을 무효화합니다. 고해상도 이미지가 제공되지 않았다면 브라우저는 이 작업을 수행했을 것입니다.
밀도 설명어를 사용하여 여러
이미지 제공
밀도 설명어는 'srcset' 속성과 함께 사용하여 여러 devicePixelRatio에 다양한 이미지를 게재할 수 있습니다.
index.html
파일을 살펴보고<img>
요소를 확인합니다.
<img src="flower.jpg"
srcset="flower-1x.jpg 1x,
flower-2x.jpg 2x,
flower-3x.jpg 3x">
이 예를 단어로 표현하면 다음과 같습니다.
1x
,2x
,3x
은 모두 이미지의 대상인 픽셀 밀도를 브라우저에 알리는 밀도 설명어입니다. 이렇게 하면 브라우저에서 이 정보를 확인하기 위해 이미지를 다운로드하지 않아도 됩니다.- 브라우저는 세 가지 이미지 중에서 선택할 수 있습니다.
flower-1x.jpg
(픽셀 밀도가1.0
인 브라우저용),flower-2x.jpg
(픽셀 밀도가2.0
인 브라우저용),flower-3x.jpg
(픽셀 밀도가3.0
인 브라우저용)입니다. flower.jpg
는srcset
를 지원하지 않는 브라우저를 위한 대체 이미지입니다.
사용 방법:
- devicePixelRatio와
x
단위를 사용하여 밀도 설명어를 작성합니다. 예를 들어 많은 레티나 화면(window.devicePixelRatio = 2
)의 밀도 설명어는2x
로 작성됩니다. - 밀도 설명자가 제공되지 않으면
1x
로 간주됩니다. - 파일 이름에 밀도 설명자를 포함하는 것은 일반적인 규칙이며 파일을 추적하는 데 도움이 되지만 필수는 아닙니다. 이미지 파일 이름은 제한이 없습니다.
sizes
속성을 포함할 필요는 없습니다.sizes
속성은 너비 설명어에만 사용됩니다.