카드는 정보나 콘텐츠를 시각적으로 그룹화하고 표시하기 위해 사용되는 컨테이너 요소다. 카드는 일반적으로 사진, 텍스트, 버튼 등 다양한 내용을 포함하며, 웹사이트나 앱에서 다양한 목적으로 사용된다.
사용 예시
카드는 블로그 게시물, 제품, 뉴스 기사, 사용자 프로필 등 다양한 콘텐츠를 표시하는 데 사용된다. 각 카드는 독립적인 정보 또는 작업을 나타내며, 보통 그림과 제목, 설명, 버튼 등으로 구성된다.
주의점
- 카드의 디자인은 사용자에게 정보를 쉽게 읽고 이해할 수 있도록 해야 한다. 텍스트의 가독성과 이미지의 직관성을 고려하여 디자인해야 한다.
- 카드는 일관된 스타일과 레이아웃을 유지해야 한다. 각 카드의 크기, 배치, 요소 간의 간격 등은 일관성 있게 조정되어야 한다.
- 카드는 클릭 가능한 요소를 포함할 수 있으며, 버튼이나 링크를 통해 추가 작업을 수행할 수 있도록 해야 한다.
참조
- 머티리얼 디자인 : https://m3.material.io/components/cards/overview
- Bootstrap Cards : https://getbootstrap.com/docs/5.0/components/card/