CSS 단위 part-1 - by. UXKM

요약 설명

CSS 단위 part-1 에서는
- 상대 길이 단위
- 절대 길이 단위
 에 대한 내용을 다루고 있습니다.

CSS에서 사용되는 단위에는 길이에 사용되는 단위와 color에 사용되는 단위로 나누어집니다.
길이에 사용되는 단위에는 상대 길이 단위, 절대 길이 단위로 나누어지고, color에 사용되는 단위로는 색상이름, RGB, HEX, HSL로 나누어집니다.
em과 rem은 사용자가 글꼴 크기를 늘려도 페이지의 수직 흐름을 유지하는, 확대 가능한 레이아웃을 만들기 위해 많이 쓰입니다.
cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, %입니다.
px은 절대값이고 em, %는 상대값입니다.
대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%입니다.
프로퍼티 값이 0인 경우, 단위를 생략할 수 있습니다.
단위를 사용할 때, 앞의 숫자와 단위 사이에 공백을 두지 않습니다.(예: 2em, 3px, 5in(○) / 2 em, 3 px, 5 in(×))
좀 더 상세한 내용은 각 속성들을 설명할 때 다루도록 하겠습니다.
font-size의 단위를 설정하는 방법은 크게 절대 단위(px)와 상대 단위(%,em) 등이 있는데 모바일이나 반응형을 고려할 시 상대 단위를 사용하는 것을 권장합니다.
예시로 px, pt, cm 등의 단위로 지정하거나 xx-small, x-small, small, medium, large, x-large, xx-large 중에서 선택 가능하며, medium은 기본값으로 12pt = 19px = 13m = 100%, *구 IE 버전의 경우, small이 기본값이라 doctype을 선언해야 medium이 기본값으로 나옵니다.

2.1.1. 상대 길이 단위

상대 길이 단위(em, rem, ch, ex, vw, vh, vmin, vmax) : 어떤 기준을 통해 상대적으로 변할 수 있는 단위이며, 다양한 매체에 쓰기 적절합니다.
상대 길이 단위란 다른 길이에 상대적인 길이를 말하는데, 글꼴에 상대적인 길이가 있고, 브라우저 창(viewport)에 상대적인 길이가 있습니다.
상대 단위를 사용하면 브라우저 환경에 따라 좀 더 쉽게 크기 조절이 가능하다는 장점이 있지만, 계산하기 복잡하다는 단점이 있습니다.
글꼴에 상대적인 길이 : em, ex, ch, rem 사용
브라우저 창(viewport)에 비례한 길이 : vw, vh, vmin, vmax 사용

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

  1. em

    요약 설명

    em은 상대적인 크기를 지니는 단위로써 요소에 저정하는 글자 크기 단위를 설정할 수 있습니다.
    본래 em이라는 단위는 어원적으로 글꼴 세트의 알파벳 대문자의 'M'의 너비를 의미합니다.
    일반적으로 웹 브라우저에서는 1em = 16px으로 환산되며, 1em은 웹 브라우저에서 글자 크기사이즈를 지정하지 않았을 때 표시되는 글꼴 크기의 기본값입니다.
    em 단위를 사용하면 부모 요소에서 지정한 글자크기를 기준으로 배율을 조정하게 됩니다.
    따라서 1.5em을 지정하면 부모요소(E.g. html,body)의 글자 크기의 1.5배가 됩니다.
    일반적으로 문서 레이아웃을 글자 크기에 따라 유동적으로 만들 때 많이 사용됩니다.

    요소의 글꼴 크기에 상대적인 값입니다(2em이란 현재 글꼴 크기의 2배를 의미).

    주로 웹 문서에서 사용되며, 다양한 장치에서 크기 조절이 가능합니다.

    em 단위는 상위 요소 크기의 몇 배인지로 크기를 정합니다. 예를 들어 font-size: 1.5em;은 글자 크기를 상위 요소 크기의 1.5배로 하겠다는 뜻입니다.

    percent(%)는 CSS에서는 상대적인 길이 값으로 사용되고 있지만, 그 자체는 길이 단위가 아니므로 여기에서 제외하며, em을 %로 바꾼 것과 동일합니다.

    브라우저의 기본값은 1em = 16px 이므로 12px을 사용하고자 할 때,
    em 계산법은 12(사용하고 싶은 px) / 16(기준크기 px) = 0.75em이 됩니다.
    참고로 em은 소수점 3자리까지 가능합니다.

    % 로 변환할 시,
    12(사용하고자 하는 px) / 16(기준크기 px) * 100 = 75%가 됩니다.

    em 단위 결과 캡쳐 화면
    [em 단위 결과 화면]

  2. rem

    요약 설명

    CSS 3의 폰트 크기 값으로 새로 등장한 rem은 'root em'이라는 뜻으로, HTML 문서의 root 요소인 <html> 요소를 가리키며, 이 요소에 지정된 크기를 기준으로 상대적인 값을 가지게 된다는 것입니다.
    em 단위는 부모로부터 글꼴 크기를 상속받지만, rem 단위는 부모가 아닌 시조(root = html)로부터 폰트 크기를 상속받는다는 점이 다릅니다.
    예를 들어, em 단위는 부모로부터 폰트 크기를 상속받기 때문에 같은 값이 설정되어 있다 하더라도 노드가 깊어질 수록 폰트크기가 기하급수적으로 크거나 작아집니다.
    이런 방식의 문제점은 부모 또는 조상 노드 가운데 어떤 요소의 폰트 크기 값을 변경할 경우 모든 자식과 자손 요소도 그 영향을 받는다는 점입니다.
    그래서 예측하기 어렵고 계산하기 복잡하다는 단점이 있습니다.
    물론 글꼴의 확대 축소를 유연하게 만들기 위한 목적으로 존재하기는 하지만 이러한 복잡성으로 개발자들은 이 방법을 잘 이용하지는 않습니다.

    html = 100% = 16px
    body = 0.5em = 8px
    div = 0.5em = 4px
    p = 0.5em = 20px

    하지만 rem 단위는 부모가 아닌 시조로부터 글꼴 크기를 상속받기 때문에 html 요소에 기본 글꼴 크기를 지정 해두면 항상 HTML 요소로부터 글꼴 크기를 상속받습니다.
    html 요소의 글꼴 크기를 변경하는것 만으로 페이지의 모든 글꼴 크기를 변경할 수 있다는 점 자체는 em 요소 다를 바 없지만 rem 요소는 부모 요소로부터 상속을 받지 않기 때문에 페이지의 모든 글꼴 크기 변화를 예측할 수 있고 계산하기도 훨씬 수월합니다.

    root 요소의 글꼴 크기에 상대적인 크기 입니다.

    root 요소란 <html> 요소를 말합니다.

    각 요소마다 크기가 다를 수 있는 em과 달리, rem은 문서 전체에 일관적입니다.

    root 요소의 font-size를 참조하는 rem을 제외하고, 글꼴에 상대적인 길이는 부모로부터 상속받은 font-size 값을 참조합니다.

    부모에 font-size가 없을 때는, 초기값을 참조합니다(일반적으로 16px).

    rem 단위 결과 캡쳐 화면
    [rem 단위 결과 화면]

  3. ex

    요소 font의 x 높이를 나타냅니다. "x"문자를 가진 글꼴에서는 보통 소문자 높이와 같습니다. 많은 글꼴에서 1ex ≈ 0.5em입니다.

    현재 글꼴의 x 높이에 상대적인 값입니다(드물게 사용되며, x 높이란 소문자 x의 높이를 지칭).

  4. ch

    요소 font의 문자 "0"(영, 유니코드 U+0030)의 너비를 나타냅니다.

    "0"의 너비에 상대적인 값입니다.

