이번 글에서는 문서의 영역을 구분하는 HTML 태그 중
`<section>`, `<article>`, `<div>`에 대해 알아보려고 합니다!
<section>
태그 설명
섹션은 동일한 내용의 요소들을 하나의 그룹으로 묶어주는 역할을 해요.
일반적으로 섹션의 주제를 지정하기 위해 h태그(`<h1>` ~ `<h2>`)를 사용하는데 필수는 아닙니다.
<h1>A회사 프론트엔드 모집공고</h1>
<section>
<h2>필요한 역량</h2>
<p>React, typescript</p>
<p>코드 품질 향상, 테스트 코드 작성</p>
<p>반응형 웹 개발에 대한 이해</p>
<p>원활한 커뮤니케이션 능력</p>
</section>
<section>
<h2>주요 업무</h2>
<p>PC 웹 / 모바일 웹 서비스 개발</p>
<p>웹 성능 최적화</p>
<p>테스트 코드 작성</p>
</section>위의 예시를 볼까요?
A회사의 프론트엔드 모집공고 페이지입니다.
소제목으로 "필요한 역량"과 "주요 업무"가 있는데요,
`<section>`이 소제목에 해당하는 요소들을 하나로 묶어주고 있습니다.
이처럼 `<section>`은 다른 주제와 섞이지 않게 비슷한 내용을 묶어주는 역할을 합니다.
<article>
태그 설명
페이지 안에서 독립적으로 구분될 수 있는 요소의 묶음을 의미합니다.
동일한 내용의 요소를 묶어주는 것은 `<section>`과 비슷해 보일 수 있지만
`<article>`은 `<section>`보다 더 큰 단위의 묶음을 의미합니다.
위에서 보았던 코드를 조금 더 확장해서 살펴봅시다!
<body>
<header>
<h1>프론트엔드 모집 공고</h1>
</header>
<article>
<h2>A회사 모집공고</h2>
<section>
<h3>필요한 역량</h3>
<p>React, typescript</p>
<p>코드 품질 향상, 테스트 코드 작성</p>
<p>반응형 웹 개발에 대한 이해</p>
<p>원활한 커뮤니케이션 능력</p>
</section>
<section>
<h3>주요 업무</h3>
<p>PC 웹 / 모바일 웹 서비스 개발</p>
<p>웹 성능 최적화</p>
<p>테스트 코드 작성</p>
</section>
</article>
<article>
<h2>B회사 모집공고</h2>
<section>
<h3>필요한 역량</h3>
<p>Vue, typescript</p>
<p>socket을 활용한 실시간 통신 기술 활용 경험</p>
<p>원활한 커뮤니케이션 능력</p>
</section>
<section>
<h3>주요 업무</h3>
<p>채팅 웹 사이트 개발</p>
<p>운영 장애 분석 및 대응</p>
</section>
</article>
</body>이번에는 주제를 조금 더 확장해서
A회사와 B회사 두 개의 모집공고를 확인할 수 있는 페이지입니다.
이전과 마찬가지로 각 회사의 필요한 역량과 주요업무는 `<section>`으로 묶여있어요.
A회사의 모집공고와 B회사의 모집공고는 각각 `<article>`로 묶여있어요.
`<article>`이 조금 더 큰 단위인 것 같긴한데, 그 차이가 모호하다고 느껴지네요. 🤔
<article> 과 <section> 차이
조금 더 구체적으로 차이를 설명하자면
`<article>`과 `<seciton>`의 차이는 "콘텐츠의 독립성"입니다.
`<article>`에 포함된 내용은 그 자체로 한 회사의 모집공고를 모두 담고있는 완성된 내용이지만,
`<section>`에 포함된 내용은 모집공고의 일부의 내용만을 포함하고 있습니다.
즉, `<article>`은 독립적인 콘텐츠이지만, `<section>`은 부속적인 콘텐츠입니다.
<div>
태그 설명
앞서 설명했던 `<section>` `<article>`과는 다르게 공통된 내용을 묶는 역할을 하지 않아요.
다른 적절한 시맨틱 태그가 없을 경우에 `<div>`를 사용해요.
쉽게 말해 깍뚜기 같은 태그입니다!
또한 스타일링이나 개발의 편의성 등을 위해 임의로 영역을 구분하기 위해 `<div>`를 사용해요.
콘탠츠의 구분이 아닌, 단순히 class 또는 id를 넣기 위해서라면
`<section>`과 `<article>`의 사용은 부적절 합니다.
<div> 남용 주의
<!-- 가능은 하지만,, 이렇게 하지 말아요 ❌ -->
<div>
<div>
<div>프론트엔드 모집 공고</div>
</div>
<div>
<div>A회사 모집공고</div>
<div>
<div>필요한 역량</div>
<div>React, tydivescridivt</div>
<div>코드 품질 향상, 테스트 코드 작성</div>
<div>반응형 웹 개발에 대한 이해</div>
<div>원활한 커뮤니케이션 능력</div>
</div>
<div>
<div>주요 업무</div>
<div>divC 웹 / 모바일 웹 서비스 개발</div>
<div>웹 성능 최적화</div>
<div>테스트 코드 작성</div>
</div>
</div>
<div>
<div>B회사 모집공고</div>
<div>
<div>필요한 역량</div>
<div>Vue, tydivescridivt</div>
<div>socket을 활용한 실시간 통신 기술 활용 경험</div>
<div>원활한 커뮤니케이션 능력</div>
</div>
<div>
<div>주요 업무</div>
<div>채팅 웹 사이트 개발</div>
<div>운영 장애 분석 및 대응</div>
</div>
</div>
</div>사실 위의 코드처럼 모든 태그를 `<div>`로 할 수 있습니다.
아마 적지 않은 사이트들이 `<div>`로만 구성되어있을 거예요.
왜냐하면 어떤 태그를 써야할지 고민하지 않아서 개발하기에 쉽고,
기능상에 차이가 없기 때문에 필요성을 느끼기 쉽지 않아서 간과하게 되어요.
하지만 좋은 사이트가 되기 위해서 시맨틱 태그는 필수적인 요건입니다!
※ 참고 글: [시맨틱 태그로 좋은 사이트 만들기]
div, section, article 차이점 정리
| div | section | article | |
| 콘텐츠 구분의 목적을 갖는가? | X | O | O |
| h태그 포함이 권장되는가? | X | O | O |
| 언제 사용되는가? | - 스타일링 구분 - 단순 class, id 할당 |
- 주제의 소그룹 영역 구분 | - 주제의 대그룹 영역 구분 |
[HTML] 시맨틱 태그 (Semantic Tag) : h1 & header
시맨틱 태그에는 아주 많은 종류가 있어요.그 중 이번 글에서는 과 에 대해 알아봅시다! 태그가 속해있는 섹션의 제목을 나타냅니다. 제목1 에 포함되어있는 내용도 과 같은 섹션으로 묶여있
shelly-log.tistory.com
[HTML] 시맨틱 태그(Semantic Tag)로 좋은 사이트 만드는 방법
시맨틱 태그 설명 시맨틱 태그란 의미 있는 태그를 뜻합니다. 평소에 어떻게 마크업을 작성하시나요?만약 아래와 같은 페이지를 구현한다고 할 때, 어떻게 마크업 하실 건가요? div만 사용한
shelly-log.tistory.com
'개발 > HTML' 카테고리의 다른 글
| [HTML] 시맨틱 태그 (Semantic Tag) : h1 & header (0) | 2024.07.04 |
|---|---|
| [HTML] 시맨틱 태그(Semantic Tag)로 좋은 사이트 만드는 방법 (2) | 2024.07.03 |
