책 씹어먹는 즐거움

이쯤에서 CSS의 길이(length) 단위들에 대하여 정리하고 넘어가는 것이 적절할 것 같다. CSS로 스타일링을 할 때 길이(length)를 제시해야하는 경우가 많아 앞으로 width(너비), margin(여백), padding, font size(텍스트의 크기), boder-width(경계선의 굵기) 등 수많은 경우에 길이(length)를 속성값으로 제시하기 때문이다.

      
길이(length)와 같이 속성값에 단위가 붙는 경우에는 해당 숫자와 단위 사이는 10px, 2em 등 같이 공백없이 딱 달라붙어야 한다.

앞서 언급한 것처럼 절대 크기(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)로 명시한 것이다.

이 때 단위인 px와 숫자 사이에 공백을 두지 말아야 한다.

절대 크기(absolute size)는 사용자가 임의로 텍스트의 크기를 조절할 수는 없지만 줌(zoom)을 이용하여 웹페이지 전체를 확대하거나 축소할 수는 있다.

다음과 같이 작성하고 0043.html로 저장하자.

실행해보면 다음과 같이 텍스트의 크기가 1cm와 10mm인 경우 서로 동일하고, 1in, 72pt, 6pc, 96px가 서로 동일하게 나타나는 것을 확인할 수 있다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0043 CSS의 길이(length) 중 절대 길이(absolute length).apkg

2018-12-26-21:43 본문 및 Anki 파일에서의 문구를 다듬고 Anki에서 오류를 수정함(1in를 9pc로 작성한 오류 수정)

3. 대체할 문구를 설정하는 alt 속성

alt 속성은 이미지를 대체하는 문구(alternate text)를 부여하기 위한 속성이다. 만약, 어떠한 이유로든지 웹페이지에 이미지를 표시되지 않으면 이 문구가 대신 화면에 나타난다.

alt 속성은 다음과 같이 작성한다. (간단한 예제 파일: img요소alt속성test.html)

이미지로 아름답게 꾸민 웹페이지가 항상 예쁘게 보이는 것은 아니다. 특히, 이미지를 사용할 경우 웹페이지의 용량이 커지기 때문에 느린 인터넷 속도, 열악한 디바이스 등으로 인하여 웹페이지를 제대로 볼 수 없을 때가 있다. 특히 시각장애인의 경우 스크린 리더기로 읽어 웹페이지를 보지 않고 듣는데 이미지로 꾸며진 웹사이트는 이러한 스크린 리더기에 장애로 작용한다. 

이러한 문제점 때문에 웹페이지에 이미지가 나타나지 않거나, 혹은 스크린 리더기로 이미지를 읽기 위하여 HTML5부터는 <img /> 요소에 alt 속성을 필수적으로 부여하도록 되었다.

sun.jpg 파일을 불러오지 못할 경우 아래와 같이 alt 속성으로 부여한 대체 문구가 나타나는 것을 볼 수 있다.

4. 이미지 크기 조절

이미지를 웹페이지에 집어넣으려면 이미지 크기를 조절하는 것이 필수적이다. 어떤 사진은 너무 크고 어떤 그림은 너무 작을 수 있기 때문이다. 

일단은 전통적으로 <img /> 요소에 width와 height 속성을 다음과 같이 부여해 크기를 조절해왔다.

이 때 width와 height 속성의 속성값은 항상 픽셀(px)의 수이다.

이미지의 크기를 특정하지 않으면 웹페이지 레이아웃이 제멋대로이고 이미지가 웹페이지에 로딩되면서 웹페이지가 요동치는 현상이 발생하게 되므로 되도록이면 항상 크기를 특정하도록 하자.

뒤에 언급하겠지만 브라우저는 HTML로 작성된 페이지를 먼저 보여주고 이미지는 그 크기에 따른 공간만 남겨놓고 뒤에 따로 이미지를 로딩하여 이미지를 보여주게 된다. 즉, 페이지의 레이아웃을 만들었다가 이미지를 받은 후 이를 다시 조정하는 것이다. 

따라서 크기가 결정된 이미지를 웹페이지에 집어넣으면, 브라우저는 이에 맞추어 페이지 레이아웃을 만들 수 있게 된다. 하지만 HTML에서 이미지 크기가 결정되지 않으면 브라우저는 페이지에서 이미지를 보여주기 전에 임의로 이미지의 크기를 결정하게 되고 실제 이미지가 페이지에 로딩되면서 그 크기의 변화로 웹페이지가 출렁거리게 되는 것이다.

최근에는 CSS 스타일을 적용하는 sytle 속성을 이용하여 다음과 같이 이미지의 크기를 조절할 수 있다.

최근에 <img /> 요소에 style 속성을 이용하여 이미지의 크기를 결정하는 까닭은 각각의 <img /> 요소에 style 속성으로 이미지의 크기를 규정해놓으면 추후에 배울 CSS의 스타일 시트에서 일괄적으로 이미지의 크기를 조작할 때 그 적용을 받지 않을 수 있기 때문이다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0017 이미지를 보여주는 img 요소 02.apkg