CSS 단위 part1 - by. UXKM

  • Publishing
  • CSS
  • CSS 초급
  • CSS 단위 part1
요약 설명

CSS 단위는 요소의 크기, 간격, 색상 등을 정확하게 표현하기 위해 숫자와 함께 사용하는 측정 단위입니다.
CSS 속성 값에 크기나 색상을 지정할 때 단위를 사용하여 브라우저가 값을 해석하고 화면에 표시할 수 있도록 합니다.

CSS 단위는 크게 길이 단위와 색상 단위로 나뉩니다.
길이 단위는 요소의 크기나 간격을 지정할 때 사용하며, 색상 단위는 요소의 색상을 표현할 때 사용합니다.

요약 설명

CSS 단위 part-1에서는 CSS에서 사용하는

  • 상대 길이 단위
  • 절대 길이 단위에 대해 다룹니다.

길이 단위는 상대 길이 단위(em, rem, %, vw, vh 등)와 절대 길이 단위(px, pt, cm 등)로 구분할 수 있습니다.
대부분의 브라우저 기본 폰트 크기는 16px = 1em = 100%이며, 반응형 웹을 고려할 때는 상대 단위(em, rem, %) 사용을 권장합니다.
주의: 숫자와 단위 사이에는 공백을 두지 않습니다. (예: 2em(○), 2 em(×))

상대 길이 단위

상대 길이 단위는 기준값에 따라 크기가 변하는 단위로, 반응형 웹 제작에 유용합니다.
글꼴 기준: em, rem, ex, ch는 부모 요소나 루트 요소의 글꼴 크기를 기준으로 하며,
뷰포트 기준: vw, vh, vmin, vmax는 브라우저 창 크기를 기준으로 합니다.

글꼴에 상대적인 길이(Font-relative Lengths)

  1. em

    요약 설명

    em은 부모 요소의 글꼴 크기를 기준으로 하는 상대 단위입니다.
    1em은 부모 요소의 글꼴 크기와 같고, 1.5em은 부모 요소의 글꼴 크기의 1.5배를 의미합니다.
    부모 요소에 글꼴 크기가 없으면 브라우저 기본값(16px)을 기준으로 합니다.

    계산 예시: 부모 요소가 16px일 때, 1.5em = 24px이고 0.75em = 12px입니다.

    특징 :
    부모 요소의 글꼴 크기를 기준으로 계산됩니다.
    요소가 여러 겹으로 중첩되면 부모의 크기가 계속 곱해져서 예상과 다른 크기가 될 수 있습니다.
    반응형 웹에서 유용하지만, 요소가 많이 중첩된 경우에는 사용에 주의가 필요합니다.
    em 단위 결과 캡쳐 화면
    [em 단위 결과 화면]

  2. rem

    요약 설명

    rem은 'root em'의 약자로, <html> 요소(루트 요소)의 글꼴 크기를 기준으로 합니다.
    부모 요소의 영향을 받지 않아 em보다 예측하기 쉽고 계산이 간단하며, 문서 전체에서 일관된 크기를 유지할 수 있어 현대 웹 개발에서 많이 사용됩니다.

    em vs rem 비교:
    html { font-size: 16px; }
    body { font-size: 0.5em; } → 8px (부모 html의 50%)
    div { font-size: 0.5em; } → 4px (부모 body의 50%)
    p { font-size: 0.5em; } → 2px (부모 div의 50%)

    반면 rem은 항상 루트(html)를 기준으로 하므로:
    body { font-size: 0.5rem; } → 8px (html의 50%)
    div { font-size: 0.5rem; } → 8px (html의 50%)
    p { font-size: 0.5rem; } → 8px (html의 50%)

    특징 :
    항상 <html> 요소의 글꼴 크기를 기준으로 계산됩니다.
    부모 요소의 영향을 받지 않아 예측 가능하고 일관적입니다.
    반응형 웹에서 html { font-size: 62.5%; } (10px)로 설정하면 계산이 더 쉬워집니다.
    rem 단위 결과 캡쳐 화면
    [rem 단위 결과 화면]

  3. ex

    현재 글꼴의 x 높이(소문자 'x'의 높이)를 기준으로 하는 단위로, 대부분의 글꼴에서 1ex ≈ 0.5em이며 실제 사용은 드뭅니다.

  4. ch

    현재 글꼴의 숫자 "0"의 너비를 기준으로 하는 단위로, 고정폭 글꼴(monospace)에서 유용하며 텍스트 너비를 문자 개수로 지정할 때 사용합니다.

뷰포트(viewport) 기준 단위

브라우저 창(뷰포트) 크기를 기준으로 하는 단위로, 반응형 웹에서 화면 크기에 따라 자동으로 조절됩니다.

  1. vw (viewport width)

    뷰포트 너비의 1%로, 100vw = 뷰포트 전체 너비입니다. 예를 들어 뷰포트 너비가 1200px일 때 50vw = 600px입니다.

  2. vh (viewport height)

    뷰포트 높이의 1%로, 100vh = 뷰포트 전체 높이입니다. 예를 들어 뷰포트 높이가 800px일 때 50vh = 400px입니다.

  3. vmin (viewport minimum)

    vw와 vh 중 작은 값의 1%입니다. 예를 들어 뷰포트가 1200px × 800px일 때 50vmin = 400px (800px의 50%)입니다.

  4. vmax (viewport maximum)

    vw와 vh 중 큰 값의 1%입니다. 예를 들어 뷰포트가 1200px × 800px일 때 50vmax = 600px (1200px의 50%)입니다.

절대 길이 단위

절대 길이 단위는 고정된 크기를 가진 단위로, 화면 크기나 부모 요소의 영향을 받지 않습니다.
주로 사용되는 단위는 px (픽셀), pt (포인트), cm, mm, in (인치)이며, 변환 관계는 1in = 96px = 72pt = 2.54cm입니다.
주의: 화면에서는 물리적 크기와 정확히 일치하지 않을 수 있으며, 웹에서는 주로 px를 사용합니다.

px (pixels)

px는 화면의 픽셀(점)을 의미하는 가장 많이 사용되는 절대 단위입니다.
이미지 크기와 정확히 맞추거나 고정된 레이아웃이 필요할 때 사용하며, 화면 크기나 해상도에 따라 실제로 보이는 크기가 달라질 수 있습니다.

pt (points)

인쇄 매체에서 주로 사용하는 단위입니다. 1pt = 1/72인치 ≈ 1.33px입니다.

mm, cm, in (물리적 단위)

물리적 측정 단위입니다. 웹에서는 거의 사용하지 않으며, 주로 인쇄용 스타일시트에서 사용합니다.
변환 관계: 1인치 = 2.54cm = 25.4mm = 96px

pc (picas)

인쇄 매체에서 사용하는 단위입니다. 1pc = 12pt = 1/6in

절대 길이 단위 예제