리뷰리스트 ul? div??

이번에 프로젝트를  진행하면서, 리뷰리스트를 ul와 div 중 어떤 태그를 선택할지 고민하다가, 화 x라는 사이트와 무 xx라는 

사이트를 참고 하였는데 각각 사용하는 게 달라서 어떤 게 맞는지 알아보았습니다.

 

화x

무xx

우선 각각의 장점? 이 있습니다.

 

1️⃣ ul > li를 사용하는 게 더 좋은 경우

 

HTML 의미론인 시멘틱 마크업을 고려할 때 입니다.

ul은 관련된 항목들의 목록의 의미합니다.

리뷰 리스트는 여러 개의 리뷰 항목으로 구성된 목록이므로, ul > li 가 의미적으로는 더 적절합니다.

화면 낭독기(Screen Reader) 사용자의 경우에는 ul은 리스트로 인식되어서 더 명확하게 정보를 제공합니다.

 

정리하자면, 

1. 웹 접근성(Accessibility) 👉 ul은 “리스트”임을 명확히 전달, 스크린 리더기가 더 잘 인식함.

2. SEO(Search Engine Optimization) 👉 검색 엔진이 리뷰 항목들을 더 구조적으로 이해할 수 있음.

3. 디자인 일관성 유지 👉 CSS에서 li 스타일링을 활용하여 쉽게 조정 가능. 

 

---

2️⃣. div를 사용하는 게 더 좋은 경우

ul을 사용할 필요가 없는 경우이다. 리스트가 아닌 단순한 레이아웃 요소라면 div가 더 적절하고,

리뷰 항목들이 독립적인 UI로 구성되고 리스트가 아닌 레이아웃의 역할을 한다면 div를 사용할 수 있습니다.

 

정리하자면,

1. “리스트”가 아니라 “레이아웃”을 위한 요소일 때.

2. 리뷰 항목이 각각 독립적인 카드(Card) UI로 동작할 때.

3. CSS로 리스트 스타일링이 필요 없는 경우.

 

결론

“리뷰 리스트”처럼 여러 개의 동일한 유형의 콘텐츠를 나열하는 경우, ul > li를 사용하는 것이 더 의미론적으로 적절함.

하지만, “그리드 카드 UI”처럼 배치가 더 중요하면 div를 사용해도 무방합니다.

 

저는 이번 프로젝트에서는 시멘틱 태그를 적절히 활용하는 것을 목표로 하므로,

리뷰 리스트를 ul > li 구조로 구현할 계획이다.