글꼴 크기
CSS에서는 폰트 크기 정하는 방법이 몇가지 있습니다. Px는 화면 해상도의 점 크기를 가지고 em은 각각 문서의 기본 글골 크기를 상대적으로 가집니다. rem은 html문서의 글꼴 크기를 가집니다.
폰트 단위
- REM (Root EM) : html에 정의된 기본글꼴의 크기에 대하여 값을 가짐.
- PX(Pixel) : 고정된 크기 단위 (1px는 컴퓨터 화면에서 점 1개와 같음)
- EM : 웹 문서에서 사용되는 단위. (해당폰트의 대문자 M의 너비를 기준으로 함.)- 가변 단위
- EX : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함.
- PT(Point) : 고겅되 크기 단위 (주로 인쇄물에 사용됨)
- Percent(%) : 기본글꼴의 크기에 대하여 상대적인 값을 가짐
화면 단위
- vw : 뷰포트 너비의 1%
- vh : 뷰포트 높이의 1%
- vmin : 뷰포트의 중 작은 크기의 1%
- vmax : 뷰포트의 중 큰 크기의 1%
더 많은 단위
PX to EM 변환기
px와 em에 관해.
사람들은 주로 다음 두 가지 방법을 사용합니다. 아직은 … px, em
이 블로그 역시 em과 px를 이용하여 작성되었습니다. 저 역시도 아직도 px가 익숙하고 많이 사용하는 편이고 이글 적으면서도 px를 이용합니다. 이 글을 적으면서 공부하고는 “아 그렇구나~” 싶을 정도로 몰랐던 부분이기도 합니다. 그러면 저와 같이 밑의 차이점과 장단점을 배워 보겠습니다.
em과 rem은 왜 쓰는가?
상대적 길이 단위를 쓰는 이유는 물론 가변적 디자인을 하기 위해서이다. 유연한 디자인과 유지보수의 편리함. 또 어느 디바이스 어떤 상황에서도 사용자에게 같은 콘텐츠를 제공할 수 있다. 반응형 웹이나 웹 표준, 웹 접근성 모두 같은 맥락이라고 볼 수 있다. 자세한 내용은 인터넷의 많은 글에서 찾아볼 수 있다.
em과 rem의 차이점.
위의 설명처럼 em은 “웹 문서에서 사용되는 단위.”라고 하는데 가변적 단위입니다. 부모 요소가 어떤 사이즈냐에 따라 달라지기도 해서 자칫 잘못 사용하면 이상하게 보일 수도 있습니다. 예를 들어)
1 | body { |
1 | <body> |
어떤 결과가 나오냐 하면
이렇게 디자인 된것이면 괜찮지만 대부분 이상하게 보일것입니다. 이런경우는 rem을 사용해서 디자인하는 것이 좋습니다.rem의 최상위 태그(요소)는 보통 html태그입니다. 예를 들어)
1 | html { |
이렇게 디자인을 하면 일괄성 있게 사이즈가 통일 됩니다.
본문 글자 크기
아래 표에서 픽셀 (px)로 본문 글꼴 크기(부모 픽셀)를 선택하면 em과 % 부분이 변화되어 표시됩니다. 참고하세요.
도움말 : 기본 글꼴 크기는 대개 16px입니다.
px | em | percent |
---|---|---|
5px | 0.3125em | 31.25% |
6px | 0.3750em | 37.50% |
7px | 0.4375em | 43.75% |
8px | 0.5000em | 50.00% |
9px | 0.5625em | 56.25% |
10px | 0.6250em | 62.50% |
11px | 0.6875em | 68.75% |
12px | 0.7500em | 75.00% |
13px | 0.8125em | 81.25% |
14px | 0.8750em | 87.50% |
15px | 0.9375em | 93.75% |
16px | 1.0000em | 100.00% |
17px | 1.0625em | 106.25% |
18px | 1.1250em | 112.50% |
19px | 1.1875em | 118.75% |
20px | 1.2500em | 125.00% |
21px | 1.3125em | 131.25% |
22px | 1.3750em | 137.50% |
23px | 1.4375em | 143.75% |
24px | 1.5000em | 150.00% |
25px | 1.5625em | 156.25% |
마치며
이번에 적으면서 알게 된 것은 사이트 디자인을 하면서 두서없이 px나 em을 썼다는 것입니다. 보는 데로 수정해야겠다는 생각이 듭니다. 그리고 조금 더 많은 Size 조정 단위가 존재한다는 것에 놀랐습니다.
참고
- PX to EM Conversion - W3Schools
- PXtoEM.com: PX to EM conversion made simple.
- em to px converter - Everything Fonts
- ANDROID DP/PX CONVERTER
- rem으로 글자 크기 지정하기
- 당신은 모를 수도 있는 CSS의 7가지 단위