비율이 유지되는 반응형 item에서의 css 적용 방식

[ohsuhyeon0119]

과제와는 무관하고, grid를 이용한 card item list ui 를 반응형으로 만드는 연습을 하던 와중에 궁금한 것이 있어 질문드립니다!
styled component로 css 작성하였고 편의상 app.tsx에 한번에 코드를 작성한 상태입니다.

코드는 다음과 같습니다. 너무 길어질 것 같아 db 변수는 코드로 첨부하지 않았는데, 타입은 아래와 같고 길이는 4입니다.

type dbType = {
  id: number;
  title: string;
  comment: string;
  src: string;
}[];

App.tsx 코드 내의 App Component, gridContainer Component, Card Component

function App() {
  return (
    <div className="app">
      <GridContainer></GridContainer>
    </div>
  );
}

function GridContainer() {
  return (
    <Container>
      {db.map((card) => (
        <Card key={card.id} {...card}></Card>
      ))}
    </Container>
  );
}

function Card({
  title,
  comment,
  src
}: {
  title: string;
  comment: string;
  src: string;
}) {
  return (
    <CardBox
      onClick={() => {
        alert('nyaa');
      }}
    >
      <ImgBox>
        <img src={src} alt="image" />
      </ImgBox>
      <ContentBox>
        <TitleBox>
          <b>{title}</b>
        </TitleBox>
        <CommentBox>{comment}</CommentBox>
      </ContentBox>
    </CardBox>
  );
}

App.tsx 내의 StyledComponent 코드

const Container = styled.div`
  width: 100%;
  max-width: 30rem;

  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
`;

const CardBox = styled.div`
  position: relative;
  padding-top: 100%;
  width: 100%;
  height: 0;
  cursor: pointer;
  background-color: #a9a9a9;
`;

const ImgBox = styled.div`
  position: absolute;
  top: 0;
  width: 100%;
  height: 50%;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
`;

const ContentBox = styled.div`
  width: 100%;
  position: absolute;
  top: 50%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

const TitleBox = styled.p`
  width: 100%;
  text-align: center;

  margin: 0px;
`;
const CommentBox = styled.p`
  padding-left: 0.3rem;
  width: 100%;
  margin: 0px;
  font-size: 0.8rem;
  flex-grow: 1;
  overflow: hidden;
  @media (max-width: 30rem) {
    font-size: 0.7rem;
  }
`;

실행 화면 gif로 첨부합니다.

질문 관련 css 코드만 짧게 설명하자면 다음과 같습니다.

• Container : display : grid 속성이 적용되어 있고 columns는 2로 주었습니다. grid-auto-rows : 1fr로 하여 container의 height를 item들이 overflow하지 않도록 만들었습니다.
• CardBox : height를 0으로 하고 padding top을 width와 같은 100%을 주어 1:1 비율을 보증합니다. 동시에 position : relative로 하여 자식 요소의 display에 absolute를 줄때 배치를 CardBox 기준으로 하게 만들었습니다
• ImgBox 및 ContentBox : 두 Box 각각 top(CardBox 기준)을 0과 50%를 주어 CardBox의 높이를 정확히 1:1로 나눠 갖게 했습니다.

질문 요지는 padding 값을 이용한 card item의 가로 세로의 너비 비율 조정 방식 말고 다른 대안이 있는지에 대해서 입니다.
코드처럼 padding 값을 이용하면 card item의 자식 요소를 따로 absolute로 배치하고 contentbox는 imgbox의 height 비율을 고려해서 그만큼 top 값을 조정해줘야 하는데, 나중에 코드 관리 차원에서 복잡할 것 같고, 애초에 height를 0으로 주고 padding 을 이용하는 방식 자체가 일반적인 item 비율 조정 방식인지도 의문입니다.
처음에 생각한 item의 비율 조정 방식으로는 height값을 지정할 때 width 값에 접근하여 원하는 비율만큼 곱해주는 방식이 있을 거라 생각해서 구글링해봤으나 css 내에서는 그런 방식을 찾지 못했습니다
다른 대안은 react javascript로 직접 브라우저 너비에 따라 card item의 width와 height 값을 조정해주는 것인데 그럼 브라우저 리사이징마다 리렌더링이 일어날 것이고 성능적으로 문제가 있을 것 같아서요
질문을 요약하자면, (1) css 내에서 비율을 유지하는 방식은 padding 이외에 대안이 없는가? (2) js를 이용해 브라우저 리사이징마다 리렌더링이 일어나게 하는 것(굳이 card 에서의 경우가 아니더라도) 은 일반적으로 통용하여 사용하고 있는가? 입니다.

감사합니다!

[ohsuhyeon0119]

아 제가 다시 찾아봤는데 답이 공식문서에 있었네요 https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
aspect-ratio로 element의 종횡비를 지정해줄수 있다고 합니다. 최신으로 나온 지원 속성이라 자료가 많이 없었나봐요,,,, 혼자서 신나게 삽질했는데 결국에 mdn을 읽어봤어야 했군요 반성합니다

[woohm402]

오오 저도 프론트 3년 일하면서 한번도 안써봤어요 ㅋㅋㅋㅋㅋㅋㅋㅋ 종횡비를 유지할 일이 딱히 없었어서..

공유 감사합니다!