브라우저 창(viewport)에 비례한 길이(뷰포트 백분율 길이)

  1. vw

    뷰포트의 초기 컨테이닝 블록 너비 1%와 같습니다.

    사용자 창 너비의 1%에 비례합니다.

  2. vh

    뷰포트의 초기 컨테이닝 블록 높이 1%와 같습니다.

    사용자 창 높이의 1%에 비례합니다.

  3. vmin

    vw와 vh 중 작은 것과 같습니다.

    사용자 창 높이와 너비 사이 최소값의 1%에 비례합니다.

  4. vmax

    vw와 vh 중 큰 것과 같습니다.

    사용자 창의 높이와 너비 사이 최대값의 1%에 비례합니다.

2.1.2. 절대 길이 단위

절대 길이 단위(px, mm, cm, in, pt, pc) : 정확한 기준에 의해 고정된 단위입니다.
절대 길이 단위는 프린트 등 출력 수단의 크기를 알 수 있을 때의 물리적 측정 거리를 나타냅니다.
구현은 어떤 단위를 물리적인 실제 거리에 맞춰 기준으로 삼고, 나머지 단위를 상대적으로 계산해 설정합니다.
기준 단위는 화면 등 저해상도 장치와 프린터 등 고해상도 장치에서 다릅니다.
저해상도 장치에서 px 단위는 물리적인 픽셀을 의미하며 나머지는 이에 상대적입니다.
따라서 1in은 96px로 정의하며 이는 72pt와 동일합니다.
그러나 인치(in), 센티미터(cm), 밀리미터(mm) 등 이렇게 정의하는 단위가 같은 이름을 가진 물리적인 측정 단위와 일치하지 않을 수 있다는 문제점이 있습니다.
고해상도 장치에서 인치(in), 센티미터(cm), 밀리미터(mm)가 기준이 되어 물리적 거리와 동일합니다. 그래서 px 단위도 이에 맞춰 1인치의 1/96로 정의합니다.
절대 길이 단위는 고정된 크기 단위로, 장치에 따라 크기 조절이 안 된다는 단점이 있습니다.

px(pixels)

px은 화소를 의미합니다.
px 단위는 요소를 이미지에 맞춰 정확히 배치해야 할 때 사용하면 좋습니다. 이미지의 크기 단위가 px이기 때문입니다.
1 픽셀. 화면에서는 전통적으로 하나의 장치 픽셀(점)을 의미했지만, 프린터나 고해상도 화면에서는 1/96 in을 맞출 수 있도록 여러 개의 장치 픽셀을 의미합니다.
화면 해상도에 따라 달라집니다. 크기를 px로 지정해 둔다면 '1028 × 768'에서는 작게 보이는 글자가 '800 × 600' 해상도에서는 크게 보일 것입니다.

mm(millimeters)

1 밀리미터, 1mm = 1/10 cm.

cm(centimeters)

cm는 화면의 논리적 센티미터를 의미합니다. 1in 는 2.54cm입니다.
1 센티미터, 1cm = 96px/2.54

in(inches)

1 인치, 1in = 2.54cm = 96px.

pt(points)

포인트를 의미합니다. 1pt는 1/72in 입니다.
One point. 1pt = 1/72nd of 1in. 주로 인쇄매체에 사용합니다.

pc(picas)

pc는 파이카를 의미합니다. 1pc 는 12pt이며 1/6in 입니다.
1 파이카, 1pc = 12pt = 1/61in.

절대 길이 단위 에제