1. 하드웨어 픽셀과 소프트웨어 픽셀
하드웨어 픽셀 (Device Pixel)
- 물리적인 디스플레이 화면에서 실제로 존재하는 픽셀입니다.
- 디바이스의 제조 과정에서 정해지는 고정된 값입니다.
- 높은 해상도를 가진 디바이스는 더 많은 하드웨어 픽셀을 가질 수 있습니다.
- 예: iPhone 13 Pro의 실제 해상도(하드웨어 픽셀)는 2532 × 1170
소프트웨어 픽셀 (CSS Pixel)
- 브라우저가 해석하는 논리적인 픽셀 단위입니다.
- px 단위로 정의되며, CSS에서 사용됩니다.
- 고해상도 디바이스에서는 1개의 CSS 픽셀이 여러 개의 하드웨어 픽셀을 차지할 수 있음.
2. 뷰포트 메타태그
뷰포트(Viewport) 메타태그는 웹페이지가 모바일 및 다양한 화면 크기에 맞게 조정되도록 하는 중요한 태그입니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">| 옵션 | 설명 |
|---|---|
| width=device-width | 뷰포트 너비를 기기의 논리적 너비(CSS 픽셀)로 설정 |
| height=device-height | 뷰포트 높이를 기기의 논리적 높이(CSS 픽셀)로 설정 |
| initial-scale=1.0 | 페이지 로드 시 초기 확대/축소 비율 설정 (1.0 = 기본 크기) |
| minimum-scale=1.0 | 사용자가 최소한으로 축소할 수 있는 비율 |
| maximum-scale=3.0 | 사용자가 최대한으로 확대할 수 있는 비율 |
| user-scalable=no | 사용자의 확대/축소 기능을 비활성화 (접근성 문제로 권장하지 않음) |
- user-scalable=no는 사용자의 접근성을 저해할 수 있으므로 권장되지 않습니다.
- width=device-width 설정이 없으면 페이지가 비정상적으로 확대될 수 있습니다.
3. 미디어쿼리
미디어쿼리(Media Query)는 기기의 화면 크기, 해상도, 방향(가로/세로) 등에 따라 CSS 스타일을 변경할 수 있도록 합니다.
@media (조건) {
/* 적용할 CSS */
}
| 속성 | 설명 |
|---|---|
| max-width | 지정한 너비보다 작을 때 스타일 적용 |
| min-width | 지정한 너비보다 클 때 스타일 적용 |
| max-height | 지정한 높이보다 작을 때 스타일 적용 |
| min-height | 지정한 높이보다 클 때 스타일 적용 |
| orientation | landscape(가로), portrait(세로) |
예시
/* 화면 너비가 768px 이하일 때 적용 (모바일 스타일) */
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}
/* 화면 너비가 1024px 이상일 때 적용 (태블릿 및 데스크톱) */
@media (min-width: 1024px) {
body {
background-color: white;
}
}
/* 가로 모드 (landscape)일 때 스타일 적용 */
@media (orientation: landscape) {
body {
background-color: blue;
}
}