CSS 폰트크기 및 DIV 가로세로 단위 - In, Cm, mm, em, px

CSS 폰트크기 및 DIV 가로세로 단위 - In, Cm, mm, em, px

CSS를 사용하면서 폰트 크기, DIV 박스의 가로 세로 길이 등을 표현해야 할 때가 있는데 이때 사용하는 사이즈 단위에는 In, Cm, mm, em, px 등등 여러 종류가 있습니다. 이번 포스팅에서는 CSS에서 사용되는 사이즈 단위에 대해 알아보겠습니다.

CSS 폰트크기 및 DIV 가로세로 단위 - In, Cm, mm, em, px

절대단위

• in (Inches): 인치 단위로 표현합니다. 1인치는 2.54 센티미터
• cm (Centimeters): 센티미터 단위로 표현
• mm (Millimeters): 밀리미터 단위로 표현
• pt (Points): 포인트 단위로 표현한것으로 1 포인트는 약 0.35 밀리미터
• pc (Picas): 파이카 단위로 표현한것으로 1 파이카는 12 포인트

상대단위

• em: 폰트의 높이를 기준으로 상대적인 크기를 나타냅니다. 지정된 또는 상속받은 폰트 높이에 대한 상대적인 크기
• ex: 알파벳 'x'의 높이를 기준으로 상대적인 크기를 나타냅니다. 지정된 또는 상속받은 폰트 중 알파벳 'x'의 높이에 대한 상대적인 크기
• px (Pixels): 픽셀 단위로 표현합니다. 화면 해상도에 따라 상대적인 크기
• % (Percentage): 백분율 상대 크기로, 지정된 또는 상속받은 요소(또는 상위 요소)에 대한 백분율 크기

절대단위와 상대단위 중 px는 특이한 단위입니다. 

이미 설명했듯이 px는 화면 해상도에 따라 크기가 달라지는 상대적인 단위입니다. 그러나 해상도가 변경되면 폰트뿐만 아니라 모든 이미지의 크기도 함께 변하기 때문에 우리는 이것을 절대적인 단위로 인식하기 쉽습니다. 따라서 편의상 px를 절대단위에 포함하여 설명하도록 하겠습니다.

CSS에서 사이즈(폰트 크기 또는 박스 모델 등)를 설계할 때는 초기 기획 단계부터 고려해야 할 부분입니다. 특히 방탄웹을 비롯한 CSS 설계에서는 이 개념이 중요하며 대규모 사이트의 경우 사이트 업데이트 시에도 유용한 개념입니다.

위에서 소개한 모든 단위를 외우실 필요는 없습니다. 사실 대부분의 경우에는 아래 4가지 단위만 알고 있으면 충분합니다.

pt, px, em, %

절대단위는 pt와 px만 알아도 충분하며, 상대단위는 em과 %만 이해하면 됩니다. 프린트용 CSS를 별도로 구성할 때에는 in과 같은 단위도 사용할 수 있지만, 대부분의 경우 위 4가지 단위를 이해하는 것으로 중급자로서 충분합니다.

아래의 표를 참고하여 4가지 단위 간의 관계를 이해하시면 도움이 됩니다.

위의 표는 각 단위들 간의 관계를 보여주기 위한 예시입니다. 각 셀에 "다름"이라고 표시된 부분은 해당 단위들 간의 변환 관계가 없거나 일정한 규칙으로 환산되지 않기 때문에 다른 단위로 변환할 수 없음을 의미합니다. 

이 표는 단위 간의 상대적인 크기를 이해하는 데 도움을 줄 수 있습니다. 예를 들어, 1em은 상위 요소의 폰트 크기에 비례하므로 1pt와 1px보다 상대적으로 큰 크기입니다. 

HTML CSS - 텍스트 폰트 정렬 및 크기, 배경색상, 투명도 속성

마찬가지로, 1%는 해당 요소의 상위 요소에 대한 백분율 크기로, 다른 단위들과도 상대적인 크기를 가집니다. 

이 표를 참고하면 각 단위들 간의 변환 관계를 파악할 수 있고, 필요에 따라 적절한 단위를 선택할 수 있을 것입니다.

웹사이트 CSS 배경색 텍스트 색상코드 - 티스토리 워드프레스 HTML