이 글에서는 HTML(HyperText Markup Language) 에서 그룹핑 텍스트(Grouping Text) 가 무엇이고 어떤 것들이 있는지 정리했습니다.

HTML: 그룹핑 텍스트(Grouping Text)

HTML 에서는 텍스트를 "그룹"으로 묶기 위해 <div></div> 와 <span></span> 이라는 태그를 사용합니다. 이 둘 모두 다른 요소들을 감싸서 구조를 만들거나 스타일/스크립트를 적용하기 위한 용도로 사용됩니다.

그룹핑 텍스트: `<div></div>`

<div></div> 는 대표적인 블록 레벨 태그로, 한 줄 전체를 차지하면서 새로운 줄에서 시작하고 안에 여러 개의 태그들을 묶어서 하나의 큰 덩어리로 만들 때 사용합니다.

<div></div> 예시

HTML

<div class="card">
  <h2>제목</h2>
  <p>설명 텍스트입니다.</p>
  <a href="#">자세히 보기</a>
</div>

여러 요소를 하나의 큰 덩어리로 묶어 "하나의 레이아웃 상의 구역"으로 만들 때 사용하며 자체로 의미를 가지지 않습니다. 의미를 드러내야 할 때는 <header>, <main>, <section>, <article> 같은 시맨틱 태그를 우선적으로 고려하고, 애매할 때 <div> 를 사용합니다.

그룹핑 텍스트: `<span></span>`

<span></span> 은 인라인 태그로, 줄바꿈을 만들지 않고 문장 안에서 일부 텍스트만 감싼 후 스타일이나 스크립트를 적용할 때 사용하며 자체로 의미를 가지지 않습니다.

<span></span> 예시

HTML

<p>
  오늘은 <span class="highlight">중요한 발표</span>가 있는 날입니다.
</p>

그룹핑 텍스트: 언제, 어떤걸 ?

화면에서 한 구역을 통째로 묶고 싶을 때 → div
문장 안 일부 글자만 따로 꾸미거나 제어하고 싶을 때 → span

주의할 점

1. 브라우저마다 기본 스타일이 다르다

같은 HTML이라도 Chrome, Safari, Firefox에서 다르게 보일 수 있다. CSS Reset이나 Normalize.css를 사용해서 기본 스타일을 통일해야 한다.