https://kukie.tech/tags/css/Recent content in Css on HistoryHugoko-krWed, 04 Mar 2026 18:00:00 +0900https://kukie.tech/posts/card-layout-refactor/Wed, 04 Mar 2026 18:00:00 +0900https://kukie.tech/posts/card-layout-refactor/<p>맥에서 멀쩡하던 카드 레이아웃이 윈도우 모니터에서 너무 크게 보이는 문제를 고치면서 구조 자체를 뜯어고친 과정을 정리함.</p> <h2 id="문제-모니터마다-카드-크기가-달라짐">문제: 모니터마다 카드 크기가 달라짐</h2> <p>맥에서 볼 때는 카드 높이가 적당했는데, 윈도우 모니터로 보니 카드가 너무 커졌음. 원인은 카드 높이를 <code>65vh</code>로 잡아놨기 때문이었음. <code>vh</code>는 뷰포트 높이 기준이라 모니터가 크면 그냥 비례해서 커짐.</p> <p>가로폭도 마찬가지였음. 그리드 컨테이너를 <code>max-width: 90vw</code>로 잡아놨는데, 27인치 모니터에서는 <code>90vw</code>가 엄청 넓어짐.</p> <h2 id="카드-높이-고정-시도">카드 높이 고정 시도</h2> <p>처음엔 <code>vh</code>를 픽셀로 바꾸는 것만 해봤음.</p>