크기를 나타내는 다양한 단위와 최소, 최대 사이즈 설정에 대해 알아봅시다.

🧩 절대 길이 단위

다른 요소의 크기 변화에 영향을 받지 않고 동일한 크기를 유지하는 것이 절대 단위입니다.
주고 px (픽셀) 을 사용합니다.

px (픽셀)

픽셀은 화면을 이루는 단위를 뜻합니다.
화면을 구성하는 아주 작은... 점 하나 하나를 픽셀이라고 하고,
이 픽셀 1개의 크기를 1px 이라고 합니다.

어떤 화면, 디바이스에서 사용해도 같은 크기를 유지 한다는 점이 특징입니다.

🧀 상대 길이 단위

상대 길이 단위를 사용하면 요소의 크기가 상위 요소, 다른 요소 등에 영향을 받아 변합니다.
다른 요소의 변화가 나에게도 영향을 미치게 됩니다.
주로 화면 크기에 비례하여 변하는 반응형 동적 디자인을 만들 때 사용합니다.

em 과 rem

em 과 rem 은 font-size 를 기준으로 설정되는 크기 단위입니다.
두 단위의 차이는 다음과 같습니다.

• em : 요소의 font-size 크기
• rem : 루트 요소의 font-size 크기

즉, em 은 해당 요소의 font-size 를 기준으로 하고,
rem 은 루트 요소(최상위 요소)인 html 의 font-size 를 기준으로 합니다.

---

div 의 font-size 가 10px 이면, 1em 은 10px, 1rem 은 16px (html 의 font-size 가 기본 16px 설정임)

크기는 위처럼 결정됩니다.
em 과 rem 은 참고로 하는 요소의 font-size 크기로 값을 결정합니다.

em 의 문제점❓

em 을 사용했는데, 그 요소에 font-size 값을 설정하지 않으면❓

위와 같은 상황이 발생하면 어떻게 될까요?
브라우저는 부모 요소의 font-size 값을 참고하게 됩니다.

그런데, 이런 방식은 상속 관계를 파악하기가 힘들어질 수 있습니다.
따라서 확정적으로 html 을 참고하는 rem 을 사용하는 것을 권장합니다.

vw 와 vh

vw 는 viewport width, vh 는 viewport height 를 뜻합니다.
viewport 란 현재 보이는 화면 영역을 나타냅니다.

width 를 100vw 로, height 를 100vh 로 설정하면 전체 화면 크기가 됩니다.

---

❗ 전체 창의 길이가 스크롤 이후에 존재하더라도,
100vw 와 100vw 는 창의 가시 영역만큼의 크기만을 가짐

현재 보이는 영역이라는 뜻은 위와 같이 적용됩니다.
뷰포트 단위는 사용자가 창을 켜서 볼 수 있는 영역만큼의 크기만을 적용합니다.

만약 내가 전체 창의 크기를 2만 px 로 설정해서 스크롤이 아주많이 남더라도...
내 모니터의 가로 길이가 2000px 길이라면 전체 화면 기준 100vw 는 2000px 입니다.

% (백분율)

백분율로 너비를 지정하면 자식 요소는 부모 요소의 크기를 참고하여
자신의 content 영역 사이즈를 정합니다.
자식 요소에서 width: 50% 를 설정했을 때, 부모 요소의 너비가 100px 이라면
자식 요소의 너비는 50px 이 됩니다.

부모 요소의 크기의 백분율 값을 가져오는 것입니다.

---

위는 예시이고, 더 정확히 말하면 백분율이란 가용 면적에 대한 사용 면적의 비율입니다.
만약 사용 가능한 면적이 100px 로 계산된다면, 50% 의 결과로 50px 을 얻어 content 영역의 사이즈로 사용합니다.

❗ 가용 면적과 사용 면적

백분율의 가용 면적과 사용 면적은 부모의 content 영역을 기준으로 구하며, 자식의 content 영역에 적용됩니다.

.parent {
  width: 100px;
  height: 100px;
}

.child {
  width: 50%;
  height: 50%;
}

위처럼 구성될 때, .child 는 가용 면적 100px 에서 50px 을 사용 면적으로 가져오겠죠?

