코드 리뷰 시간을 가지다가 <div> 태그를 중첩으로 여러개 쓰는 게 좋지 않은 코드라는 말을 들었다.
그래서 언제 <div> 태그를 써야 옳바른지, <div> 태그를 중첩으로 쓰지 않으려면 어떻게 해야하는지 알아봤다.
<div> 태그란 무엇일까?
<div> 태그는 Division의 약자로 body 문서 안에서 각 영역의 세션을 구분, 정의 한다.
=> 구역을 나누는 태그. 가로줄 전체를 다 차지한다. 이 말은 너비(width)가 100%인 것과 같다.
좀 더 쉽게 얘기하자면 <div> 태그는 특정 콘텐츠를 그룹화하거나 레이아웃을 구성할 때 사용되는 기본 블록 요소로, 시맨틱적인 의미는 없다. 즉, 레이아웃(Layout) 구조 틀을 만들고 CSS를 통해 위치 및 레이어(Layer)를 구분하는 등 HTML 요소의 컨테이너 역할을 한다.
<div> 태그의 주요 특징?
1. 의미 없음 (Non-semantic)
- 자체적으로 콘텐츠의 의미를 전달하지 않는다.
- 단순히 요소를 묶는 용도로 사용한다.
2. 블록 레벨 요소
- 화면 전체 너비를 차지하며, 다음 요소는 아래로 배치된다.
3. 다양한 용도
- CSS로 스타일을 적용하거나 JS로 조작할 때 유용하다.
4. 시맨틱 태그의 대체 용도
- 시맨틱 태그를 사용할 수 없는 경우 (Ex. 레이아웃 컨테이너) <div> 태그를 사용한다.
* 가능한한 시맨틱 태그를 우선적으로 사용하고, <div> 태그는 스타일링이나 레이아웃 목적 등 의미가 필요하지 않은 경우에만 사용한다.
<div> 태그와 시맨틱 태그 비교 코드
1. 페이지 레이아웃
<div> 태그 사용할 경우
<div class = "header">
<div class = "logo">My Logo</div>
<div class = "nav">Navigation</div>
</div>
<div class = "content">
<div class = "main">Main Content</div>
<div class = "aside">Sidebar</div>
</div>
<div class = "footer">Footer Content</div>
시맨틱 태그를 사용할 경우
<header>
<div class = "logo">My Logo</div>
<nav>Navigation</nav>
</header>
<main>
<section class = "main">Main Content</section>
<aside class = "aside">Sidebar</aside>
</main>
<footer>Footer Content</footer>
2. 프로필 정보
<div> 태그 사용할 경우
<div class = "propile">
<div class = "name">My name is John Doe</div>
<div class = "bio">Web Developer vased in NYC.</div>
</div>
시맨틱 태그를 사용할 경우
<section class = "propile">
<h2>John Doe</h2>
<p>Web Developer vased in NYC.</p>
</section>
∴ <div> 태그는 의미 없는 그룹화에 적합하지만, 콘텐츠의 의미나 역할이 명확할 경우 시맨틱 태그를 사용하는 것이 더 좋은 코드를 작성하는 방법 중 하나라고 볼 수 있다. 시맨틱 태그는 코드의 구조를 이해하기 쉽게 만들고 접근성과 SEO를 개선하는 데 큰 도움을 준다.
언제 <div> 태그를 써도 괜찮을까?
시맨틱 태그를 사용하기 어려운 경우에는 <div> 태그를 쓸 수 있다.
- 레이아웃을 위한 컨테이너(Ex. 그리드, 플렉스 박스 등)를 구성할 때
- 특정한 시맨틱 의미를 부여할 필요가 없는 단순한 그룹화가 필요할 때
1. 레이아웃 컨테이너로 사용
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
=> 단순히 레이아웃의 스타일을 조정하기 위한 컨테이너 역할
=>** class = "flex-container" **는 Flexbox 컨테이너로 시맨틱 의미가 필요하지 않으므로 <div> 태그 사용
2. 재사용 가능한 컴포넌트
<div class="card">
<div class="card-header">Card Title</div>
<div class="card-body">This is the card content.</div>
<div class="card-footer">Footer Info</div>
</div>
3. 스타일링 또는 애니메이션 컨테이너
<div class="background">
<div class="content">
<h1>Welcome!</h1>
<p>This is a hero section.</p>
</div>
</div>
=> 시각적인 효과(배경, 애니메이션)를 추가하기 위한 목적으로 <div> 태그 사용 가능
=> ** class="background" **는 배경 이미지를 추가하거나 애니메이션을 적용하는 데 사용
4. 그룹화가 필요할 때
<div class="button-group">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
5. CSS Grid의 컨테이너
<-- css Grid 레이아웃 -->
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
=> <div> 태그는 CSS Grid 레이아웃에서 행(row)과 열(column)을 나누는 데 유용