CSS Academy · 강의

절대 단위: px, pt, cm

픽셀, 포인트, 센티미터와 같은 고정 절대 단위를 언제 사용해야 하는지 학습합니다.

레슨 1/413개 단계

절대 단위: px, pt, cm은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

절대 단위와 상대 단위

CSS 단위는 두 가지 범주로 나뉩니다. 절대 단위는 고정된 실제 측정값이고, 상대 단위는 다른 기준에 따라 크기가 조정됩니다. 절대 단위는 장치와 무관한 물리적 측정값입니다.

px — 픽셀

픽셀(px)은 화면에서 가장 많이 사용되는 절대 단위입니다. 표준 디스플레이에서는 1px = 장치 픽셀 1개입니다. 고DPI(레티나) 화면에서는 CSS 픽셀이 여러 장치 픽셀에 대응하므로 요소가 시각적으로 같은 크기로 유지됩니다.

<button class="button">10px 20px padding</button>

pt — 포인트

포인트(pt)는 인쇄 디자인에서 사용하는 단위입니다. 1pt = 1/72인치입니다. CSS에서는 1pt = 4/3px(약 1.33px)입니다. 주로 인쇄용 스타일시트에서 글자 스타일을 지정할 때 사용됩니다.

<p class="print-text">This text is sized in points (12pt), the unit used in print stylesheets.</p>

cm, mm, in — 물리적 단위

CSS는 센티미터(cm), 밀리미터(mm), 인치(in)를 지원합니다. 이러한 단위는 인쇄 환경에는 적합하지만 화면의 DPI가 다르기 때문에 화면에서는 신뢰하기 어렵습니다.

<div class="page">A4-width page (21cm), used for print layouts</div>

화면에서의 px: 실용적인 사용

화면 기반 웹 디자인에서는 px가 유일하게 실용적인 절대 단위입니다. 그렇더라도 글꼴 크기에 px를 사용하는 것은 권장되지 않습니다. 사용자가 브라우저에서 지정한 글꼴 크기 설정을 덮어쓰기 때문입니다.

장치 픽셀 비율

최신 디스플레이의 장치 픽셀 비율(DPR)은 1보다 큽니다. 2배 레티나 화면은 CSS 픽셀당 장치 픽셀 2개를 렌더링합니다. 따라서 고DPI 이미지는 표시 크기의 2배 또는 3배여야 합니다.

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect width='400' height='300' fill='%23ff6347'/><circle cx='200' cy='150' r='100' fill='%231e90ff'/></svg>" alt="sample image" />

px를 사용할 때

다음에는 px를 사용하세요:

테두리 너비(1px은 선명합니다)
그림자와 변환
미디어 쿼리 중단점(em 기반 중단점이 더 견고하지만 사용 가능)
정확한 픽셀 제어가 필요한 고정 사용자 인터페이스 요소

타이포그래피에 px를 사용하면 안 되는 경우(NOT)

html 또는 body에 font-size: 16px을 설정하면 많은 브라우저에서 사용자의 접근성 설정이 덮어써집니다. 대신 브라우저 기본값을 기준으로 하는 rem을 사용하세요.

Q — 쿼터 밀리미터

q 단위는 1/4밀리미터입니다. 일본어 인쇄 타이포그래피에서 세밀한 문자 제어를 위해 사용됩니다. 일반적인 웹 디자인에서는 거의 사용되지 않습니다.

PC — 파이카

파이카(pc)는 12포인트 또는 1/6인치와 같습니다. 포인트와 마찬가지로 파이카는 인쇄 단위이며 디지털 화면에서는 거의 필요하지 않습니다.

인쇄용 스타일시트에서의 절대 단위

CSS에서 절대 단위를 정당하게 사용하는 대표적인 경우는 인쇄용 스타일시트입니다. 물리적 단위를 사용하면 종이에 인쇄되는 페이지의 실제 크기를 정확하게 유지할 수 있습니다.

<div class="print-body">
    <p class="page-break">Section one (page breaks after this when printed)</p>
    <p>Section two</p>
  </div>

빠른 확인

1/72인치와 같은 절대 CSS 단위는 무엇인가요?

인터랙티브 레슨에서 답해보세요

복습

절대 단위는 부모 요소와 관계없이 고정된 측정값입니다. px는 화면에서 실용적인 단위입니다. 물리적 단위(pt, cm, in)는 인쇄용 스타일시트에서 사용됩니다. 타이포그래피에 px를 사용하면 사용자의 글꼴 크기 설정을 덮어쓰므로 피하세요. 대신 rem을 사용하세요.

무료로 시작

AI 튜터와 함께 CSS을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 40
레슨: 159

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“절대 단위: px, pt, cm” 강의는 무료인가요?

네 — “절대 단위: px, pt, cm” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“절대 단위: px, pt, cm”에서 뭘 배우나요?

픽셀, 포인트, 센티미터와 같은 고정 절대 단위를 언제 사용해야 하는지 학습합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“절대 단위: px, pt, cm” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← CSS Academy(으)로 돌아가기