CSS - 측정 단위

안녕하세요, 미래의 웹 디자이너 여러분! 오늘 우리는 CSS 측정 단위의 세계에 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 웹 디자인의 필수적인 측면을 안내해 드리기 위해 여기 있습니다. 그러니 가상의 측정 도구를 집어들고, CSS를 측정해 보겠습니다!

길이 단위

CSS에서 우리는 다양한 방법으로 크기를 측정하고 정의할 수 있습니다. 마치 다양한 측정 도구가 가득한 도구 상자를 가지고 있는 것처럼, 각각의 작업에 적합한 도구가 있습니다. 기본적인 것으로 시작해 보겠습니다:

절대 길이 단위

이 것들은 직관적인 것들로, 실제 측정 도구의 인치와 같습니다:

단위	설명
px	픽셀
in	인치
cm	센티미터
mm	밀리미터
pt	포인트
pc	피카

다음은 간단한 예제입니다:

.box {
width: 100px;
height: 2in;
margin: 10mm;
}

이 코드에서 우리는 100 픽셀 너비, 2 인치 높이, 각 10 밀리미터의 여백을 가진 상자를 만들고 있습니다. 마치 작은 정밀한 카드 상자를 짓는 것과 같습니다!

CSS 측정 단위 - em 단위

이제 'em' 단위에 대해 이야기해 보겠습니다. 이는 요소의 폰트 크기에 기반한 상대적인 단위입니다. 주변 환경에 따라 크기가 변하는 변色竜을 상상해 보세요.

.parent {
font-size: 16px;
}

.child {
font-size: 1.5em; /* 이는 24px가 됩니다 */
padding: 2em;     /* 이는 48px가 됩니다 */
}

이 예제에서 자식의 폰트 크기는 부모의 크기의 1.5배이며, 여백은 자신의 폰트 크기의 두배입니다. 마치 러시아의 나르시스 도마뱀처럼 크기가 쌓이는 것입니다!

CSS 측정 단위 - ch 단위

'ch' 단위는 '0' (영) 문자의 너비에 기반합니다. 이는 특히 고정 폰트로 컬럼 레이아웃을 만들 때 유용합니다.

.code-block {
width: 80ch;
font-family: monospace;
}

이는 80 문자 너비의 코드 블록을 만들며, 80열 터미널의 시절을 회상하는 사람들에게 완벽합니다!

CSS 측정 단위 - rem 단위

'rem'은 "루트 em"을 의미합니다. 'em'과 유사하지만, 항상 루트 요소(보통

)에 상대적입니다.

html {
font-size: 16px;
}

.box {
font-size: 1.5rem; /* 항상 24px, 부모에 관계없이 */
padding: 2rem;     /* 항상 32px */
}

이는 문서 전체에서 일관된 크기를 유지하는 데 유용하며, 전체 웹사이트의 마스터 블루프린트를 가지고 있는 것과 같습니다.

CSS 측정 단위 - lh 및 rlh 단위

'lh'는 요소의 "줄 높이"를 의미하며, 'rlh'는 "루트 줄 높이"입니다. 이는 새로운 단위로, 타이포그래피의 수직 리듬에 완벽합니다.

.paragraph {
line-height: 1.5;
margin-bottom: 1lh;
}

이는 문단 아래 여백을 정확히 한 줄 높이로 설정하여 조화로운 수직 리듬을 만듭니다. 마치 텍스트의 오케스트라를 지휘하는 것과 같습니다!

CSS 측정 단위 - vh 단위 및 vw 단위

'vh'와 'vw'는 각각 "시점 높이"와 "시점 너비"를 의미합니다. 시점의 크기에 기반한 백분율 단위입니다.

.hero {
height: 100vh;
width: 100vw;
}

이는 항상 전체 화면을 채우는 헤로 섹션을 만듭니다. 디바이스 크기에 관계없이 항상 완벽하게 맞는 반응형 빌보드와 같습니다!

CSS 측정 단위 - vmin (시점 최소) 및 vmax (시점 최대) 단위

이 단위는 시점의 더 작거나 더 큰 측정 중 적절한 측정에 기반합니다.

.square {
width: 50vmin;
height: 50vmin;
}

이는 항상 시점의 더 작은 측정의 반으로 크기가 다른 완벽한 정方形을 만듭니다. 마치 형태 변화하는 정方形이 항상 비례적으로 보이는 것과 같습니다!

CSS 측정 단위 - vb 단위

'vb'는 "시점 블록 크기"를 의미합니다. 'vh'와 유사하지만, 문서의 기록 모드를 존중합니다.

.sidebar {
width: 20vb;
}

이는 항상 시점의 블록 측정의 20%인 사이드바를 만듭니다. 다양한 기록 방향을 가진 다국어 사이트에 유용합니다.

CSS 측정 단위 - vi 단위

'vi'는 "시점 인라인 크기"입니다. 'vw'와 유사하지만, 다시 한 번 문서의 기록 모드를 존중합니다.

.header {
height: 10vi;
}

이는 항상 시점의 인라인 측정의 10%인 헤더를 만듭니다. 다양한 기록 모드에 부드럽게 적응합니다.

예제 - 백분율

CSS에서 백분율은 항상 무언가에 상대적입니다. 실제로 사용해 보겠습니다:

.container {
width: 80%;
margin: 0 auto;
}

.child {
width: 50%;
padding: 5%;
}

여기서 컨테이너는 부모의 너비의 80%이며, 자동 여백으로 중앙에 배치됩니다. 자식은 컨테이너의 반 width이며, 패딩은 컨테이너의 width의 5%입니다. 마치 투명한 상자의 러시아 나르시스 도마뱀과 같습니다!

예제 - 숫자

occasionally, CSS properties don't need units at all. Let's look at some examples:

.box {
opacity: 0.5;
line-height: 1.5;
z-index: 100;
}

Here, opacity is a value between 0 and 1, line-height is a multiplier of the font size, and z-index is just a plain number for stacking order. It's like having a volume knob, a text spacer, and a layer sorter all in one!

그리고 여러분! 우리는 CSS 측정 단위의 세계를 여행했습니다. 익숙한 픽셀에서 이국적인 시점 단위까지. 올바른 단위를 선택하는 것은 마치 적절한 도구를 선택하는 것처럼, 삶을 더 쉽게 만들고 디자인을 더 견고하게 만듭니다. 그러니 책임감 있게 측정하러 가세요!

Credits: Image by storyset