코딩스쿨

▶ CSS References

CSS Units

CSS Units : 다양한 CSS 단위 가이드

CSS 단위는 웹 페이지에서 요소의 크기, 위치, 간격 등을 정의하는 데 사용됩니다. 단위는 절대 단위(Absolute Units)와 상대 단위(Relative Units)로 구분되며, 각 단위는 요소의 크기를 특정 맥락에서 정의합니다. 이 가이드는 CSS에서 자주 사용되는 절대 단위와 상대 단위의 종류와 사용법을 설명합니다.

1. 절대 단위 (Absolute Units)

절대 단위는 화면의 크기와 상관없이 고정된 크기를 정의하는 단위입니다. 주로 인쇄 매체에서 사용됩니다. 화면에서 렌더링될 때는 고정된 크기로 표시됩니다.

1.1 `px` (픽셀)

설명: 화면에서 하나의 물리적 픽셀에 해당하는 단위입니다.
사용 예시:
```
p {
    font-size: 16px;
    margin: 10px;
}
```
위 코드에서 font-size: 16px은 텍스트 크기를 16픽셀로 고정합니다.

1.2 `pt` (포인트)

설명: 1포인트는 1/72인치입니다. 인쇄물에서 자주 사용됩니다.
사용 예시:
```
p {
    font-size: 12pt;
}
```
위 코드는 폰트를 12포인트로 설정합니다. 보통 인쇄물에서 사용되며, 화면에서는 비슷하게 렌더링됩니다.

1.3 `cm` (센티미터) 및 `mm` (밀리미터)

설명: 물리적 크기 단위로 1cm는 10mm입니다. 주로 인쇄 미디어에서 사용됩니다.
사용 예시:
```
div {
    width: 10cm;
    height: 50mm;
}
```
위 코드는 width를 10센티미터, height를 50밀리미터로 설정합니다.

1.4 `in` (인치)

설명: 1인치는 2.54cm입니다. 주로 인쇄에서 사용됩니다.
사용 예시:
```
img {
    width: 2in;
}
```
위 코드는 이미지의 너비를 2인치로 설정합니다.

2. 상대 단위 (Relative Units)

상대 단위는 요소의 부모 요소나 사용자 설정에 따라 상대적으로 크기가 변하는 단위입니다. 반응형 디자인과 유연한 레이아웃을 만들 때 유용합니다.

2.1 `%` (백분율)

설명: 부모 요소를 기준으로 한 백분율 값입니다. 레이아웃의 유연성을 높이기 위해 자주 사용됩니다.
사용 예시:
```
div {
    width: 50%;
    height: 80%;
}
```
위 코드는 div 요소의 너비를 부모 요소의 50%, 높이를 부모 요소의 80%로 설정합니다.

2.2 `em` (배수 단위)

설명: 부모 요소의 font-size를 기준으로 한 배수 값입니다. 글자 크기나 간격을 설정할 때 유용합니다.
사용 예시:
```
p {
    font-size: 2em;
}
```
위 코드는 부모 요소의 font-size의 두 배 크기인 2em으로 폰트를 설정합니다. 부모의 font-size가 16px이면 자식 요소의 폰트는 32px이 됩니다.

2.3 `rem` (루트 em)

설명: rem은 문서의 루트 요소(<html>)의 font-size를 기준으로 크기를 설정합니다.
사용 예시:
```
body {
    font-size: 16px;
}

h1 {
    font-size: 2rem;
}
```
위 코드는 h1 요소의 폰트 크기를 루트 요소의 폰트 크기(16px)의 두 배인 32px로 설정합니다.

2.4 `vh` (뷰포트 높이) 및 `vw` (뷰포트 너비)

설명: vh는 뷰포트(viewport) 높이의 1%를 의미하고, vw는 뷰포트 너비의 1%를 의미합니다.
사용 예시:
```
div {
    width: 50vw;  /* 뷰포트 너비의 50% */
    height: 100vh; /* 뷰포트 높이의 100% */
}
```
위 코드는 요소의 너비를 뷰포트 너비의 50%, 높이를 뷰포트 전체 높이(100%)로 설정합니다.

2.5 `vmin` 및 `vmax`

설명: vmin은 뷰포트의 너비와 높이 중 작은 값의 1%, vmax는 큰 값의 1%입니다.
사용 예시:
```
div {
    width: 50vmin;
}
```
위 코드는 뷰포트의 너비와 높이 중 더 작은 값의 50%로 요소의 너비를 설정합니다.

3. 기타 상대 단위

3.1 `ch` (문자 폭)

설명: 현재 폰트의 숫자 0(0)의 폭을 기준으로 한 단위입니다. 주로 텍스트 요소의 폭을 설정할 때 사용됩니다.
사용 예시:
```
input {
    width: 30ch;
}
```
위 코드는 입력 필드의 너비를 30개의 문자(숫자 0)의 폭에 맞춥니다.

3.2 `ex` (x-높이)

설명: 폰트에서 소문자 x의 높이를 기준으로 한 단위입니다.
사용 예시:
```
p {
    line-height: 2ex;
}
```
위 코드는 소문자 x 높이의 두 배로 줄 간격을 설정합니다.

3.3 `fr` (Fractional Unit, 그리드 레이아웃에서 사용)

설명: CSS 그리드 레이아웃에서 사용되며, 가용 공간을 비율로 분배할 때 사용됩니다.
사용 예시:
```
.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}
```
위 코드는 그리드의 열을 1:2:1의 비율로 설정합니다. 가용 공간이 나눠져 두 번째 열이 가장 넓어집니다.

4. CSS 단위 사용 팁

절대 단위는 화면 크기와 무관하게 고정된 크기를 원할 때 사용하지만, 반응형 디자인에서는 상대 단위가 더 유용합니다.
rem 단위는 em 단위보다 유지 관리가 쉬울 수 있습니다. rem은 루트 요소의 폰트 크기를 기준으로 하기 때문에, 전역 폰트 크기를 쉽게 변경할 수 있습니다.
뷰포트 단위(vh, vw)는 화면 크기에 따라 자동으로 크기가 조정되기 때문에 반응형 디자인을 만들 때 유용합니다.
텍스트 기반 레이아웃에서는 em, rem 단위를 사용하여 요소들이 루트 또는 부모 요소에 대해 유연하게 크기를 가지도록 설정할 수 있습니다.

요약

CSS 단위는 요소의 크기, 여백, 폰트 크기 등을 정의하는 데 필수적인 역할을 합니다. 절대 단위(px, cm, in)는 고정된 크기를 지정하는 데 유용하며, 상대 단위(em, rem, %, vh, vw)는 레이아웃의 유연성을 높이는 데 필수적입니다. 웹 디자인에서 각 단위를 적절히 사용하면 반응형, 접근성 높은 디자인을 구현할 수 있습니다.

코딩 스쿨 CSS

CSS Units

CSS Units : 다양한 CSS 단위 가이드

1. 절대 단위 (Absolute Units)

1.1 px (픽셀)

1.2 pt (포인트)

1.3 cm (센티미터) 및 mm (밀리미터)

1.4 in (인치)

2. 상대 단위 (Relative Units)

2.1 % (백분율)

2.2 em (배수 단위)

2.3 rem (루트 em)

2.4 vh (뷰포트 높이) 및 vw (뷰포트 너비)

2.5 vmin 및 vmax