1. 상대 단위
%,em,rem,ch,vw,vh등이 있다.
1) %
- 백분율 단위(
%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정한다.
#large {
font-size: 200%;
}
2) em
- 배수 단위(
em)는 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정한다.
#small {
font-size: 0.7em;
}
3) vw(viewport width)
- vw는 viewport(브라우저에서 현재 보이고 있는 창의 크기) 너비의 1%로 계산한다. 10vw는 viewport 너비의 10%이다.
4) vh(viewport height)
- vh는 viewport(브라우저에서 현재 보이고 있는 창의 크기) 높이의 1%로 계산한다. 10vh는 viewport 높이의 10%이다.
2. 절대 단위
px,pt등이 있다.
1) 픽셀 단위
- 픽셀 단위(
px)는 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정한다.
#fixed {
font-size: 20px;
}
3. 단위 사용 선정 기준
1) 텍스트 사이즈를 정할 때
1-1. 일반적인 경우(상대 단위)
-
상대 단위인
rem을 사용한다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리하다. -
em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어려운 반면,rem은 root의 글자 크기에 따라서만 상대적으로 변한다.
1-2. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우(절대 단위)
-
px(픽셀)을 사용한다. 픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리하다. 글꼴의 크기를 픽셀로 설정하면, 작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴 크기를 더 크게 설정하더라도 글꼴의 크기는 항상 설정된 픽셀로 고정된다. -
제목(heading)을 강조하기 위해 픽셀을 이용해 글꼴의 크기를 지정했으나 사용자의 환경에 따라 일반 텍스트보다 작게 보이는 결과를 초래할 수 있다. 그리고 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않다. 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale) 되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있다. 그래서 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.
2) 화면 사이즈를 정할 때
2-1. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우(상대 단위)
-
이때에는
vw,vh를 사용한다. 웹사이트의 보이는 영역을 Viewport라고 하며,vw,vh는 각각 viewport width와 viewport height를 뜻하며,1vw는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 뜻한다. -
화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트들에서 사용하는 방법이
100vw,100vh를 사용해 구현한 것이다. -
<body>태그에서의%는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율이다.
2-2. 반응형 웹(responsive web)에서 기준점을 만들 때(절대 단위)
- 반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말한다. 이때, 디바이스 크기를 나누는 기준을 보통
px로 정한다. 예를 들어, 데스크탑에서 볼 때, 스마트폰에서 세로 모드로 볼 때, 가로 모드로 볼 때, 태블릿으로 볼 때가 각각 다르다. 이때에는 디바이스 크기별로 CSS를 달리 적용해야 한다.
