0043 CSS의 길이(length) 중 절대 길이(absolute length)
이쯤에서 CSS의 길이(length) 단위들에 대하여 정리하고 넘어가는 것이 적절할 것 같다. CSS로 스타일링을 할 때 길이(length)를 제시해야하는 경우가 많아 앞으로 width(너비), margin(여백), padding, font size(텍스트의 크기), boder-width(경계선의 굵기) 등 수많은 경우에 길이(length)를 속성값으로 제시하기 때문이다.
길이(length)와 같이 속성값에 단위가 붙는 경우에는 해당 숫자와 단위 사이는 10px, 2em 등 같이 공백없이 딱 달라붙어야 한다.
절대 길이(absolute length)
앞서 언급한 것처럼 절대 크기(absolute size)는 특정한 물리적 길이를 제시한 것이다. 그래서 그 단위도 cm은 센티미터(centimeter), mm은 밀리미터(millimeter), in은 인치(inch)와 같이 모두 현실에서 실제 길이를 측정할 때 자주 사용하는 단위들이다.
포인트(pt)는 1/72인치로 활자를 주조하여 사용하던 시절 활자의 치수를 규정하던 단위이다. 지금은 글자 크기나 줄 간격을 지정할 때 많이 사용한다. 파이카(pc)는 12포인트(pt)이고 1/6인치로 인치(in)와 포인트(pt)의 중간 단위이다.
픽셀(px)을 제외하면 절대 길이(absolute length)에 사용되는 단위들은 모두 실제 자를 대고 길이를 측정할 때 사용하던 길이들이다. 따라서 이러한 실제 길이를 속성값으로 사용하면 인쇄하거나 제작할 때 정확히 필요한 사이즈의 결과물을 구현할 수 있다는 장점이 있다. 따라서 정확한 결과물을 실제로 구현하기 위하여 작업하는 디자이너들은 이러한 정확한 절대 길이(absolute length)를 알아두면 매우 유용할 수 있다.
하지만 웹페이지는 그런 실제 구현하고 조금 다르다. 다양한 디바이스에서 서로 다른 화면 크기와 해상도를 가진 모니터 화면에 표시되는 웹페이지는 실제 물리적 길이가 중요하지 않으므로 절대 길이(absolute length)가 별로 유용하지 않다.
하지만 이러한 절대 길이(absolute length) 중 픽셀(px)은 그 성격이 조금 다르다.
픽셀(px)
픽셀(px)이란 모니터 액정이 나타내는 가장 작은 하나의 점으로 화소라고도 한다. 우리가 흔히 말하는 해상도 1024×768 같은 수치는 가로 1024개의 픽셀이고 세로 768개로 전체 786432개의 픽셀이라는 의미이다. 이미지를 더 많은 픽셀을 이용한다면 더 상세하게 표현할 수 있게 되므로 픽셀이 많을수록 고품질의 이미지를 보여줄 수 있게 된다. 광고에 5백만 화소니 천만 화소니 하는 것을 강조하는 이유다.
픽셀(px)로 길이를 제시하면 모니터의 화면에서 몇 개의 픽셀로 해당 결과물을 구현할 것인가를 나타낸다는 점에서 현실 세계의 실제 길이를 나타내는 다른 절대 길이(absolute length)들과 성격이 조금 다르다.
모니터 화면으로 나타나는 결과물들은 현실에서 어떻게 구현되는지와 상관없이 모니터에서는 결국 픽셀로 환원되어 나타난다. 다양한 기기의 다양한 화면 크기에서도 결국 픽셀로 결과물이 구현되므로 웹페이지와 같이 주로 모니터로 출력되는 결과물에는 픽셀이 가장 적합한 길이 단위인 셈이다.
따라서 웹 디자인을 한다면 구현된 결과물이 모니터 스크린에 나타나므로 다른 절대 길이(absolute length) 단위는 몰라도 픽셀(px) 단위는 어느 정도 사용할 줄 알아야 할 것이다.
물론, 픽셀(px)은 절대 길이(absolute length)이므로 실제 물리적 길이가 1/96 인치로 설정되어 있다.
다음의 구문은 텍스트의 크기를 14픽셀(px)로 명시한 것이다.
p { font-size: 14px; }
이 때 단위인 px와 숫자 사이에 공백을 두지 말아야 한다.
절대 크기(absolute size)는 사용자가 임의로 텍스트의 크기를 조절할 수는 없지만 줌(zoom)을 이용하여 웹페이지 전체를 확대하거나 축소할 수는 있다.
다음과 같이 작성하고 
0043.html로 저장하자.
<!DOCTYPE html>
<html>
<head>
<title>텍스트 크기</title>
<style>
p.centimeter { font-size: 1cm; }
p.millimeter { font-size: 10mm; }
p.inch { font-size: 1in; }
p.point { font-size: 72pt; }
p.pica { font-size: 6pc; }
p.pixel { font-size: 96px; }
</style>
</head>
<body>
<p class="centimeter">텍스트 크기(1cm)</p>
<p class="millimeter">텍스트 크기(10mm)</p>
<p class="inch">텍스트 크기(1in)</p>
<p class="point">텍스트 크기(72pt)</p>
<p class="pica">텍스트 크기(6pc)</p>
<p class="pixel">텍스트 크기(96px)</p>
</body>
</html>
실행해보면 다음과 같이 텍스트의 크기가 1cm와 10mm인 경우 서로 동일하고, 1in, 72pt, 6pc, 96px가 서로 동일하게 나타나는 것을 확인할 수 있다.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0043 CSS의 길이(length) 중 절대 길이(absolute length).apkg
2018-12-26-21:43 본문 및 Anki 파일에서의 문구를 다듬고 Anki에서 오류를 수정함(1in를 9pc로 작성한 오류 수정)
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0045 CSS 반응형 길이(responsive length) 단위 (0) | 2019.01.04 |
|---|---|
| 0044 CSS의 길이(length) 중 상대 길이(relative length) (0) | 2019.01.03 |
| 0042 텍스트의 크기 font-size 개요 (0) | 2018.12.23 |
| 0041 CSS로 텍스트의 폰트 설정하기(font-family 속성) (0) | 2018.12.19 |
| 0040 글꼴, 서체, 폰트 개요 (0) | 2018.12.18 |