[HTML 마크업] <div> vs <span> 차이점과 사용 시점

<div>와 <span>은 HTML에서 사용되는 두 가지 중요한 태그입니다. 이들의 주요 차이점과 언제 어떻게 사용해야 하는지에 대해 설명하겠습니다. 

 

<div> 태그: 

<div>는 "division"의 줄임말로, 웹 페이지 내에서 구획을 나누는 역할을 합니다. 

 

<div> 태그는 블록 레벨 요소로, 즉 한 줄 전체의 너비를 차지하며 다음 줄로 넘어가는 특성을 가지고 있습니다. 주로 아래와 같은 상황에서 사용됩니다: 레이아웃 구성: 웹 페이지의 다양한 영역을 나누고 배치하는 데 사용됩니다. 예를 들어, 헤더, 사이드바, 본문, 푸터 등의 섹션을 나눌 때 <div>를 활용할 수 있습니다. 스타일링과 디자인: CSS 스타일링을 적용하고 레이아웃을 조정하기 위해 <div>를 사용합니다. <div>는 CSS 클래스나 ID와 함께 사용되어 스타일을 적용하는 용도로 활용됩다.

<div class="header">Header</div>

<div class="sidebar">Sidebar</div>

<div class="content">Content</div>

<div class="footer">Footer</div>

 

<span> 태그: <span>은 특정 부분을 감싸는 데 사용되는 인라인 레벨 요소입니다.

 

<span>은 줄 바꿈을 일으키지 않고, 그 안의 내용만큼의 공간을 차지합니다. 주로 아래와 같은 상황에서 사용됩니다: 텍스트 스타일링: 특정 텍스트 부분에 스타일을 적용하고 싶을 때 사용합니다. 예를 들어, 특정 단어나 구문에만 색상, 글꼴 크기, 스타일 등을 적용할 수 있습니다. 자바스크립트와 상호작용: JavaScript로 동적으로 특정 부분을 조작해야 할 때, <span>을 사용하여 해당 부분을 식별합니다.

 

<p>이 문장은 <span class="highlight">강조</span>된 텍스트를 포함합니다.</p>

언제 어떻게 사용할까요? <div>는 블록 레벨 요소로 사용되며, 구획을 나누고 레이아웃을 구성하는 데 적합합니다.

 

<span>은 인라인 레벨 요소로 사용되며, 특정 텍스트를 스타일링하거나 자바스크립트로 조작할 때 적합합니다. 두 태그는 다른 역할을 갖고 있으며, 이에 따라 올바른 상황에 맞게 사용해야 합니다.