CSS에서 font-size 속성에 픽셀(px) 값을 지정하면 텍스트가 정해진 픽셀 수만큼의 크기로 표시됩니다. 픽셀은 화면 해상도와 브라우저가 이를 계산하는 알고리즘을 기준으로 하기 때문에, 대부분의 환경에서 일관되고 예측 가능한 텍스트 크기를 얻을 수 있습니다.
기본 문법
CSS font-size 속성의 기본 문법은 다음과 같습니다.
Selector {
font-size: /*값*/;
}픽셀 단위로 지정할 때는 값 뒤에 px를 붙입니다. 예를 들어 font-size: 16px;처럼 작성하면 해당 요소의 텍스트가 16픽셀 크기로 렌더링됩니다.
예제 1: span 요소에 픽셀 단위 적용하기
다음 예제는 span 요소에 서로 다른 픽셀 값을 적용하여 글꼴 크기가 어떻게 달라지는지 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
span {
background-color: darkseagreen;
padding: 20px;
font-size: 15px;
}
span:nth-child(3) {
font-size: 55px;
}
span:last-child {
font-size: 25px;
}
</style>
</head>
<body>
<br/>
<span>one</span><span>two</span><span>three</span>
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째와 두 번째 span은 15px, 세 번째 span은 55px, 마지막 span은 25px 크기로 표시됩니다.
예제 2: div 요소에 픽셀 단위 적용하기
이번에는 블록 레벨 요소인 div에 픽셀 단위의 font-size를 적용한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 40%;
border: 2px solid yellow;
padding: 20px;
font-size: 10px;
}
div:nth-child(3) {
font-size: 20px;
}
div:last-child {
font-size: 30px;
}
</style>
</head>
<body>
<br/>
<div>one</div>
<div>two</div>
<div>three</div>
</body>
</html>실행 결과
각 div는 각각 10px, 10px(두 번째), 20px, 30px 순서로 지정된 규칙에 따라 크기가 달라져 표시됩니다.
픽셀 단위 사용 시 참고 사항
픽셀(px)은 절대 단위이므로 부모 요소나 브라우저 설정의 영향을 받지 않고 항상 동일한 크기로 표시됩니다. 따라서 디자인 의도를 정확하게 구현할 때 유용합니다. 다만, 사용자가 브라우저에서 기본 글꼴 크기를 변경해도 텍스트 크기가 조정되지 않으므로, 접근성을 고려한다면 em이나 rem 같은 상대 단위와 함께 사용하는 것이 좋습니다.