CSS 길이 단위
수정하기
문서 생성 2022-01-24 19:03:21 최근 수정 2022-05-23 22:27:44
절대 길이 단위
화면 디자인을 할 때 절대 길이 단위를 사용할 때는 아주 조심히 진행해야 한다. 절대 길이 단위와 디스플레이 장치 사이의 대응값은 근사치이기 때문이다.
- 센티미터(
cm)1in는2.54cm1cm는0.394in
- 밀리미터(
mm)1cm는10mm2.54mm는1in1mm는0.0394in
- 쿼터밀리미터
1/4mm4q는1mm40q는1cm
- 인치(
in) - 포인트(
pt)- 프린터와 타자기에서 사용되어온 단위로 수십년 동안 워드프로세서에서 사용한 표준 단위
1in는72pt
- 피카(
pc)이름이 귀엽다- 인쇄업계에서 쓰는 용어
1pc는12pt6pc는1in
상대 길이 단위
em-높이(em)
- 주어진 폰트의 em-높이
- em-높이란 해당 폰트로 렌더링한 캐릭터 박스의 높이를 말하며,
font-size를 기준으로 한다. 현재 element의font-size를 기준으로 하는 것 - 예를 들면,
font-size: 1.2em은font-size: 120%와 같다.
- em-높이란 해당 폰트로 렌더링한 캐릭터 박스의 높이를 말하며,
루트 요소 em-높이(rem)
- 루트 요소(
<html>)이 갖고 있는 폰트 사이즈를 기준으로 하는 em-높이다. - 대부분
16px
x-높이(ex)
- 주어진 폰트로 렌더링한 소문자 'x'의 높이
- 폰트 대부분이 x-높이를 따로 정의하지 않기 때문에 부정확하다.
제로 너비(ch)
- 현재 폰트 패밀리와 크기로 렌더링한
0의 너비 - 부정확하지만 '한 글자'라는 뜻으로 쓰인다. 이 표현이 맞는 경우는 모든 문자의 너비가 똑같은 고정폭 폰트일 때뿐.
픽셀(px)
- CSS에서 픽셀은 1인치에 96개 단위를 넣을 수 있는 크기를 말한다.
뷰포트 너비 단위(vw)
- 뷰포트 너비를 100으로 나눈 값
- 예를 들어 뷰포트 너비가
937px라면1vw는9.37px와 같다. - 브라우저 윈도우 크기가 바뀌는 등 뷰포트 너비가 변경되면
vw값도 그에 따라 변경된다.
뷰포트 높이 단위(vh)
- 뷰포트 높이를 100으로 나눈 값
- 예를 들어 뷰포트가
650px라면1vh는6.5px다. - 브라우저 윈도우 크기가 바뀌는 등 뷰포트 높이가 변경되면
vh값도 그에 따라 변경된다.
뷰포트 최소 단위(vmin)
- 뷰포트 너비와 높이를 100으로 나눈 값 중 더 작은 쪽을 말한다.
- 예를 들어 뷰포트 너비가
937px, 높이가650px이라면1vmin은6.5px이다.
뷰포트 최대 단위(vmax)
- 뷰포트 너비와 높이를 100으로 나눈 값 중 더 큰 쪽을 말한다.
- 예를 들어 뷰포트 너비가
937px, 높이가650px이라면1vmax은9.37px이다.
reference
- 한선용 역, 에릭 마이어 저, 《CSS 핵심 실용 가이드》, O'Reilly, 2021년