css 15. 길이 단위
길이 단위는 CSS 작업을 할 때 중요한 요소 중 하나이다.
유지보수와 연관되어 있기 때문이다.
CSS에서 사용할 수 있는 단위는
절대 길이와 상대 길이로 분류 될 수 있다.
- 절대 길이 단위 : cm, mm, px 등
- 상대 길이 단위 : em, rem, vw, vh, % 등
절대 길이 단위 ( px 등 )
-> 절대적인 길이 그대로를 화면에 구현하고,
변동되는 값에 부여하는 경우 유지보수가 어렵다.
참고) 대부분 폰트 크기를 지정안했을 때 폰트크기의 기본 값은 16px이다
상대 길이 단위 ( em, rem, vw, vh, % 등 )
-> 가변적인 길이 단위이며 상대적으로 유지보수가 쉽다.
1. em
부모 요소의 폰트 크기가 기준이 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div { font-size: 40px; }
span { font-size: 0.5em; }
p { font-size: 1.4em; }
</style>
</head>
<body>
<div>
<!-- 부모 div 폰트 크기 (40px) * 0.5 -->
<span> hello1 : 20px
<!-- 부모 span의 폰트 크기 (20px) * 0.5 -->
<span> hello2 : 10px </span>
</span>
<!-- 부모 div 폰트 크기 (40px) * 1.4 -->
<p> hello3 : 56px </p>
</div>
</body>
</html>
웹 접근성 측면
em단위는 웹접근성을 높이는 단위다.
왜냐하면, em단위로 설정 한 내용은 chrome 브라우저의 경우
설정을 통해 글자 크기가 확대되었을 때 글자가 커지는 반면
절대단위로 조절하면 글자 크기를 확대하여도 확대가 되지 않기 때문이다.
2. rem (root em)
최상위 요소인 <html>의 글자 크기를 기준으로 하는 단위이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html { font-size: 10px; }
div { font-size: 1rem; }
span { font-size: 1.6rem; }
p { font-size: 2em; }
</style>
</head>
<body>
<div>
<!-- html 폰트 크기 (10px) * 1.6 -->
<span> hello1 : 16px
<!-- html 폰트 크기 (10px) * 1.6 -->
<span> hello2 : 16px </span>
</span>
<!-- html 폰트 크기 (10px) * 2.0 -->
<p> hello3 : 20px </p>
</div>
</body>
</html>
3. vw(viewport-width)
화면 넓이(viewport 너비)를 기준으로 하는 백분율 단위이다.
4. vh(viewport-height)
화면 높이(viewport 높이)를 기준으로 하는 백분율 단위이다.
-> CSS 작업 후 폰트 크기를 수정해야 하는일이 있을때
전체 요소들을 수정하지 않고도 html요소나 부모요소만 수정하여
쉽게 유지보수 할 수 있도록 상대길이 단위를 사용하는 것이 좋다.
출처
https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units
CSS 값 과 단위 - Web 개발 학습하기 | MDN
CSS 에 사용된 모든 속성에는 해당 속성에 허용되는 값 이 있으며, MDN 의 속성 페이지를 보면 특성 속성에 유효한 값을 이해하는 데 도움이 됩니다. 이 레슨에서는 가장 일반적인 값 과 사용 단위
developer.mozilla.org