HTML 태그: SPAN 태그와 DIV 태그 차이와 용도

웹 페이지를 구성할 때 자주 사용되는 태그가 div 태그와 span 태그 그리고 p 태그입니다.

p(paragraph)는 단락을 나타내는 의미적 요소입니다.

div(division)는 구획 및 구분의 약자로, 문서의 구조를 나누는 데 사용하는 블록 태그입니다.

span은 텍스트 일부를 감싸는 데 사용하는 범용 태그입니다.

✅ SPAN 태그 사용 예시

<p>오늘은 <span style="color: blue;">맑은 날씨</span>입니다.</p>

• 특정 텍스트 일부에 스타일이나 기능을 적용할 때 사용합니다.
• 문장 내에서 의미 있는 부분만 감싸기 위해 사용됩니다.

✅ DIV 태그 사용 예시

<div style="background-color: #f0f0f0; padding: 20px;">
  <h2>공지사항</h2>
  <p>다음 주 월요일은 휴무입니다.</p>
</div>

• 레이아웃이나 구역을 나누기 위해 사용됩니다.
• 여러 요소들을 묶어서 하나의 블록처럼 구성할 때 적합합니다.

✅ CMS 활용 콘텐츠 활용: 워드프레스

워드프레스 및 Ghost와 같은 CMS에서 테그를 사용 시 Ghost는 HTML 카드를 통해 <div>, <span> 태그를 직접 입력해야 사용이 가능합니다.

워드프레스의 경우 HTML 설정보다는 사용하는 플러그인에서 기능을 활용합니다.

🔲 사용하는 플러그인 중에 SPAN, DIV 적용 방법

목차 플러그인의 경우 전체 목차 영역은 태그로 감싸지며, 각 목차 항목은 또는 태그로 구성됩니다.

사용자가 직접 설정을 하는 경우, div는 목차의 레이아웃과 위치, 배경 등 구조적 설정 중심, span은 항목 텍스트의 색상, 크기 등 스타일 중심 설정으로 구분됩니다.

따라서 콘텐츠 목적과 디자인에 따라 div 또는 span 중 어떤 부분을 설정할지 구분하여 적용하는 것이 중요합니다.

플러그인에서 블록 기능 등을 활용할 때 H2~H6 태그와 단락을 사용하지 않을 경우 콘텐츠의 레이아웃을 구분하거나 구역을 나누려는 목적이라면 div를 사용하는 것이 적절하고, 텍스트 일부에 스타일을 적용하거나 강조 표현을 하려는 목적이라면 span을 사용하는 것이 알맞습니다.

즉, 구조적 용도는 div, 텍스트 중심의 용도는 span으로 구분하여 선택하면 됩니다.

ℹ️ 제휴 안내
본 사이트의 콘텐츠에는 제휴 링크가 포함되어 있습니다. 방문자가 이 링크를 통해 상품 또는 서비스를 구매하면 본 사이트는 판매처로부터 수수료를 지급받습니다. 이 과정에서 구매자가 지불하는 금액^{(이벤트 할인 시 금액이 내려갑니다↓)}은 오르지 않습니다. 게시된 가격·할인·재고 정보는 작성 시점 기준이며 실제와 다를 수 있으므로, 구매 전 판매처에서 최종 확인하시기 바랍니다. 상품 선정과 평가는 자체 기준에 따라 작성되며, 수수료 지급 여부가 소개 순서나 평가 내용에 영향을 주지 않습니다.