차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
| 양쪽 이전 판이전 판 | |||
| tech:css_폰트_크기 [2016/07/12 00:56] – 바깥 편집 127.0.0.1 | tech:css_폰트_크기 [2021/06/11 08:58] (현재) – 61.74.132.138 | ||
|---|---|---|---|
| 줄 3: | 줄 3: | ||
| ====== Css 폰트 크기 (pt px em % 변환표) ====== | ====== Css 폰트 크기 (pt px em % 변환표) ====== | ||
| - | **pt px em % 변환** | + | em과 rem 모두 길이가 유연한 가변 단위로서, |
| + | 반면에 px 값은 브라우저에선 절대값으로 인식해서, | ||
| - | px * 0.0626 | + | ====EM==== |
| - | 예를 들면 | ||
| - | < | + | em 단위를 쓰면 변환되는 픽셀값은 스타일을 지정한 요소의 폰트 크기를 곱한 값이 된다. |
| - | 15px * 0.0626 = 0.939em | + | 예를 들어, 어느 한 div의 폰트 크기가 18px이라면, |
| - | 77px * 0.0626 = 4.8em | + | |
| - | 80px * 0.0626 = 5.008em | + | |
| - | </ | + | |
| + | =====REM===== | ||
| - | ^ pt ^ px ^ em ^ % | | + | rem 단위를 쓰면, 변환된 픽셀 크기는 페이지 최상위(root) 요소, 그러니까 html 요소의 폰트 크기가 기준이 된다. 이 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 바로 마지막 변환된 값임. |
| - | | 6pt | 8px | 0.5em | 50% | | + | |
| - | | 7pt | 9px | 0.55em | 55% | | + | |
| - | | 7.5pt | 10px | 0.625em | 62.5% | | + | |
| - | | 8pt | 11px | 0.7em | 70% | | + | |
| - | | 9pt | 12px | 0.75em | 75% | | + | |
| - | | 10pt | 13px | 0.8em | 80% | | + | |
| - | | 10.5pt | 14px | 0.875em | 87.5% | | + | |
| - | | 11pt | 15px | 0.95em | 95% | | + | |
| - | | 12pt | 16px | 1em | 100% | | + | |
| - | | 13pt | 17px | 1.05em | 105% | | + | |
| - | | 13.5pt | 18px | 1.125em | 112.5% | | + | |
| - | | 14pt | 19px | 1.2em | 120% | | + | |
| - | | 14.5pt | 20px | 1.25em | 125% | | + | |
| - | | 15pt | 21px | 1.3em | 130% | | + | |
| - | | 16pt | 22px | 1.4em | 140% | | + | |
| - | | 17pt | 23px | 1.45em | 145% | | + | |
| - | | 18pt | 24px | 1.5em | 150% | | + | |
| - | | 20pt | 26px | 1.6em | 160% | | + | |
| - | | 22pt | 29px | 1.8em | 180% | | + | |
| - | | 24pt | 32px | 2em | 200% | | + | |
| - | | 26pt | 35px | 2.2em | 220% | | + | |
| - | | 27pt | 36px | 2.25em | 225% | | + | |
| - | | 28pt | 37px | 2.3em | 230% | | + | |
| - | | 29pt | 38px | 2.35em | 235% | | + | |
| - | | 30pt | 40px | 2.45em | 245% | | + | |
| - | | 32pt | 42px | 2.55em | 255% | | + | |
| - | | 34pt | 45px | 2.75em | 275% | | + | |
| - | | 36pt | 48px | 3em | 300% | | + | |
| + | 예를 들어, 최상위 요소의 폰트 크기가 16px이면, 10rem은 160px가 된다 | ||
| + | | ||
| + | rem 단위가 제공하는 가장 커다란 장점은 단지 요소의 상속 특성에 상관없이 일관된 크기를 돌려주는 것뿐만이 아니다. 오히려, 과거 px 단위를 썼던 곳에 대신 rem 단위를 사용함으로써 사용자가 설정한 폰트 크기에 따라 사이트에 배치된 모든 구성 요소가 적절하게 반응하는 길을 제공한다는 점이 가장 큰 이유임. | ||
| + | |||
| + | 이런 이유로 rem 단위를 사용하면, | ||