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으로 구분하여 선택하면 됩니다.
|
목적 |
선택할 태그 |
|---|---|
|
레이아웃이나 구역을 나눌 때 |
div |
|
텍스트 일부를 감싸거나 강조할 때 |
span |
![[MS 365] 아웃룩 사진(OutLook)](https://uknew.co/wp-content/uploads/2021/01/MS-365-아웃룩-사진Outlook-768x508.jpg)
