픽셀(px)
아래 CSS 코드는 p 태그로 구성된 단락(Paragraph)의 글자 크기를 12px로 조정하고, 글자색을 파란색으로 꾸밉니다.
p 태그 CSS 예시
p {
font-size: 12px;
color: blue;
}
그렇다면 font-size: 12px;에서 px은 무엇을 의미할까요?
px은 디지털 화면상의 작은 점 하나를 의미하는 픽셀(Pixel)을 뜻합니다.
CSS는 픽셀 단위로 길이, 너비, 여백 등을 지정하며 상대적인 단위인 em이나 %와 달리 고정된 크기를 갖습니다.
따라서 px로 정의된 치수는 다양한 디바이스와 화면에서도 일관된 결과를 보여줍니다.
참고로 치수 단위는 px 외에도 아래와 같은 단위들을 사용합니다.
-
em : 요소의 상대적인 크기를 지정하는 단위로, 부모 요소의 크기에 따라 변화
-
% : 부모 요소의 크기에 대한 백분율로 크기 지정
-
rem : 루트 요소(일반적으로
<html>요소)의 크기를 기준으로 상대적인 크기 지정 -
vw와 vh: 뷰포트(Viewport, 웹페이지가 표시되는 화면 영역) 너비(w)와 높이(h)에 대한 백분율로 크기 지정
각 단위는 다음 수업에서 자세히 설명하겠습니다 :)
코드의 별표로 강조된 부분을 따라 입력해 보세요.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!