CSS - 측정 단위: 초보자 가이드
안녕하세요, 미래의 CSS 마법사 여러분! ? 우리의 마법의 여정을 시작해보세요. CSS 측정 단위의 세상으로! 여러분의 친절한 이웃 컴퓨터 선생님으로서, 웹 디자인의 필수적인 부분을 안내해드리게 되어 기쁩니다. 코드를 한 줄도 적어보지 않았다면 걱정하지 마세요 - 우리는 처음부터 함께 지식을 쌓아나갈 것입니다!
길이 단위: CSS 측정의 기초
기본적인 것으로 시작해보겠습니다. CSS에서는 요소의 크기, 여백, 패딩 등을 지정하기 위해 다양한 단위를 사용합니다. 이러한 단위는 디지털 세상의 치수 도구라고 생각할 수 있습니다. 이를 통해 모든 기기에서 멋지게 보이는 웹사이트를 만들 수 있습니다. 작은 스마트폰에서 거대한 데스크톱 모니터까지입니다.
가장 흔한 CSS 길이 단위의 표를 아래에 보여드립니다:
| 단위 | 설명 | 예시 |
|---|---|---|
| px | 픽셀 | 16px |
| em | 요소의 글자 크기에 상대적 | 1.5em |
| rem | 루트 요소의 글자 크기에 상대적 | 2rem |
| % | 백분율 | 50% |
| vw | 뷰포트 너비 | 100vw |
| vh | 뷰포트 높이 | 50vh |
이제 이러한 단위를 하나씩 더 깊이 탐구해보고, 어떻게 사용되는지 살펴보겠습니다!
CSS 측정 단위 - em 단위
'ем' 단위는 변신의 마스터입니다. 'em'은 현재 요소의 글자 크기와 같습니다. 이는 확장 가능한 디자인을 만들기에 매우 유용합니다.
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 이는 24px가 됩니다 */
margin-bottom: 1em; /* 이도 24px가 됩니다 */
}이 예제에서, .child 요소의 글자 크기는 24px(1.5 * 16px)가 되고, 하단 여백도 24px가 됩니다. 마치 .child가 "부모보다 1.5배 더 커지고 싶어요!"라고 말하는 것과 같습니다.
CSS 측정 단위 - ch 단위
'ch' 단위는 조형의 마니아입니다. 현재 글꼴의 '0' 문자의 너비에 기반합니다. 이는 특히 모나스페이스 글꼴과 함께 일관된 레이아웃을 만들기에 매우 유용합니다.
.code-snippet {
font-family: 'Courier New', monospace;
width: 40ch; /* '0' 문자의 너비 40개 */
}이는 정확히 40 문자 너비의 상자를 만들어 코드 스니펫을 표시하는 데 완벽합니다!
CSS 측정 단위 - rem 단위
'rem' 단위는 CSS 가족의 지혜로운 노인입니다. 항상 루트 요소의 글자 크기(보통 <html> 태그)를 참조하며, 부모 요소의 글자 크기를 무시합니다.
html {
font-size: 16px;
}
.container {
font-size: 20px;
}
.container p {
font-size: 1.5rem; /* 이는 루트의 글자 크기 기반으로 24px가 됩니다 */
}이 경우, .container의 글자 크기가 다르더라도, 그 안의段落은 여전히 24px(1.5 * 16px)가 됩니다.
CSS 측정 단위 - lh 및 rlh 단위
'lh' 단위는 요소의 행 높이를 기준으로 하고, 'rlh' 단위는 루트 요소의 행 높이를 기준으로 합니다. 이는 새로운 단위로, 디자인에서 수직 리듬을 만들기에 매우 유용합니다.
.paragraph {
font-size: 16px;
line-height: 1.5;
margin-bottom: 1lh; /* 이는 행 높이와 같습니다 */
}이는段落 사이의 공간을 행 높이 기반으로 일관되게 만듭니다.
CSS 측정 단위 - vh 단위 및 vw 단위
이제 뷰포트 단위로 넘어가보겠습니다 - 제가 가장 좋아하는 단위입니다! 'vh'는 뷰포트 높이를 의미하며, 'vw'는 뷰포트 너비를 의미합니다. 이들은 뷰포트 크기의 백분율입니다.
.hero-section {
height: 100vh; /* 뷰포트의 전체 높이 */
width: 100vw; /* 뷰포트의 전체 너비 */
}
.half-width {
width: 50vw; /* 뷰포트의 반 너비 */
}이 단위들은 어떤 화면 크기에도 적응하는 반응형 디자인을 만들기에 훌륭합니다. 저는 이를 사용하여 폰에서 거대한 TV 화면까지 멋지게 보이는 전체 화면 랜딩 페이지를 만들었던 적이 있습니다!
CSS 측정 단위 - vmin 및 vmax 단위
'vmin'과 'vmax'는 뷰포트 단위의 动態 쌍입니다. 'vmin'은 뷰포트의 작은 측정을 사용하며, 'vmax'는 큰 측정을 사용합니다.
.square {
width: 50vmin;
height: 50vmin;
}이는 항상 뷰포트의 작은 측정의 50%인 완벽한 정方形을 만듭니다 - 비율을 유지하는 데 매우 유용합니다!
CSS 측정 단위 - vb 단위
'vb' 단위는 뷰포트의 블록 방향(보통 수평書寫 모드의 높이) 크기에 기반합니다. 'vh'와 유사하지만, 다양한 書寫 모드에 적응합니다.
.vertical-text {
writing-mode: vertical-rl;
height: 100vb; /* 수직 書寫 모드의 전체 높이 */
}이는 수평 및 수직 書寫 시스템 모두에서 잘 작동하는 레이아웃을 만들기에 매우 유용합니다.
CSS 측정 단위 - vi 단위
'vi' 단위는 'vb'의 인라인 버전입니다. 뷰포트의 인라인 방향(보통 수평書寫 모드의 너비) 크기에 기반합니다.
.horizontal-scroll {
width: 200vi; /* 뷰포트 너비의 두 배 */
overflow-x: scroll;
}이는 항상 뷰포트의 너비의 두 배인 수평 스크롤 요소를 만듭니다.
예제 - 백분율
CSS에서의 백분율은 항상 무엇에 상대적이냐에 따라 달라집니다. 너비의 경우, 일반적으로 부모 요소의 너비에 상대적입니다.
.parent {
width: 300px;
}
.child {
width: 50%; /* 이는 150px가 됩니다 */
}이 경우, .child 요소는 항상 부모 요소의 반 너비가 됩니다. 마치 요소에게 "부모의 반을 가져가!"라고 말하는 것과 같습니다!
예제 - 숫자
때로는 CSS 속성에 단위가 없는 숫자를 볼 수 있습니다. 이는 일반적으로 단위가 없는 속성에 사용됩니다. 예를 들어 line-height이나 opacity입니다.
p {
line-height: 1.5; /* 글자 크기의 1.5배 */
opacity: 0.8; /* 80% 투명 */
}이 경우, 행 높이는 글자 크기의 1.5배가 되어 텍스트가 잘 간격이 났고, 투명도는 80%가 됩니다.
그렇게 해서, 여러분은 CSS 측정 단위의 세상을 여행했습니다. 이러한 단위를 마스터하는 열쇠는 연습입니다. 프로젝트에서 이러한 단위를 섞고 조합해보세요. 그러면 곧 각 단위를 사용할 때를 알게 될 것입니다.
행복하게 코딩하세요, 그리고 레이아웃이 항상 픽셀 퍼фект하길 바랍니다! ?✨
Credits: Image by storyset