CSS의 단위

사이트 레이아웃을 구성하면서 왼쪽 부분에 사이드바(주황색 부분)를 만들고 싶었다.

위 그림과 같이 화면 전체의 15%정도(?)를 차지하도록 하고싶었는데, width: 15%으로는 꿈쩍도 하지 않았다.

그래서 이것을 해결할 방법을 알아보다가 새로운 단위들을 더 알게되어 이렇게 정리하게 되었다.

 

CSS의 단위는 고정적인 길이(absolute length)가 있고, 상대적인 길이(relative length)가 있다.

 

1. 고정적인 길이(Absolute length)

고정적인 길이는 어느 화면으로 보든지 같은 사이즈로 나타난다. 요즘에는 휴대폰, 패드, 노트북 등 다양한 기기로 보기 때문에 고정적인 길이를 사용하는 것을 추천하지는 않는다.

cm	centimeters
mm	millimeters
in	inches (1in = 96px = 2.54cm)
px	pixels (1px = 1/96th of 1in)
pt	points (1pt = 1/72 of 1in)
pc	picas (1pc = 12pt)

 

2. 상대적인 길이(Relative length)

(* 표에 나오는 viewport는 브라우저 화면 크기를 말한다.)

em	부모와 자식 간의 상대적인 폰트사이즈를 나타낸다. 가령 부모의 font-size가 15px고, 자식의 font-size가 2em이라면 자식이 부모 사이즈의 2배의 크기를 가진다는 것을 의미한다. 자식의 font-size는 실질적으로 30px이 되는 것이다.
ex	현재 폰트 사이즈의 x-height의 절반 사이즈를 나타낸다. (잘 사용되지는 않는다.) 현재 폰트사이즈가 16px이었다면 1ex는 8px이 될 것이고, 2ex는 원래의 크기와 같게 만들어줄 것이다. *x-height이라는 것은 소문자 x의 높이값이기도 하다.
ch	"0"의 너비의 상대적인 크기를 나타낸다.
rem	root 요소와의 상대적인 폰트사이즈를 나타낸다. em과 마찬가지인데 root라는 기준 하나만 두고 몇 배를 가질 것인가를 결정한다.
vw	viewport 너비(width)의 1%를 나타낸다.
vh	viewport 높이(height)의 1%를 나타낸다.
vmin	viewport 가로세로 길이중의 짧은 것의 1%를 나타낸다.
vmax	viewport 가로세로 길이중의 긴 것의 1%를 나타낸다.
%	부모 요소와의 상대적인 길이를 나타낸다.

 

결과적으로 나는 사이드바를 px를 사용하여 만들었다. 화면 크기가 줄어든다고 사이드바의 크기가 같이 줄어들기를 원하지 않았기 때문이다.

 

references

https://www.w3schools.com/cssref/css_units.asp

https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573