가이드라인

픽셀(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)에 대한 백분율로 크기 지정

각 단위는 다음 수업에서 자세히 설명하겠습니다 :)


코드의 별표로 강조된 부분을 따라 입력해 보세요.

가이드라인

AI 튜터

배포

디자인

업로드

수업 노트

즐겨찾기

도움말