[CSS] 단위요소 (px, %, em, rem, vw, vh, vmin, vmax)

1. px(픽셀):

픽셀은 화면에서 고정된 크기를 의미하며, 화면 크기나 해상도와 관계없이 항상 동일한 크기로 표시됩니다.

예시:

<div style="width: 100px; height: 100px; background-color: lightblue;">
    픽셀로 크기 설정
</div>

이 코드는 100px × 100px 크기의 박스를 생성합니다. 화면의 크기나 해상도와 상관없이 이 박스는 항상 동일한 크기를 유지합니다.

---

2. % (퍼센트):

퍼센트는 부모 요소의 크기에 상대적인 값을 나타냅니다. 부모 요소의 크기가 변하면, 자식 요소의 크기도 함께 변합니다.

예시:

<div style="width: 400px; height: 200px; background-color: lightgray;">
    <div style="width: 50%; height: 100px; background-color: pink;">
        부모 요소 크기의 50%
    </div>
</div>

여기서 부모 요소는 400px 너비를 가지므로, 자식 요소의 너비는 50%인 200px로 설정됩니다. 만약 부모 요소의 크기를 변경하면, 자식 요소의 크기도 자동으로 변경됩니다.

---

3. em:

em 단위는 글꼴 크기를 기준으로 상대적인 크기를 나타냅니다. 요소가 상속받은 글꼴 크기를 기준으로 배수로 계산됩니다.

예시:

<div style="font-size: 16px;">
    <p style="font-size: 2em;">이 텍스트는 2em 크기입니다.</p>
</div>

이 경우, 부모 요소의 기본 글꼴 크기가 16px이므로, 2em은 그 두 배인 32px로 설정됩니다. 부모 요소의 글꼴 크기가 달라지면, em 단위로 설정된 자식 요소의 크기도 달라집니다.

---

요약:

• px: 고정 크기. 해상도나 화면 크기에 상관없이 항상 동일.
• %: 부모 요소의 크기에 따라 상대적으로 변함.
• em: 부모 요소의 글꼴 크기에 따라 상대적으로 변함.

4. rem (Root EM)

rem은 문서의 루트 요소(html 태그)의 글꼴 크기를 기준으로 상대적인 크기를 설정하는 단위입니다. 페이지의 전체적인 일관성을 유지하고 싶을 때 유용합니다. 예를 들어, 기본 글꼴 크기가 16px로 설정되어 있다면, 1rem은 16px을 의미합니다.

예시:

<style>
    html {
        font-size: 16px;
    }
    p {
        font-size: 1.5rem;
    }
</style>

<p>이 문장은 루트 요소 글꼴 크기의 1.5배인 24px로 표시됩니다.</p>

• 이 경우 1.5rem은 16px × 1.5 = 24px로 계산되어, 이 문장의 글꼴 크기는 24px로 설정됩니다.

---

5. vw (Viewport Width)

vw는 브라우저 창의 너비를 기준으로 한 비율을 의미합니다. 1vw는 뷰포트 너비의 1%를 나타냅니다. 예를 들어, 뷰포트의 너비가 1000px이라면, 50vw는 500px이 됩니다.

예시:

<style>
    div {
        width: 50vw;
        height: 100px;
        background-color: lightblue;
    }
</style>

<div>이 박스는 뷰포트 너비의 50% 크기입니다.</div>

• 만약 브라우저 창의 너비가 1000px이라면, 이 박스의 너비는 500px로 설정됩니다. 브라우저 창이 커지거나 작아지면 이 박스의 너비도 비율에 맞게 자동으로 조정됩니다.

---

6. vh (Viewport Height)

vh는 브라우저 창의 높이를 기준으로 한 비율을 나타냅니다. 1vh는 뷰포트 높이의 1%에 해당합니다. 예를 들어, 뷰포트 높이가 800px이라면, 50vh는 400px이 됩니다.

예시:

<style>
    div {
        height: 50vh;
        width: 100px;
        background-color: pink;
    }
</style>

<div>이 박스는 뷰포트 높이의 50% 크기입니다.</div>

• 만약 브라우저 창의 높이가 800px이라면, 이 박스의 높이는 400px로 설정됩니다. 마찬가지로, 창의 높이가 변경되면 비율에 맞게 박스의 높이도 변경됩니다.

---

요약:

• rem: 루트 요소 글꼴 크기를 기준으로 상대적인 크기를 설정합니다. (글꼴 크기와 관련)
• vw: 브라우저 창 너비의 백분율을 나타냅니다. (너비에 따라 비율이 조정됨)
• vh: 브라우저 창 높이의 백분율을 나타냅니다. (높이에 따라 비율이 조정됨)

vmin과 vmax는 뷰포트의 너비(vw)와 높이(vh) 중에서 작은 값이나 큰 값을 기준으로 크기를 설정하는 단위입니다. 이 두 단위는 반응형 디자인에서 유용하게 사용할 수 있으며, 화면의 크기에 맞춰 요소 크기를 자동으로 조절할 수 있습니다.

1. vmin (Viewport Minimum)

vmin은 뷰포트의 너비와 높이 중 작은 값의 백분율을 기준으로 크기를 설정하는 단위입니다.

예시:

<style>
    div {
        width: 50vmin;
        height: 50px;
        background-color: lightgreen;
    }
</style>

<div>이 박스는 뷰포트의 너비 또는 높이 중 작은 쪽의 50% 크기입니다.</div>

• 만약 뷰포트의 너비가 1200px이고 높이가 800px이라면, 800px이 더 작으므로, 1vmin은 8px입니다. 따라서 이 박스의 너비는 50vmin = 400px으로 설정됩니다.
• 반대로, 창의 크기가 조정되면 작은 쪽 값에 따라 자동으로 박스의 크기가 조정됩니다.

---

2. vmax (Viewport Maximum)

vmax는 뷰포트의 너비와 높이 중 큰 값의 백분율을 기준으로 크기를 설정하는 단위입니다.

예시:

<style>
    div {
        width: 50vmax;
        height: 50px;
        background-color: lightcoral;
    }
</style>

<div>이 박스는 뷰포트의 너비 또는 높이 중 큰 쪽의 50% 크기입니다.</div>

• 만약 뷰포트의 너비가 1200px이고 높이가 800px이라면, 1200px이 더 크므로, 1vmax는 12px입니다. 따라서 이 박스의 너비는 50vmax = 600px으로 설정됩니다.
• 창의 크기가 조정되면 큰 쪽 값에 따라 박스의 크기가 변경됩니다.

---

요약:

• vmin: 뷰포트 너비와 높이 중 작은 값의 백분율을 기준으로 크기를 설정합니다.
  • 너비가 1200px이고 높이가 800px인 경우, 작은 값인 800px 기준.
• vmax: 뷰포트 너비와 높이 중 큰 값의 백분율을 기준으로 크기를 설정합니다.
  • 너비가 1200px이고 높이가 800px인 경우, 큰 값인 1200px 기준.

각 단위는 상황에 맞게 선택하여 사용하시면 됩니다

vmin 과 vmax 는 잘 안 쓰긴 했음