단위 이름
| cm | 센티미터 | 1cm = 96px/2.54 |
| mm | 밀리미터 | 1mm = 1/10th of 1cm |
| Q | 4분의 1 밀리미터 | 1Q = 1/40th of 1cm |
| in | 인치 | 1in = 2.54cm = 96px |
| pc | Picas | 1pc = 1/6th of 1in |
| pt | 포인트 | 1pt = 1/72th of 1in |
| px | 픽셀 | 1px = 1/96th of 1in |
상대 길이 단위
상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련이 있음.
상대 단위를 사용하면 텍스트나 다른 요소의 크기가
페이지의 다른 모든 것에 비례하여 조정되도록
신중하게 계획할 수 있다는 이점이 있음.
웹 개발에 가장 유용한 단위가 아래 표에 나열되어 있다.
| em | 요소의 글꼴 크기. /부모 요소 |
| ex | 요소 글꼴의 x-height. |
| ch | 요소 글꼴의 glyph "0" 의 사전 길이 (너비) 입니다. |
| rem | 루트 요소의 글꼴 크기. /최상위 요소 |
| lh | 요소의 라인 높이. |
| vw | viewport 너비의 1%. |
| vh | viewport 높이의 1%. |
| vmin | viewport 의 작은 치수의 1%. |
| vmax | viewport 의 큰 치수의 1%. |
** rem :
기본 폰트사이즈에 비례
모든곳을 rem으로 크기지정하면 기본 font-size 커져도 모든게 다 같이 커짐. 따라서 레이아웃이 깨짐 -> 사용 비추
다시 말해서, em 단위는 "부모 요소의 글꼴 크기" 를 의미.
ems class 가 있는 <ul> 내부의 <li> 요소는 부모로부터 크기를 가져옴.
따라서 각 중첩 부분은
글꼴 크기가 부모 글꼴 크기의 1.3em — 1.3 배로 설정되므로
점점 더 커짐.
다시 말해서, rem 단위는 "루트 요소의 글꼴 크기" 를 의미.
("root em" 의 rem 표준.)
rems class 가 있는 <ul> 내부의 <li> 요소는
루트 요소(<html>) 에서 크기를 가져옴.
이것은 각각의 연속적인 중첩 부분이
계속 커지는 것을 의미.
MDN이 두번이나 다시 말한 em과 rem 기억하자
https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units
CSS 값 과 단위 - Web 개발 학습하기 | MDN
CSS 에 사용된 모든 속성에는 해당 속성에 허용되는 값 이 있으며, MDN 의 속성 페이지를 보면 특성 속성에 유효한 값을 이해하는 데 도움이 됩니다. 이 레슨에서는 가장 일반적인 값 과 사용 단위
developer.mozilla.org
'HTML' 카테고리의 다른 글
| [HTML]Font Awesome 아이콘 넣기 (0) | 2023.01.19 |
|---|---|
| [HTML] 반응형 레이아웃 + 미디어쿼리,flexbox (0) | 2023.01.19 |
| [HTML]부트스트랩+그리드 (4) | 2023.01.15 |
| [HTML]의미론적 태그 (0) | 2023.01.14 |
| [HTML]실습하기 좋은 웹사이트 (0) | 2023.01.02 |
