CSS의 길이 단위 중 상대적으로 크기를 정하는 em과 rem에 대해 정리하고자 한다.
em / rem 차이점
em
해당 요소의 글꼴 크기를 1em으로 사용하지만 만약 해당 요소의 폰트 크기 가 없으면 부모 요소의 글꼴 크기를 1em을 갖는다.
rem
HTML 최상위 요소인 <html>font-size 속성 값이 기준으로 html 글꼴 크기를 1rem으로 사용한다.
See the Pen em,rem by pminsun (@pminsun) on CodePen.
html { font-size: 62.5%; }
px 값을 rem으로 바꾸면 계산이 어렵고 사용자 접근성 옵션(accessibility options)을 고려해 10px로 바꿔주는 html 에 font-size: 62.5% 를 설정하기도 한다. ( 고정 10px 로 적용되어 있을 경우에는 접근성 옵션이 적용되지 않는다. )
html {
/* 62.5% of 16px browser font size is 10px */
/* 16px * 0.625 = 10px */
font-size: 62.5%;
}
PX to EM 으로 계산 해주는 사이트
PX / EM 변환하기
www.toolo.kr
PX to REM 으로 계산 해주는 사이트
PX to REM converter (instantly and bidirectional)
PX ↔︎ REM conversion tables PixelsREM1px0.06rem2px0.13rem3px0.19rem4px0.3rem5px0.3rem6px0.4rem8px0.5rem10px0.6rem12px0.8rem14px0.9rem15px0.9rem16px1rem18px1.1rem20px1.3rem24px1.5rem25px1.6rem28px1.8rem32px2rem36px2rem40px3rem44px3rem48px3rem50px3re
nekocalc.com
'Css' 카테고리의 다른 글
| 스크롤 바 숨기기 & 커스텀 (4) | 2024.08.24 |
|---|---|
| display : flex 정리 (0) | 2024.08.24 |
| TailwindCSS 설치 & 사용법 (0) | 2024.08.24 |
| 다크모드 적용 (next-themes) (0) | 2024.08.23 |
| svg 색상 변경 (0) | 2024.08.23 |
