CSS 크기 단위 이해: px, em, rem, % 등

CSS에는 픽셀(px)부터 백분율(%), em 및 rem과 같은 상대 단위까지 요소의 크기를 제어하는 ​​다양한 단위가 있습니다. 반응성이 뛰어나고 접근 가능한 레이아웃을 구축하려면 디자인에 적합한 단위를 선택하는 것이 중요할 수 있습니다. 이 가이드에서는 가장 일반적인 CSS 크기 단위, 각 단위의 사용 시기, 레이아웃에 미치는 영향을 다룹니다.

---

1. 픽셀(px)

픽셀은 CSS에서 가장 일반적인 절대 단위 중 하나입니다. px는 화면의 물리적 픽셀 하나를 나타냅니다. 고정되어 있으므로 px를 사용하면 사용자 설정에 관계없이 요소가 동일한 크기로 유지됩니다.

px 사용 시기:

• 아이콘이나 테두리와 같은 정확하고 고정된 요소에는 px를 사용하세요.
• 사용자가 브라우저 확대/축소 수준을 조정할 때 접근성에 영향을 미칠 수 있으므로 텍스트의 경우 px를 사용하지 마세요.

예:

p {
  font-size: 16px;
  width: 200px;
}

---

2. 백분율(%)

% 단위는 상대적입니다. 즉, 상위 요소의 크기에 따라 조정됩니다. 이러한 유연성 덕분에 %는 반응형 디자인, 특히 뷰포트에 따라 요소 크기가 조정되는 유동적 레이아웃의 필수 도구가 됩니다.

% 사용 시기:

• 상위 컨테이너를 기준으로 조정해야 하는 컨테이너나 이미지와 같은 레이아웃 요소에는 %를 사용하세요.
• %를 미디어 쿼리와 결합하여 유연하고 반응이 빠른 디자인을 만듭니다.

예:

.container {
  width: 80%; /* 80% of the parent element's width */
}

---

3. em 단위

em 단위는 가장 가까운 상위 요소의 글꼴 크기를 기반으로 하는 상대적 단위입니다. 상위 글꼴 크기가 정의되지 않은 경우 기본값은 브라우저의 기본 글꼴 크기(일반적으로 16px)입니다.

핵심 사항:

• 1em은 상위 요소의 글꼴 크기와 같습니다.

• 1em은 크기가 두 배입니다.

• em 값은 중첩된 요소에 적용될 때 배가될 수 있으므로 중첩에 주의하세요.

사용 시기:

• 텍스트 크기에 따른 간격, 패딩 또는 여백 조정

• 상위 텍스트 크기를 기준으로 조정해야 하는 구성 요소의 글꼴 크기입니다.

예:

.container {
  font-size: 16px;
}

.child {
  padding: 1.5em; /* 1.5 times the font size of .container */
}

---

4. rem 단위

em과 달리 rem 단위는 루트 요소()의 글꼴 크기를 기반으로 합니다. 즉, 1rem은 문서 전체에서 일관됩니다(사용자 정의하지 않는 한 16px인 경우가 많습니다). 따라서 rem은 웹페이지 전체에서 일관된 타이포그래피와 간격을 유지하는 데 신뢰할 수 있는 단위입니다.

rem을 사용하는 경우:

• 중첩된 요소에 관계없이 구성요소 전반에 걸쳐 일관된 글꼴 크기를 제공합니다.

• 명확한 기준점을 통해 더욱 확장 가능하고 유지 관리가 용이한 디자인을 달성합니다.

예:

p {
  font-size: 16px;
  width: 200px;
}

---

5. 뷰포트 단위(vw 및 vh)

뷰포트 단위(vw(뷰포트 너비) 및 vh(뷰포트 높이))는 뷰포트(브라우저 창) 크기를 기반으로 하는 반응형 단위입니다. 1vw는 뷰포트 너비의 1%에 해당하고, 1vh는 뷰포트 높이의 1%에 해당합니다.

vw 및 vh를 사용하는 경우:

• 전체 페이지 히어로 섹션과 같이 브라우저 크기에 따라 확장되어야 하는 요소의 경우

• 화면 너비에 따라 조정되는 반응형 타이포그래피를 만듭니다.

예:

.container {
  width: 80%; /* 80% of the parent element's width */
}

---

6. 유연한 길이 단위(최소, 최대 및 클램프)

min(), max() 및 클램프()와 같은 최신 단위는 반응형 디자인에 강력하며 최소 또는 최대 값을 기준으로 조건부 크기 조정이 가능합니다.

min(a, b): 두 값 중 가장 작은 값을 취합니다.
max(a, b): 두 값 중 가장 큰 값을 취합니다.
클램프(최소, 선호, 최대): 정의된 범위 내에서 적용되는 값을 설정합니다.

사용 시기:

• 특정 범위에 맞는 반응형 타이포그래피를 위해
• 뷰포트를 기준으로 구성요소 크기를 조정하지만 최소 또는 최대 제한이 있습니다.

예:

.container {
  font-size: 16px;
}

.child {
  padding: 1.5em; /* 1.5 times the font size of .container */
}

---

결론

각 CSS 단위에는 고유한 장점과 이상적인 사용 사례가 있습니다.

• px는 정확하고 고정된 요소입니다.
• 유동적이고 반응성이 뛰어난 레이아웃 구성 요소의 경우 %입니다.
• 상위 요소를 기준으로 크기를 조정하려면 em을 사용하세요.
• 페이지 전체에서 일관된 크기 조정을 위한 rem입니다.
• 동적 뷰포트 기반 요소를 위한 뷰포트 단위.
• 적응형, 조건부 스타일을 위한 클램프()와 같은 유연한 단위.

이러한 CSS 단위를 익히면 유연하고 접근 가능하며 유지 관리 가능한 레이아웃을 만드는 데 도움이 됩니다. 디자인 요구 사항에 따라 믹스 앤 매치하고 레이아웃이 실제로 나타나는지 확인하세요! 즐거운 스타일링되세요!

위 내용은 CSS 크기 단위 이해: px, em, rem, % 등의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!