CSS에서 사용할 수 있는 여러 크기의 단위에 대해서 살펴보도록 하겠습니다.
단위의 분류
단위는 크게 절대 길이 단위와 상대 길이 단위로 나누어지며, 여기서는 실무에서 자주 쓰이는 단위를 위주로 알아보도록 하겠습니다.
좀 더 세부적인 단위는 MDN의 공식문서를 참고해주세요.
CSS 값 과 단위 - Web 개발 학습하기 | MDN
‘화소’ 를 의미하는 Pixel(Picture + Element)의 약자로 디바이스 화면에서 이미지를 표현하는 가장 작은 단위입니다.
px은 절대 길이 단위로 CSS에서 많이 쓰이는 기본 단위입니다. 상대 길이 단위와는 달리, 사용자가 선언한 고정된 크기 그대로를 화면에 그리기 때문에 직관적으로 쉽게 사용할 수 있습니다.
요소의 넓이나 높이, 패딩, 마진, 보더 값, 폰트 사이즈 등 값의 단위로 사용됩니다.
대부분의 브라우저에서 폰트의 초기 기본 px의 크기는 16px입니다. 각 선택자(selector)에 대해 원하는 px값을 지정하면 아래와 같은 결과를 얻습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>고정크기 단위</title>
<style>
h1 {
font-size: 20px;
}
p {
font-size: 14px;
}
div{
font-size: 10px;
}
</style>
</head>
<body>
<h1>[ch5_ex1]CSS 크기단위에 대한 실습입니다.</h1>
<p>CSS 크기단위 첫번째 px에 대한 실습 예제입니다.</p>
<div>첫번째 실습은 px의 크기를 알아봅니다.</div>
</body>
</html>