<div> vs <section>

<div> 와 <section>은 둘 다 HTML의 블록 레벨 요소로, 레이아웃을 구성하는 데 사용됩니다. 하지만 의미론적 차이가 있습니다.

---

1. <div>

• 역할 : 단순한 컨테이너 요소로, 의미 없이 그룹을 묶을 때 사용된다.
• 의미 : 없음(Non-semantic)
• 사용예시
  • 레이아웃을 구성할 때
  • 스타일링이나 JS이벤트를 적용하기 위해 그룹핑할 때
  • 의미론적인 구분이 필요하지 않은 경우

<div className="container">
  <div className="header">헤더</div>
  <div className="content">본문 내용</div>
  <div className="footer">푸터</div>
</div>

 

---

2. <section>

• 역할 : 논리적으로 관련 있는 콘텐츠의 그룹을 의미할 때 사용된다.
• 의미 : 있음(Semantic)
• 사용예시
  • 문서의 큰 섹션을 나눌 때
  • 독립적인 콘텐츠 블록을 구성할 때
  • 검색 엔진 최적화를 고려할 때

<section>
  <h2>회사 소개</h2>
  <p>우리 회사는 최고의 서비스를 제공합니다.</p>
</section>
<section>
  <h2>서비스</h2>
  <p>다양한 IT 솔루션을 제공합니다.</p>
</section>

 

---

3. div vs section 차이 

의미	없음	있음 (논리적으로 관련된 콘텐츠 그룹)
SEO 영향	없음	있음 (검색 엔진이 문서 구조를 더 잘 이해함)
사용 목적	스타일링 또는 스크립트 적용을 위한 그룹핑	문서의 논리적 구조를 나눌 때
추천 사용 사례	UI 레이아웃, 스타일링을 위한 컨테이너	독립적인 콘텐츠 블록

---

4. div와 section을 함께 사용하는 경우

<section>이 의미적으로 그룹을 나누는 역할을 한다면, 내부적으로 스타일링을 위해 <div>를 추가적으로 사용할 수 있음.

<section>
  <h2>제품 소개</h2>
  <div className="product-list">
    <div className="product">상품 A</div>
    <div className="product">상품 B</div>
    <div className="product">상품 C</div>
  </div>
</section>