카드 반응형 / 디자인 선택

화면에 따라 카드가 잘리는 문제는 일반적으로 반응형 디자인 문제입니다. 카드의 크기를 rem 단위로 지정하였다면, 이는 상대적인 크기를 나타냅니다. 하지만 디바이스의 크기나 해상도에 따라 다르게 표시될 수 있습니다.

이를 해결하기 위해 다음과 같은 방법들이 있습니다:

1. 미디어 쿼리 사용: 다양한 디바이스 크기에 따라 카드의 크기를 조절할 수 있습니다. 예를 들어, 작은 화면에는 카드의 크기를 줄이거나 여백을 조정할 수 있습니다.
2. Flexbox 또는 Grid 사용: Flexbox 또는 Grid 레이아웃을 사용하여 카드를 유연하게 배치할 수 있습니다. 이를 통해 화면 크기에 따라 카드의 크기와 위치를 동적으로 조절할 수 있습니다.
3. Viewport 단위 사용: vw (viewport width) 나 vh (viewport height)와 같은 뷰포트 단위를 사용하여 카드의 크기를 지정할 수 있습니다. 이는 화면 크기에 따라 상대적으로 크기를 조절합니다.
4. Max-width/Max-height 설정: 카드에 최대 너비나 최대 높이를 설정하여 화면 크기가 일정 이상으로 커지면 카드가 더 이상 확장되지 않도록 할 수 있습니다.