Font
Font Size 단위
웹 디자인과 개발에서 폰트 사이즈를 설정할 때 사용되는 여러 가지 단위들이 있습니다. 각 단위는 다양한 사용 상황과 환경에 적합하며, 다음과 같은 특징을 가지고 있습니다:
픽셀(px): 가장 일반적으로 사용되는 단위입니다. 1px는 모니터의 한 픽셀에 해당합니다. 픽셀은 절대적인 크기를 나타내므로, 다양한 디스플레이 해상도에서 일관된 크기를 유지합니다.
엠프(em): 현재 요소의 폰트 사이즈에 상대적인 크기를 나타냅니다. 예를 들어, 상위 요소의 폰트 사이즈가 16px이면,
1em은 16px과 동일하고,2em은 32px과 동일합니다.렘(rem): 루트 요소(
<html>)의 폰트 사이즈에 상대적인 크기를 나타냅니다.rem단위는 웹사이트 전체에 걸쳐 일관된 폰트 사이즈를 유지하기 쉽게 해줍니다.퍼센트(%): 상위 요소의 폰트 사이즈에 대한 비율로 크기를 설정합니다. 예를 들어, 상위 요소의 폰트 사이즈가 20px일 때
150%는 30px과 동일합니다.뷰포트 너비(vw) / 뷰포트 높이(vh): 뷰포트의 너비나 높이에 대한 비율로 폰트 사이즈를 설정합니다. 예를 들어,
1vw는 뷰포트 너비의 1%에 해당합니다. 이 단위는 화면 크기에 따라 폰트 사이즈가 동적으로 조절되게 합니다.
웹에서 폰트 사이즈를 설정할 때는 px, em, rem 같은 단위가 가장 널리 사용됩니다. em과 rem은 반응형 디자인에서 유용하게 사용되며, 특히 rem은 웹사이트 전체의 폰트 사이즈 조절에 용이합니다. 반면, px는 더 일관된 크기를 제공하지만, 유저가 브라우저의 폰트 사이즈 설정을 변경했을 때 유연하게 대응하지 못할 수 있습니다.
em과 rem은 CSS에서 사용되는 상대적 단위로, 폰트 사이즈, 마진, 패딩 등 다양한 속성에 적용될 수 있습니다. 이들은 레이아웃과 타이포그래피를 더 유동적이고 접근성 높은 방식으로 디자인하는 데 도움이 됩니다.
em 단위
- 정의:
em은 상위 요소의 폰트 사이즈에 상대적인 단위입니다. - 사용 방법: 요소의
font-size,margin,padding등에 적용할 때, 그 값은 해당 요소의 부모의 폰트 사이즈에 대한 상대적 비율로 계산됩니다. - 예시: 만약 부모 요소의 폰트 사이즈가
16px이고 자식 요소의font-size를1.5em으로 설정하면, 자식 요소의 폰트 사이즈는24px이 됩니다 (16px * 1.5). - 특징:
em은 중첩된 요소에서 복잡성을 유발할 수 있습니다. 한 요소의em값은 그 부모의 폰트 사이즈에 따라 다르며, 이는 여러 계층에 걸쳐 상속될 때 예측하기 어려운 결과를 낳을 수 있습니다.
rem 단위
- 정의:
rem(Root EM)은 루트 요소(<html>)의 폰트 사이즈에 상대적인 단위입니다. - 사용 방법:
rem은 전체 문서의 기본 폰트 사이즈를 기준으로 계산됩니다. 대부분의 브라우저에서 기본 폰트 사이즈는16px입니다. - 예시: 만약
<html>의 폰트 사이즈가16px이고, 어떤 요소의font-size를2rem으로 설정하면, 해당 요소의 폰트 사이즈는32px이 됩니다 (16px * 2). - 특징:
rem은 일관성과 예측 가능성을 제공합니다. 복잡한 중첩 구조에서도rem은<html>요소의 폰트 사이즈만을 참조하기 때문에, 다른 요소들의 스타일에 영향을 받지 않습니다.
사용 상황
- em: 로컬 스타일링이 필요하거나, 특정 요소의 스타일이 그 부모 요소와 밀접하게 관련되어 있을 때 유용합니다. 예를 들어, 버튼 내부의 아이콘 크기를 버튼의 텍스트 크기와 관련지어 조정하고 싶을 때
em단위를 사용할 수 있습니다. - rem: 전체 페이지나 애플리케이션에 일관된 크기 척도를 적용하고자 할 때 사용합니다. 특히 반응형 웹 디자인에서 유용하며, 모든 요소의 크기를 중앙에서 조절하기 쉽게 만듭니다.
em과 rem은 둘 다 유연한 디자인을 가능하게 하지만, 각각의 사용 상황과 목적을 이해하고 적절히 사용하는 것이 중요합니다.