[HTML] div p span 태그 차이 간단한 설명 예시

HTML에서는 div, p, span 태그를 이용해서 구역을 지정할 수 있습니다.

이 세가지 태그에 대해서 알아보고 간단한 예시로 사용 방법에 대해서 알아보겠습니다.

 

<div>

<div> Division 분할하다라는 의미로 끝과 끝 가로로 된 하나의 영역을 만들어 줍니다. 콘텐츠가 없을 때는 Height : 0, Width : 100% 로 지정됩니다.

 

<p>

<p> Paragraph 단락, 문단 이며 문장의 단락을 표시하는데 사용 합니다. div와 시각적으로는 비슷하게 표현되나 코드 상에서의 의미는 큰 차이를 보입니다. 상하단에 기본적으로 Margin을 가지고 있어서 공간을 더 차지하게 됩니다.

 

<Span>

<span>은 영역 단위가 아닌 줄 단위 입니다. 콘텐츠가 없다면 Height, Width 높이 너비 둘다 "None" 입니다.

 

 

예시

간단한 예시로 어떻게 표시 되는지 알아보겠습니다.

 

 

<div>hello

<p>hello

<span>hello

<div style="border-bottom: 3px dotted #111;">
hello
</div>

<p style="border-bottom: 3px dotted #111;">
hello
</p>

<span style="border-bottom: 3px dotted #111;">
hello
</span>

div와 p는 끝과 끝까지 블록이 설정되어 있고 span의 경우에는 안에 콘텐츠의 길이에 따라서 박스가 설정됩니다. div와 p의 경우에는 보기에는 같아 보일지라도 안에 어떤 콘텐츠가 들어갈지에 따라서 단순 나누는 div나 글이 들어가 p 중에 선택해서 사용해 줘야 합니다.