[CSS] Width/Height

Width

• 블록 요소의 기본적인 width 값은 auto이다. margin auto와 비슷하게, 자기가 먹을 수 있는 최대한의 space를 차지하려고 한다.
• width를 정의하는 방법은 크게 2가지다.
  1. 100%, 5rem, 200px 등 숫자가 포함된 어떤 단위
  2. auto, fit-content 등 어떤 키워드
• width를 숫자로 정의하는 경우 부모 요소를 기준으로 한다. 예를 들어 100% 라고 하면 무조건 부모 요소의 width만큼 늘어난다. (auto와 달리, 마진이 있더라도 무시된다)

min-content, max-content, fit-content

• min-content와 max-content는, 다른 width와 달리 child를 기준으로 너비를 잡는다. 예를 들어서 auto나 100% 같은 값은 부모 요소를 기준으로 설정되는 것인데, min-content/max-content는 자식 요소의 컨텐츠에 따라 결정된다.
• min-content는 자식 컨텐츠가 하이픈이 있거나 공백이 있는 경우 line break을 줘서 최대한 너비를 좁게 만든다.
• max-content는 min과 반대로 아무리 컨텐츠가 길어도 line break을 하지 않으며, 부모 요소의 제한도 무시한다. Max-content는 auto와 달리 전체 너비를 greedy하게 차지하지 않는다. 자식의 컨텐츠만큼만 차지한다.
• fit-content는 min과 max의 장점을 섞어놓았다. parent 요소가 자신보다 클 때에는 max-content처럼 작용하고, parent 요소보다 커질 때에는 line break를 주고 auto처럼 작용하여 주어진 스페이스를 넘지 않는다.

Height

width와 height은 기본 동작이 다르다. width는 as long as possible이라면 height은 자식 컨텐츠를 포함한 as short as possible이다.

<style>
  .wrapper {
    min-height: 100%;
  }
</style>

<div class="wrapper">
  <p>
    나는 100%가 아니야
  </p>
</div>

위의 코드에서 wrapper의 최소 높이를 100%로 줬음에도, 실제 화면에는 wrapper의 높이는 p태그의 높이만큼만 차지한다.

이 이유는 퍼센트 높이나 min-height을 지정할 때는 부모 높이를 기준으로 하기 때문이다. wrapper 클래스의 부모는 body 태그인데, body는 정해진 특정한 높이가 없으므로 디폴트로 작동한다. 즉, 높이의 기본 동작인 as short as possible을 유지한다.

사실은 우리가 불가능한 조건을 지정한 것이다. body는 자식의 높이 따라 최소 높이를 지정할텐데, 그 자식(wrapper)에게는 부모인 body의 높이의 100%를 지정했으니 말이다. 부모-자식이 서로의 높이를 참조하는 셈이다.

위의 코드에 문제 현상을 고치는 방법으로는 아래 2가지를 검토해볼 수 있다.

• 모든 부모에 (html 태그와 body 태그 모두) height 100%를 부여한다. -> html에 높이 100%를 주면 뷰포트의 높이만큼 늘어나고, body와 그 밑의 원소들도 다 이를 기준으로 높이를 잡게 된다.
• wrapper에 높이를 100vh로 준다? -> vh는 뷰포트를 나타내는 단위로, 우리가 의도한 효과에 맞는 프로퍼티이긴 하지만 모바일에서는 원하는대로 동작하지 않을 수 있다. 왜냐하면 모바일에서는 스크롤하면 주소바가 없어지면서 공간이 더 생기기 때문이다. 그래서 모바일 디바이스에서 스크롤링할 때 뷰포트 높이가 변경된다. 이 이슈를 피하기 위해 iOS 사파리나 크롬 안드로이드는 vh를 스크롤링 후 맥시멈 뷰포트 높이로 설정한다. 그래서 맨 처음 페이지가 로드됐을 때의 100vh는 우리가 실제로 볼 수 있는 부분보다 길다. 그러므로 이 방법보다는 html과 body에 모두 height 100%를 주는 방법이 일반적으로 더 낫다.