[CSS] width: 100%와 width: auto의 차이를 붕어빵으로 알아보자! (feat. Tailwind CSS)

 
 
 
 
내가 원하는 건 아래의 UI 인데

 
 
 
자꾸 이렇게 한 쪽으로 쏠리는 현상이 발생..🫠

 
 
 
겨울이라 추워서 붙어있고 싶나본데... 떨어지라구우우ㅇ~~

(출처: https://x.com/_100_x_100_?s=21&t=9-Zc1dbSHIHr7D4K7hclKA)

 
 
 
이유를 찾다가 w-full 이 문제인 것을 알게 되었는데, w-auto 과의 차이가 매번 헷갈려서 정리해보려고 한다.
Header 부분만 똑 떼어서 코드를 가져와봤다.

export default function Header({ onMemberSelect, onSearch, keyword }: HeaderProps): JSX.Element {
  return (
    <header className="my-16 flex items-center justify-between gap-20 md:mb-40 md:mt-0 md:gap-0">
      <Chevron className="md:hidden" />
      <h1 className="text-3xl-bold hidden md:block">멤버 관리</h1>
      <div className="md:gap-30 relative w-full md:flex md:w-auto">
        <div className="h-54 md:h-42 relative md:w-[240px]">
          <SearchForm onSearch={onSearch} keyword={keyword} />
        </div>
        <Button
          onClick={onMemberSelect}
          variant="Secondary"
          className="w-122 h-42 text-lg-medium text-custom-black/80 hidden md:block"
        >
          + 멤버 추가
        </Button>
      </div>
    </header>
  );
}

 
 
 
이 컴포넌트에서 문제가 되는 부분은 아래 코드이다.
반응형으로 구현했기 때문에 모바일 사이즈와 데스크탑 UI가 서로 달랐는데, 모바일에서는 SearchForm이 뒤로가기 버튼을 제외하고 꽉 채워졌어야 해서 w-full을 줬고, 따라서 데스크탑에서도 문제가 없을 거라 생각했다.

<div className="md:gap-30 relative w-full md:flex">

모바일 UI

 
 
 
하지만 내 생각과 다르게 UI가 한 쪽으로 쏠려있는 것을 볼 수 있었다. w-full을 사용하면 공간이 충분히 확보될 것이라고 생각했는데, 실제 동작은 그렇지 않았던 것이다.

데스크탑 UI

 
 
 

구글링을 하다보니 여기서 적절한 속성은 w-full이 아닌 w-auto인 것을 알게되었다..! 비유로 이해하면 더 이해가 잘 되기 때문에 붕어빵으로.. 예시로 들어보자면 (겨울이니까❄️)

w-full은 이런 느낌이다.
큰 테이블에 붕어빵 3개를 놓으려고 하는데, 먼저 테이블 크기만한(?) 봉투를 펼쳐놓는다.
그리고 나서 붕어빵을 봉투 안에 넣으면 봉투가 너무 커서 붕어빵들이 한쪽으로 쏠린다. 마치 SearchForm과 멤버 추가 버튼이 왼쪽으로 쏠려있는 것처럼!

반대로 w-auto는,
같은 테이블에 붕어빵 3개를 놓을 때, 붕어빵 크기에 맞는 적당한 봉투를 사용한다.
봉투 크기가 적절하니까 테이블 위에 올려놓았을 때 다른 것들과 간격을 자유롭게 조절할 수 있다. 따라서 SearchForm과 멤버 추가 버튼도 w-auto를 써야 header의 justify-between이 제대로 동작할 수 있었던 것이다.
 
 
 

.
.
.

 
 
 

오늘의 결론!

팥붕보단 슈붕이다