CSS 크기 단위
CSS 크기 단위는 대표적으로 px, %, em, rem 등이 있습니다. 하나하나 살펴보도록 합시다.
px
px는 픽셀 단위입니다. 1px은 화소 1개 크기를 의미하죠. 우리가 보는 디스플레이는 모두 아주 작은 픽셀이 모여 이루어져 있습니다.
px은 디바이스 해상도에 따라 상대적은 크기를 갖습니다. 따라서 브라우저는 1px을 1/96 인치의 절대단위로 인식합니다.
px은 요소의 크기나 이미지의 크기 지정에 주로 사용됩니다.
%
%는 백분율 단위의 상대적인 단위입니다. 요소에 지정된 사이즈에 상대적인 사이즈로 지정됩니다.
em
em은 배수 단위로 상대적인 단위입니다. 요소에 지정된 사이즈에 상대적인 사이즈로 지정됩니다. 예를 들어 1em은 요소에 지정된 사이즈와 같고 2em은 지정된 사이즈의 2배입니다.
폰트 사이즈 설정이나 콘텐츠를 포함하는 컨테이너의 크기 설정에 편리합니다.
주의할 점은 중첩된 자식 요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미친다는 것입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 14px;
}
div {
font-size: 1.2em; /* 14 * 1.2 = 16.8px */
}
</style>
</head>
<body>
<div>Hello, this font-size is 14 * 1.2 = 16.8px
<div>Hello, this font-size is 16.8 * 1.2 = 20.16px
<div>Hello, this.font-size is 20.16 * 1.2 = 24.192px</div>
</div>
</div>
</body>
</html>rem
rem은 html에 지정된 font-size에 따른 단위입니다. r은 root를 의미합니다.
html의 font-size는 미지정 시 16px입니다.
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 14px;
}
div {
font-size: 1.2rem; /* 14 * 1.2 = 16.8px */
}
</style>
</head>
<body>
<div>Hello, this font-size is 14 * 1.2 = 16.8px
<div>Hello, this font-size is 14 * 1.2 = 16.8px
<div>Hello, this.font-size is 14 * 1.2 = 16.8px</div>
</div>
</div>
</body>
</html>viewport
%는 상대적인 단위로 부모 요소에 영향을 받습니다. viewport는 사용자의 브라우저 크기를 기준으로 한 상대적인 단위입니다.
Uploaded by Notion2Tistory v1.1.0