[HTML/CSS] 폰트 사이즈 단위
[HTML/CSS] 폰트 사이즈 단위
|
앞서 기본 문서 작성에 필요한 태그들을 알아봤죠? <font>태그는 1~7까지의 글자 크기를 다루는데 매번 사이즈를 지정 해 줄수도 없고 좀더 세세한 사이즈가 필요로 하게됐죠. 그래서 폰트는 HTML보다 CSS에서 주로 사용하게 됩니다. 그런데 폰트 사이즈의 단위가 많다보니 헷갈릴 수도 있고, 어떠한 단위를 언제 써야 하는지 알아야겠죠? |
|
|
|
|
|
HTML에서 속성을 style로 지정한것은 CSS로 아래 단위를 따라가게 됩니다. 티스토리 스킨처럼 HTML에 CSS를 함께 사용하는것이 아니라 따로 작성하는 경우도 마찬가지로 아래 단위를 기준으로 작성합니다. CSS의 정의는 다음 포스팅에서 설명할게요. |
절대단위in, cm, mm, pt, pc
모니터나 프린터 등의 출력장치의 속성을
알고 있는 경우 지정한 단위대로 표현함. |
상대단위em, ex, px, %
각 기종간의 호환성을 위해 상대적인 크기를
표현하여 최근에는 PC, 모바일, 태블릿 등
다양한 기기를 사용하게 되며 많이 사용됨. |
|
pt : 한글, 워드 등의 일반 문서에서 사용하는 단위. em : 폰트의 대문자 M의 너비를 기준으로 출력함. ex : 폰트의 소문자 x의 높이를 기준으로 출력함. px : 모니터의 해상도의 크기를 기준으로 출력함. % : 기본 글씨의 크기를 기준으로 출력함. |
|
저는 CSS에서 PC와 모바일의 폰트 사이즈를 다르게 지정 하며 가독성을 높이려고 했지만, 사이즈가 달라지며 의도하지 않는 줄바꿈이 일어날 수도 있어 며칠을 고생한 기억이 있어요. 또한 티스토리의 경우 표를 만들면 폰트와 사이즈가 고정되어 버리니 꼭 HTML편집화면에서 수정하셔야 합니다. |
