[css] tailwind css - 화면 가운데 정렬 + 꽉 채우기

꽉 채운 화면

위와 같이 화면을 꽉 채우면서 form 요소는 가운데 정렬을 만들었다.

    <div className="w-full min-h-screen bg-gray-300 flex items-center justify-center py-10">
      <main className="bg-white p-6 border-gray-400 border-2 rounded-lg">
        <MainLogo />
        {children}
      </main>
    </div>

• 화면 꽉 채우기: w-full min-h-screen
• 가운데 정렬: flex items-center justify-center

세로 방향으로 꽉 채우는 방법에는 h-full과 h-screen이 있다.

h-full의 경우 height: 100%에 대응되는데, 이는 부모 요소에 영향을 받는다. 거슬러 올라가서 모든 부모를 h-full로 만들면 1사용할 수는 있긴 한데, 애초에 높이라는 개념이 없는 html, body 요소에 높이를 지정하는 것은 어울리지 않는다.

h-screen은 height: 100vh에 대응되는 속성으로, 부모와 관계없이 동작한다. 이때 min을 붙이면 min-height: 100vh가 되는데, 이렇게 지정해야 화면이 정말 작아지는 상황에서도 회색 배경이 바깥쪽 화면 전체를 커버할 수 있다. 

h-screen 옵션을 준 경우

min-h-screen 옵션을 준 경우

 실험해본 결과 min-height: 100vh를 지정한 경우 해당 엘리먼트의 자식 크기 + 패딩 이하로는 줄어들지 않았다. 위 사이트에서 로그인 폼을 전부 제거하면 스크롤 없이 계속 줄어들었으나, 자식이 작게라도 존재하는 경우 해당 자식 + 자신만큼의 공간은 계속 유지하는 모습을 보였다.

화면에 작게라도 자식이 있는 경우

자식이 아무것도 없는 경우(자신의 패딩=크기 이하로 감소 X)

만약 화면 전체를 덮도록 구현할 필요가 있다면 min-height: 100vh가 좋은 선택 중 하나가 될 수 있다.