CSS 레이아웃이 다른 문제 해결

현재 Nomad Coder의 airbnb-clone을 수강중이다. 현재 70% 조금 넘게 진행되었는데, 웹 프론트 엔드 부분은 장고 템플릿과 tailwind를 사용해서 만들어졌다. 그런데 강의를 수강하면서 페이지들을 만드는 중에 문제가 발생했고, 강의에서는 이 문제에 대해 아무 언급이 없어서 해결 방법을 찾으려 한다.

문제 발생

현재 만들고 있는 airbnb-clone 사이트에서는 예약 가능한 숙소 리스트를 보여준다. 이 숙소 리스트는 홈페이지와 개인 상세 페이지, 이렇게 두 종류의 페이지에서 보여지는데, 홈페이지에서는 예약 가능한 숙소 전체를 볼 수 있고, 개인 상세 페이지에서는 숙소 사업자인 경우 자신이 등록한 숙소 리스트를 볼 수 있다. 그런데 여기서 문제가 발생했다.

정상적으로 출력되는 숙소 리스트

홈페이지와 개인 상세 페이지 모두에서 숙소 리스트가 잘 보여지는 것 같았으나 어떤 개인 상세 페이지에서는 숙소 리스트의 너비가 너무 짧게 설정 되었다. 모두 코드는 동일한 코드를 사용했고 이미지 파일만 달랐는데 이런 문제가 발생했다.

문제가 발생한 숙소 리스트

우선 문제의 html 코드 부분은 아래와 같다. class 값에 따른 css의 자세한 내용은 tailwind를 문서를 읽어야 하지만 대부분의 적용될 스타일은 class명만 봐도 이해가 가능하다

<div class="flex flex-wrap -mx-40 mb-10">
    <div class="w-1/4 mb-10 px-2 overflow-hidden">
        <a href="{% url 'rooms:detail' room.pk %}" >
            <div class="w-full h-64 bg-cover bg-center rounded-lg mb-2"
            style="background-image: url({{room.first_photo}});" /></div>

              ...

        </a>
    </div>
</div>

공부할 내용 찾기

• 확인한 내용

코드의 두 번째 줄 div는 각각의 숙소 리스트 요소에 해당한다. 이 div의 경우 w-1/4 class가 적용되었는데, 해당 class는 width: 25%가 적용된다. 그렇다면 이 div element의 너비는 자신의 containing block 너비의 1/4이 적용된다. 그런데 정상적으로 출력되는 숙소 리스트의 경우 width 값을 330px정도를 갖는 것에 비해서 비정상적으로 출력되는 숙소 리스트는 140px 정도를 가졌다. 다른 숙소 리스트들도 찾아본 결과 숙소 리스트의 개수에 따라서 각각의 숙소 리스트의 너비가 달라지는 것으로 확인했다. 즉, 사용자의 등록 숙소가 2개, 3개, 4개로 늘어남에 따라서 리스트의 너비도 늘어났다.

• 공부할 내용

확인한 내용에 따르면 숙소 리스트 요소의 상위 요소들에서 width 값이 명시되지 않았기 때문에 width: 25%를 적용했을 때 값이 불안정하게 바뀌는 것으로 추측할 수 있다. width 값이 결정되는 과정을 이해하기 위해서 containing block을 공부해야 할 것 같고, 또한 브라우저가 block 요소를 그리는 방식인 block formatting context에 대해서도 공부해야 할 것 같다.(이 것이 적절한 문제 해결지점이 아닐 수도 있기 때문에, 공부하면서 원인을 더 찾겠다.)