반응형웹(Responsive Web)이란?
PC보다 스마트폰 등 다른 디바이스로 정보를 얻는게 많아짐으로 일반 웹보다 반응형 웹을 선호하기 시작했다. 반응형웹은 다양한 디바이스 화면 크기에 따라 변해 사용자의 편의성에 맞춘 웹이다.
미디어쿼리(Media Query)
반응형 웹을 만들기 위해서는 필수적으로 미디어쿼리를 알아야한다
주로 웹, 태블릿, 모바일 세가지로 구분하여 CSS에 조건을 설정한다.
- 모바일 해상도 320px ~ 768px
- 태블릿 해상도 768px ~ 1024px
- PC 해상도 1024px ~ 1920px
미디어쿼리의 유형
-
all : 모든 매체
-
screen : 컴퓨터, 탬블릿, 모바일 모든 스크린
-
print : 프린트 기기
-
speech : 스크린 리더
미디어쿼리 최소화
-
상대길이인 vh, vw, em, rem 등으로 폰트크기를 잡기 (px는 절대 단위이기 때문에 사용 x)
-
grid, flex 등 반응형 레이아웃 잡기
픽셀 절대 단위 px
픽셀 단위 px는 CSS에서 가장 기본적인 단위다. px은 절댓값으로 단호하게 선언하는 것이다. CSS에서 1px은 사용자 디스플레이 기기의 논리적 해상도 1pt에 대응하며, 픽셀 단위로 지정한 크기는 나중에 크기를 변경하고 싶다면 다른 픽셀값으로 다시 지정해야 한다.
따라서 우리는 px보다는 더 유연하고 좋은 단위인 rem을 사용해서 최소화를 해야한다!
루트 요소 폰트 사이즈의 상대 단위 REM
em 단위는 유연하지만, 픽셀 단위를 대체하기엔 무리가 있다. rem 단위는 HTML 루트 요소의 폰트 사이즈가 계산의 기반값이다.
루트 요소의 폰트 사이즈는 웹 브라우저의 기본 폰트 사이즈가 결정하며, 대부분의 웹 브라우저에서 16px로 정해놓고 있다. 그렇다면 CSS 프로퍼티의 값으로 1.5rem을 지정한 경우, 루트 요소 폰트 사이즈인 16px에 1.5가 곱해져서 최종 계산된 결과값은 24px이 된다. 자신의 폰트 사이즈에 비례하는 em 단위와는 달리, rem 단위는 어떤 요소에서 사용하든 계산 기반값이 일관된다.
REM 단위 장점
웹 사이트 전반에 rem 단위를 사용하면 다음 세 가지 장점을 얻을 수 있다.
- 웹 브라우저마다 다른 기본 폰트 사이즈에 대응
- 저시력자 접근성에 대응
- 전체 스타일의 스케일을 손쉽게 조정
