섹션 8: 반응형 웹 디자인 이해하기 [21일차]

 

폰트 크기를 지정하는 데 사용되는 단위인 픽셀(px), 퍼센트(%), em, rem에 대해 자세히 알아보겠습니다. 이들 각각의 특성을 이해하면 웹 디자인과 개발에서 효율적으로 폰트 크기를 조절할 수 있습니다.

1. 픽셀(px): 픽셀은 디지털 화면의 기본 단위입니다. 하나의 픽셀은 화면에 표시되는 가장 작은 점을 의미합니다. 폰트 크기를 픽셀로 지정하면, 지정된 크기가 화면 해상도에 따라 물리적인 크기로 변환됩니다. 예를 들어, '16px'는 대부분의 화면에서 읽기 쉬운 기본 크기로 간주됩니다. 픽셀 단위는 절대적인 크기를 나타내기 때문에 다양한 디바이스와 화면 해상도에서 일관된 느낌을 제공하는 데 한계가 있습니다.

2. 퍼센트(%): 퍼센트 단위는 상대적인 크기를 나타냅니다. 이는 부모 요소의 폰트 크기에 대한 비율로 계산됩니다. 예를 들어, 부모 요소의 폰트 크기가 20px이고 자식 요소의 폰트 크기를 50%로 설정하면, 자식 요소의 폰트 크기는 10px이 됩니다. 이 방법은 화면 크기나 부모 요소의 크기에 따라 유연하게 조절할 수 있어 반응형 웹 디자인에 적합합니다.

3. em: em 단위도 상대적인 크기를 나타내며, 현재 요소의 폰트 크기를 기준으로 합니다. 예를 들어, 만약 현재 요소의 폰트 크기가 16px이고, 폰트 크기를 1.5em으로 설정하면, 계산된 폰트 크기는 24px (16px * 1.5)이 됩니다. em 단위는 중첩된 요소들 사이에서 복잡한 계산이 필요할 수 있어, 때때로 관리하기 어려울 수 있습니다.

4. rem: rem 단위는 'root em'의 줄임말로, 문서의 루트 요소(HTML)의 폰트 크기를 기준으로 합니다. 예를 들어, HTML 요소의 폰트 크기가 16px이고, 어떤 요소의 폰트 크기를 1.25rem으로 설정하면, 그 요소의 폰트 크기는 20px (16px * 1.25)이 됩니다. rem 단위는 em보다 예측 가능하고 관리하기 쉬우며, 전체 웹사이트의 폰트 크기를 일관되게 조절하는 데 유용합니다.

이러한 각 단위들은 특정 상황과 요구에 따라 선택되어야 합니다. 픽셀은 일관된 크기를 제공하는 반면, 퍼센트, em, rem은 더 유연하고 반응형 디자인에 적합합니다. 웹사이트의 전반적인 스타일과 사용자 경험을 고려하여 적절한 단위를 선택하는 것이 중요합니다.