CSS에서 font-size 속성을 설정할 때 픽셀(px) 단위를 사용할 수 있습니다. 텍스트 크기를 정확한 픽셀 값으로 지정해야 하는 경우에 특히 유용합니다. 픽셀 단위는 화면 해상도와 무관하게 일관된 크기를 보장하므로, 디자인 의도를 그대로 구현하고 싶을 때 많이 활용됩니다.
예제 1: 여러 요소에 픽셀 단위 적용하기
다음은 픽셀 단위로 글꼴 크기를 설정하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {background-color:rgba(108,111,35,0.6);
font-size:30px;
color:yellow;
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>위 예제에서 #demo6 요소에는 font-size: 30px가 적용되어 해당 문단의 텍스트가 정확히 30픽셀 크기로 표시됩니다.
실행 결과
예제 2: 클래스 선택자에 픽셀 단위 적용하기
이번에는 클래스 선택자를 사용해 글꼴 크기를 픽셀로 지정하는 또 다른 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline;
text-decoration-color: yellow;
font-size: 25px;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>위 예제에서는 .demo 클래스에 font-size: 25px가 설정되어 있어, 해당 클래스가 적용된 문단의 텍스트가 25픽셀 크기로 렌더링됩니다. 동시에 노란색 윗줄(overline) 장식도 함께 적용되었습니다.
실행 결과
정리
픽셀(px) 단위는 글꼴 크기를 고정된 값으로 지정할 수 있는 가장 직관적인 방법입니다. 다만 반응형 웹 디자인에서는 사용자의 브라우저 기본 글꼴 설정을 존중하기 위해 em, rem과 같은 상대 단위를 함께 고려하는 것이 좋습니다.