HTML div, span, p이란?

div, span, p는 태그의 종류이며, 보통 div태그, span태그, p태그라고 불립니다.

세가지 태그에 대해 알아보겠습니다.

 

1. p태그

p태그는 paragraph의 앞글자를 딴 것으로 글자그대로 문단을 뜻합니다.

p태그 안에 들어가는 문장은 하나의 문단으로 출력이 되며, p태그 밖에서는 약간의 간격을 유지합니다.

<p> 라면 김밥 떡볶이 돈가스 제육덮밥</p>
<p> 카레 삼겹살 차돌박이 곱도리탕</p>

 

출력결과↓

2. div태그

division의 줄임말인 div태그는 직역하면 분할하다 라는 의미가 있습니다.

이는 출력시 div태그가 속해있는 데이터의 줄을 전부 div의 영역입니다.

<div> 라면 김밥 떡볶이 돈가스 제육덮밥</div>
<div> 카레 삼겹살 차돌박이 곱도리탕</div>

출력결과↓

3. span태그

span태그는 inline으로 주어진 데이터만큼만 공간을 가지고있는 태그입니다. 줄넘김처리가 없으며, 별다른 명령없이 span태그를 연달아 입력하면 줄넘김없이 해당 라인의 옆에 바로 출력되는 모습을 볼 수 있습니다.

<span> 라면 김밥 떡볶이 돈가스 제육덮밥</span>
<span> 카레 삼겹살 차돌박이 곱도리탕</span>

출력결과↓

 

 

4. 정리

p태그 : 문단기능, 태그의 가장 마지막줄은 자동으로 줄을 넘깁니다. p태그가 끝난 문장 다음에는 약간의 간격이 있습니다.

div태그 : 한 줄을 전부 차지합니다. 바로 다음에 문장을 쓰면 다음라인에서 출력이 됩니다.

span태그 : 주어진 데이터만큼만 공간을 차지합니다. span태그를 연달아쓰면 한 라인에 이어져서 출력이 됩니다.