em을 알아보기 전, CSS에서 사용되는 기본 글꼴의 크기에 대해서 알아보겠습니다.
CSS의 기본 글꼴 사이즈, 즉 font-size를 설정하지 않으면 기본 크기는 16px입니다.
이 의미는 브라우저의 기본 텍스트 크기가 16px라는 뜻입니다.
em 은 px(픽셀)처럼 고정된 값이 아니라 상대적인 값이라서 CSS 폰트에 범용적으로 사용되고 있습니다.
1em = 16px(브라우저 기본 글꼴)
하기 예제를 통해서 브라우저 기본글꼴인 상태에서의 1em 크기를 살펴보겠습니다.
em을 사용하면 상대적인 폰트 크기를 나타낼 수 있기에 여러 브라우저 및 모바일 브라우저 등에서도 폰트를 잘 표현해 낼 수 있는 장점이 있습니다. 안드로이드의 dp와 유사한 개념입니다.
참고로, px(픽셀) 을 통해서 em 을 얻는 공식은 하기와 같습니다.
px(픽셀) / 16 = em
CSS font-size em 에 대해서 알아보았습니다.
감사합니다.
반응형
'앱 만들기 > CSS' 카테고리의 다른 글
| CSS 스타일 시트 우선순위 (3) | 2022.11.22 |
|---|---|
| CSS 외부 스타일 시트 란? 그리고 html 문서와 연동방법 알아보기 (6) | 2022.11.18 |
| CSS 내부 스타일 시트 란? (4) | 2022.11.17 |
| CSS 인라인 스타일 이란? (2) | 2022.11.16 |
| CSS 글자색 바꾸는 방법 (4) | 2022.11.07 |
댓글