[CSS] 단위와 값 (1)

css로 표현할 수 있는 여러가지 단위(절대 및 상대)와 값들

• 단위로는 절대 단위, 상대 단위가 있다.
• 이중 절대단위는 px(cm,pt 등 이외의 것도 있지만, 결국 컴퓨터가 계산할 때는 px단위로 인식함 + 주로 쓰는 것은 px)이 대표적이고, 상대단위는 다시 글꼴의 상대크기, 뷰포트를 쓰는 백분율 길이로 나뉜다.
• 먼저, px에 대해서 설명해보면, 컴퓨터의 대표적인 출력 장치인 모니터는 전부 이 pixel 단위로 되어있다. 즉, 하나의 작은 점들로 이루어진 픽셀이 여러개가 다닥다닥(?) 붙어있어서 우리에게 깔끔한 이미지처럼 렌더링되는 것이다. 실제로 우리 모니터를 확대해보면, 점단위로 되어있음을.. 보기 어려울 수 있지만, 볼 수 있다.
• 이러한 px 단위는 css에서 단위로 쓰일 때 절대단위로 쓰이는데, 그 이유는 모든 모니터에서 이 픽셀의 크기가 같기 때문에(레티나 디스플레이는 제외) 예를 들어, 15px은 15개의 픽셀을 차지하는 크기인데, 모든 모니터에서 같게 표현되므로, 절대단위이다.
• px은 주로 어떤 디바이스에서도 동일한 크기로 써도 되는 부분에 대해서 쓰는데, 요즘 같이 다양한 디바이스에서 웹을 보여줘야하는 시대에는 그렇게 많이 쓸 수 없다고 생각한다.
• 다음으로 상대단위를 살펴보면, 먼저, 'em, rem'이 있다. em, rem은 내가 개발자로 일할 때도 상당히 많이 사용했던 단위인데, 먼저, em은 부모요소(font-size)를 기준으로 font-size를 정한다. 무슨 말인가하면, 부모요소의 font-size가 20px인 상황에서 자식요소의 font-size를 2em으로 했다면 1em=20px이기 때문에 2em = 20px * 2 = 40px이 된다. 이처럼 em 단위를 쓰면, 부모요소의 font-size를 1em의 기준으로 잡고, 부모의 폰트사이즈에 따라 유동적으로 변하게 된다(물론, 부모의 font-size를 px로 잡으면 반응형 설계는 안될 것). 부모요소보다 2배 정도 크게 하고 싶다할 때 등 부모요소를 기준으로 font-size를 설정하고 싶을 때 쓰면 된다.
• 이와 달리 rem 단위는 부모요소를 기준으로 하는 것이 아닌 root요소의 font-size를 기준으로 한다(body). 따라서, body의 font-size가 18px일 때, 어떤 요소의 font-size를 2rem으로 주면, 18px * 2 =36px이 된다. 앞서 말한, em, rem은 font-size를 지정할 때도 유용하게 쓰이지만, margin 값 등을 줄 때도 쓴다. 반응형 설계를 위해서 body의 font-size를 디바이스별로 다르게 세팅하고, 마진값 등의 단위를 rem으로 맞춰놓으면, 디바이스별로 크기가 변하여 반응형 설계가 가능해진다.
• 두번째 상대단위로 뷰포트를 기준으로하는 'vw, vh'가 있다. 이 둘은 뷰포트(앞서 말한 브라우저에서 실제 웹사이트가 렌더링되는 부분)를 기준으로 백분율 단위로 표현이 된다. 예를 들어, 뷰포트의 가로길이와 똑같이하고 싶으면 100vw를 쓰면되고, 가로길이의 30%만 차지하고 싶게 하고 싶다하면, 30vw를 쓰면되고, 높이도 똑같이 세로 길이의 50%를 차지하게 하고 싶다하면 30vh를 쓰면 된다. 이러한 뷰포트 기준 상대 단위는 모바일 디바이스의 반응형을 설계할 때나 웹 브라우저의 크기를 줄였다 키웠다할 때 반응형 설계에 편리하다.
• 마지막으로 '퍼센트' 에 대해서 정리해보면, 퍼센트는 위에서 말한 em과 유사한 기능을 하는데, 즉, 부모요소를 기준으로 몇 %의 크기인지를 결정한다. 예를 들어, 부모요소의 font-size가 20px일 때, 자식요소의 font-size로 50%를 주면, font-size가 10px이 된다. 유사하게 부모요소의 width를 10rem으로 주고(body font-size가 16px이라는 가정) 자식요소의 width를 50%로 주면 1016px = 160px(부모요소의 width) 50 % = 80px 적용된다.
• 위와 같이 다양한 단위를 쓸 수 있다는 점을 기억하고, 만약 실제로 몇 px로 적용되는지를 보고싶다면 개발자 도구의 computed 부분을 참고하면 된다.

다음 포스팅에서는 ..

: vmin, vmax 그리고 calc, max, min에 대해서 하고자 한다.