[HTML] <div>, <span>, <p>태그 총정리

HTML <div>, <span>, <p>태그에 대한 개념과 사용법을 정리해보고자한다.

특히 HTML을 입문할 때 헷갈리는 개념인데 완벽하게 외우지는 않아도 이해는 하고 가야되서 글을 적어보았다.

 

​

---

이 세 태그는 웹 페이지에서 텍스트와 다른 요소들을 구조화하고 스타일링하는 데 널리 사용된다.

<div> 태그

• 정의: <div> 태그는 Division의 약자로, 문서의 구획(division)을 정의한다.
• 특성: 블록 레벨 요소로 기본적으로 새로운 줄에서 시작한다. 다른 블록 레벨 요소나 인라인 요소를 포함할 수 있다.
• 사용 경우: <div>는 웹 페이지의 큰 구조를 만들 때 주로 사용된다. 예를 들어, 헤더(header), 푸터(footer), 사이드바(sidebar) 등의 섹션을 만들 때 이 태그를 사용하고 CSS와 함께 레이아웃을 구성하고 스타일링한다.

---

<span> 태그

• 정의: <span> 태그는 텍스트나 다른 인라인 요소들을 위한 컨테이너이다.
• 특성: 인라인 요소로, 별도의 줄바꿈 없이 문서의 흐름 속에서 사용되고 주로 텍스트의 일부분에 스타일을 적용할 때 사용된다.
• 사용 경우: 텍스트 내에서 특정 부분만 다르게 스타일링하고자 할 때 사용한다. 예를 들어, 문장 중 특정 단어의 색상을 변경하거나 폰트 스타일을 다르게 적용하고자 할 때 <span> 태그를 사용하는 편이다.

---

<p> 태그

• 정의: <p> 태그는 Paragraph의 약자로, 하나의 문단을 정의한다.
• 특성: 블록 레벨 요소로, 자동으로 앞뒤에 여백(margin)이 생기며 새로운 줄에서 시작한다.
• 사용 경우: 텍스트를 문단으로 구분할 때, 글이나 기사, 블로그 포스트 내에서 문단을 나누고자 할 때 주로 사용된다.

요약

• <div>: 큰 구조를 만들거나 레이아웃을 구성할 때 사용되는 블록 레벨 요소
• <span>: 문서의 흐름을 방해하지 않으면서 텍스트의 일부분에 스타일을 적용하기 위한 인라인 요소
• <p>: 문단을 정의하는 데 사용되며, 앞뒤에 자동 여백이 생기는 블록 레벨 요소

 

<div>, <p>

​

<div>, <p>태그는 둘다 'block요소(block level element)'

<div>, <p>태그는 줄바꿈 현상이 가능

​

<div>는 컨텐츠를 나누는 용도로 사용된다면 <p>태그는 글자표현을 주된 목적으로 사용하며

<div>, <p>태그 속성에 따로 지정해서 인라인(inline)요소로 만드는 것 또한 가능하다!

​

<span>

​

<span>태그는 '인라인요소(inline)' 

그렇기 때문에 줄바꿈이 불가능

다만 <span>태그 역시 block속성을 별도로 지정해서 사용 가능하다