반응형 웹사이트 개발의 기초

정윤숙·2023년 9월 6일

TIL

목록 보기

182/192

📒 오늘의 공부

반응형 웹, 디자인 개념, 도구의 사용

Wanted FE 9월 Challenge 강의 내용 및 개념 추가 정리

1. 반응형 웹사이트의 범위

반응형 구현 시 고려할 것

화면 크기(viewport)
- @media only screen and (max-width: 600px)
픽셀 밀도
- @media only screen and (min-resolution: 144dpi)
화면 비율
- @media only screen and (aspect-ratio: 16/9)
마우스 포인터
- @media only screen and (pointer:coarse) and (any-pointer: fine){}
  => "coarse" 포인터(터치 스크린)를 사용하면서 "fine" 포인터(마우스)도 사용 가능한 경우
  ex. 모바일 장치에서 웹 페이지를 열었지만 마우스를 연결한 경우
- @media only screen and (pointer:fine) and (any-pointer: coarse){}
  => "fine" 포인터(마우스)를 사용하면서 "coarse" 포인터(터치 스크린)도 사용 가능한 경우
  ex. 컴퓨터에서 웹 페이지를 열었지만 터치 스크린을 가진 디바이스로 작업할 수 있는 상황
- @media only screen and (hover: none) and (any-hover: hover) {}
  => "hover" 기능이 없는 환경에서 "hover" 기능을 가진 입력 장치(예: 마우스)를 사용할 때
  ex. 사용자가 마우스를 사용하면서 컴퓨터나 노트북에서 웹 페이지를 열었지만 터치 기능이 없는 경우

프린트 장치

@media only print {
background: white;
@page{
 margin: 20em
 }
}

컬러 & 컬러모드
- @media all and (color){}
  => 사용자의 디스플레이가 컬러(컬러 디스플레이)를 지원하는 경우
- @media all and (monochrome){}
  => 사용자의 디스플레이가 흑백 또는 모노크롬 모드를 지원하는 경우
- @media only screen and (prefers-color-scheme: dark){}
- @media only screen and (prefers-color-scheme: light){}
  => dark / light 모드

css5 영역

주변 광도
- 주변 조명 수준을 감지하고, 이에 따라 웹 페이지의 스타일을 조절
- @media only screen and (light-level: normal){}
  => 주변 조명이 일반적인 수준인 경우
- @media only screen and (light-level: dim){}
  => 주변 조명이 어두운 수준인 경우
  ex. 글자 크기를 크게 하거나 대비를 높이는 등의 스타일을 적용
- @media only screen and (light-level: washed){}
  => 주변 조명이 낮은 수준인 경우
  ex. 주변 밝기가 매우 낮을 때는 주로 모노크롬 색상 팔레트나 대비를 높이는 스타일을 사용
고대비 모드
- 주로 시각적으로 장애가 있는 사용자를 위해 디자인된 웹 페이지의 가독성을 향상시키는 데 사용
- @media all and (prefers-contrast:more){}
  => 사용자가 고대비 모드를 선호하는 경우
  ex. 웹 페이지의 텍스트와 배경 간의 대비를 높이고, 텍스트를 더 두껍게 만들거나 다른 고대비 스타일을 적용하여 더 쉽게 읽을 수 있게 설정
- @media all and (prefers-contrast:less){}
  => 사용자가 낮은 대비 모드를 선호하는 경우
  ex. 웹 페이지의 디자인을 부드럽게 만들거나 대비를 줄이는 스타일을 적용하여 더 부드러운 시각적 경험을 제공
애니메이션 & 투명도
- @media only screen (prefers-reduced-motion: reduce){}
  => 사용자가 애니메이션을 줄이길 원하는 경우
  ex. 웹 페이지의 모든 또는 일부 애니메이션을 비활성화하거나 감소. 이 경우 사용자가 더 쉽게 내용을 확인하고 페이지를 탐색 가능
- @media only screen (prefers-reduced-transparency: reduce){}
  => 사용자가 투명도(투명한 효과)를 줄이길 원하는 경우
  ex. 웹 페이지의 투명한 배경, 레이어 또는 투명한 효과를 비활성화하거나 줄일 수 있음. 이 경우 사용자가 웹 페이지 내용을 더 명확하게 볼 수 있음

반응형 구현 참고 사이트

2. 비트맵(픽셀)과 벡터의 차이

비트맵(픽셀)
- 점(픽셀)을 모아 그래픽을 만듦
- 고정된 해상도를 가지므로 확대하면 깨지기도 함
- 사진, 일러스트, 텍스트와 같은 복잡한 이미지에 사용
- jpg, png, gif, bpm, webp
벡터
- 좌표를 계산하여 그래픽을 만듦
- 해상도에 영향을 받지 않으므로 얼마나 확대하든 이미지 품질은 유지
- 일반적으로 픽셀 이미지보다 용량 작음
- 로고, 아이콘, 일러스트 등의 디자인에 적합
- ai, svg, eps, pdf
💡 웹사이트 최적화를 위해 고려할 것
- icon이라고 무조건 svg 형식을 써야 하는 것 아님
- png 파일이 용량이 작다면 icon으로 png 써도 됨
- 항상 최적화 고려하기

3. 해상도외 화면밀도

화면밀도(Pixel Density): 디스플레이의 물리적 크기와 해상도 사이의 관계
실제 기기의 디스플레이 픽셀과 CSS에서 인식하는 픽셀이 다르다.
- 디바이스 픽셀은 디스플레이의 물리적 픽셀을 의미
- CSS 픽셀은 웹 페이지에서 사용되는 추상적인 픽셀 단위
- 레티나 디스플레이 및 고화면 밀도 디바이스에서 CSS 픽셀은 디바이스 픽셀보다 작을 수 있으며, 브라우저는 이 차이를 해결하여 웹 페이지를 올바르게 렌더링한다.
PPI(Pixels Per Inch): 디스플레이의 픽셀 밀도를 나타내는 지표
- ex. 460ppi = 1인치 안에 460픽셀이 들어감
DPR(Device-pixel-ratio): 디바이스의 픽셀 밀도를 나타내는 지표
- 디바이스 픽셀 / css 픽셀로 계산
  ex. DPR: 2 => 1개의 CSS 픽셀 안에 디바이스 픽셀이 2x2로 배치
- DPR 값이 클수록 화면이 더 선명해진다 = 고해상도 화면
- 브라우저는 디바이스의 DPR 값을 이해하고, 고해상도 화면에 더 선명한 이미지를 표시하거나 CSS를 조정하여 레티나 디스플레이와 같은 디바이스(고해상도)에서 최적의 화면을 제공한다.
- 💡 디바이스의 화면 해상도 및 픽셀 밀도를 이해하는 것은 웹 디자인 및 개발에 필수적인 요소

DPR 확인 가능한 사이트

4. 사이즈의 종류와 특징

	고정	기준	환산
px	O	화면	1px = 화면의 최소 픽셀
%	X	부모요소	1% = 부모 요소 크기의 1%
em	X	부모 폰트 크기	1em = 부모 요소의 폰트 크기
rem	X	root(html)	1rem = html 태그의 폰트 크기
vw	X	viewport	1vw = viewport 너비의 1%
vh	X	viewport	1vh = viewport 높이의 1%
vmin	X	viewport	vw와 vh 중 작은 값
vmax	X	viewport	vw와 vh 중 큰 값