리스트 뷰(List View)와 그리드 뷰(Grid View)는 웹사이트나 앱에서 정보를 표시하는 두 가지 주요 방식입니다.
- 리스트 뷰(List View):
이 뷰는 일반적으로 수직으로 스크롤되며, 아이템들이 세로로 나열됩니다.
각 아이템은 일반적으로 이미지와 텍스트 설명(제목, 부제목 등)을 포함하며, 사용자가 아이템에 대한 자세한 정보를 한 눈에 볼 수 있습니다.
이 뷰는 아이템의 상세 정보가 중요할 때 유용하며, 뉴스 기사, 이메일, 검색 결과 등에서 자주 사용됩니다.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
- 그리드 뷰(Grid View):
이 뷰는 아이템들이 격자 형태로 표시되며, 수평 및 수직으로 스크롤될 수 있습니다.
각 아이템은 일반적으로 이미지 중심이며, 텍스트는 최소화됩니다.
이 뷰는 사용자가 많은 양의 콘텐츠를 빠르게 탐색하고, 시각적으로 중요한 정보(예: 이미지)를 한눈에 파악할 수 있도록 해줍니다.
그리드 뷰는 사진 갤러리, 제품 카탈로그, 포트폴리오 등에서 자주 사용됩니다.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>