CSS에서 사용할 수 있는 여러 크기의 단위에 대해서 살펴보도록 하겠습니다.
단위의 분류
단위는 크게 절대 길이 단위와 상대 길이 단위로 나누어지며, 여기서는 실무에서 자주 쓰이는 단위를 위주로 알아보도록 하겠습니다.
좀 더 세부적인 단위는 MDN의 공식문서를 참고해주세요.
CSS 값 과 단위 - Web 개발 학습하기 | MDN
px
‘화소’ 를 의미하는 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>