그런데, 만약 .parent 에 padding 을 추가한다면 어떻게 될까요?
그리고 box-sizing 이 border-box 라서 padding 이 늘어날 때 박스 사이즈가 줄어든다면요.

* {
  box-sizing: border-box;
}

.parent {
  width: 100px;
  height: 100px;
  padding: 20px;
}

.child {
  width: 50%;
  height: 50%;
}

그럼 .parent 의 content 영역은 좁아지니, .child 의 가용 면적이 줄어들게 되죠.
이때 .child 가 얻는 사용 면적은 padding 이 차지한 만큼 적어집니다.

그 외에도, box-sizing: border-box 를 설정하지 않았을 때
.child 에 padding 을 주면, .child 의 전체 너비는 50% 로 얻어온 값에
padding 을 추가한 만큼 더 늘어나겠죠.

---

이렇듯 백분율로 얻어오는 값은 내가 사용 가능한 면적(부모의 content 영역)에 대한
비율이고, 이렇게 얻어온 값이 나의 content 영역의 크기가 된다는 걸 확인할 수 있습니다.

padding 이 사이즈 예측을 망치게 하기 싫다면 box-sizing 을 사용하면 된다는 것도요.

margin 과 padding 의 백분율

margin 과 padding 에 백분율을 사용하여 크기를 지정하는 경우, 인라인 크기에서 계산합니다.
즉, margin: 10% 를 주면 상하는 높이를, 좌우는 너비를 참고하여 크기를 정하는 게 아닙니다.
상하좌우 모두 너비(width)를 참고하여 크기를 설정합니다.

min 과 max 로 크기 제한하기

width 와 height 에 min- 이나 max- 를 붙여서
최대/최소 크기를 설정할 수 있습니다.

최대/최소 크기를 설정하면 요소는 그 이상으로 작아지거나 커지지 않습니다.
min-width 나 max-height 와 같은 속성을 사용하여 값을 설정합니다.

auto 속성값

크기에 auto 를 속성값으로 사용할 수도 있습니다.
auto 로 크기를 설정하면 자동으로 크기를 조정해줍니다.

저는 주로 이미지의 크기를 설정할 때 사용합니다.
이미지의 경우 가로 세로 비율이 일정해야 잘리지 않고 온전히 보존되기에...
이미지의 너비나 높이 중 하나를 100px 로 설정하고 나머지를 auto 로 설정하는 등
가로 세로 비율을 자동으로 맞출 때 사용합니다.

가용 면적을 최대로 사용하는 auto

width 나 margin 에 auto 를 지정하면 가능한 만큼 최대로 늘어납니다.
block 요소에 너비 설정을 해주지 않으면 요소가 스크린을 다 채우도록 늘어나는데,
이는 기본 width 설정이 auto 로 되어있기 때문이죠.

margin 또한 auto 로 설정하면 가용 면적을 전부 차지하도록 늘어납니다.

✅ width 와 height 의 기본 설정

width 는 기본적으로 auto 로 설정되어, 가용 면적을 전부 차지하도록 늘어납니다.
반면, height 의 경우 기본적으로 자식 컨텐츠를 다 담을 만큼만 늘어납니다.
min-content 처럼 동작하는 것이죠.

왜 height 는 content 크기에 대해 동적이도록 설정될까?

이는 content 인 텍스트의 양에 상관없이 동일한 레이아웃을 보여주기 위함입니다.
만약 height 를 어떤 값으로 고정하여 길이가 content 크기에 따라 늘어나지 않는다면
content 가 컨테이너 영역을 벗어나게 되겠죠.

📌 정리하면, width 는 부모의 content 영역 사이즈로, 
height 는 자식 컨텐츠의 사이즈로 정해집니다.

content 크기에 맞추기

width 의 크기를 content 크기에 맞춰 조절하는 방법도 있습니다.
사용 가능한 속성값은 다음과 같습니다.

• min-content: content 의 최소 필요 단위만큼 너비 부여. line-break 를 일으킴
• max-content: line-break 를 일으키지 않을 최소 크기만큼 너비를 늘림
• fit-content: 부모 컨테이너 영역보다 content 가 작다면 max-content 처럼 동작하지만, 만약 그보다 content 가 넓다면 적당하게 line-break 를 넣어서 content 가 부모 영역을 넘어가지 않도록 함