선언 부분에서 잘못된 값이 들어가더라도 전체를 실행시키는데 문제가 발생하지 않습니다. 해당 부분만 무효처리가 됩니다.
CSS에서 사용할 수 있는 여러 크기의 단위에 대해서 살펴보도록 하겠습니다.
단위는 고정크기단위와 가변크기단위로 나누어지며, 고정크기단위에는 px, pt, pc, cm, mm, in이 있고, 가변크기단위에는 em, ex, rem, %, vh, vw, vmin, vmax, eh, ch가 있습니다. 여기서는 자주 쓰이는 단위에 대서만 알아보도록 하겠습니다.
좀 더 세부적인 단위는 MDN의 공식문서를 참고해주세요.
CSS 값 과 단위 - Web 개발 학습하기 | MDN
px은 고정크기단위로 CSS에서 많이 쓰이는 단위입니다. 가변크기단위와는 달리, 고정된 크기를 지원하기 때문에 글자크기의 변화가 용이합니다. 초기 기본 px의 크기는 16px입니다. 각 선택자에 대해 원하는 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>
[실행화면]