💁❓<div> vs <span> vs <p>

https://dasima.xyz/div-vs-span-vs-p-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%B8%94%EB%A1%9D-%EC%9A%94%EC%86%8C%EC%99%80-%ED%8F%AC%ED%95%A8-%EC%9C%A0%EB%AC%B4/

div vs span vs p 차이는 블록 요소와 포함 유무 - dAsImA

<div>div 태그</div>
<p>p 태그</p>
<span>span 태그</span>

블록 요소

<div>  <p>

태그의 영역이 브라우저의 양 끝을 모두 차지합니다.

문자 정보를 줄바꿈을 하면서 작성해야 할 경우

인라인 요소

<span>

태그 안에 적힌 문자 정보의 길이만큼만 영역을 차지합니다.

줄바꿈 없이 사용 영역만 작성하고 다른 블록 요소 등에 포함되어야 할 경우

 

인라인 요소인 <span> 태그는 블록 요소인 <div>, <p> 태그를 하위 태그로 포함시킬 수 없습니다.

<span>span 태그
<div>div 태그</div>
<p>p 태그</p>
</span>

코끼리를 냉장고에 넣는 것 처럼

더 작은 영역의 요소인 <span> 태그가 더 큰 영역을 가진 <div>, <p> 태그를 포함하려고 하니 레이아웃이 엉망이 됩니다.

 

반면에 더 영역이 큰 블록 요소인 <div>와 <p> 태그는 인라인 요소인 <span> 태그를 포함할 수 있습니다.

<div>div 태그 <span>span 태그</span></div>
<p>p 태그 <span>span 태그</span></p>

 

그럼 같은 블록 요소인 

<div> <p> 태그의 차이점은 무엇일까요? 

 

<p>는 <div>를 포함할 수 없다.

두 태그 모두 문자 정보를 출력할 수 있으며 블록 요소로 자동 줄바꿈으로 단락이 형성됩니다.

 

<p> 태그는 문자 정보를 입력하는 단락을 구성합니다.

<p>태그 하위에는 다른블록 요소가 포함되어서는 안됩니다.

<p> 태그 하위에는 인라인 요소(<span>, <a>, <strong> 등)만 올 수 있습니다.

<p><div>Hello World!</div><p>와 같은 형태가 있다면

<div><p>Hello World!</p></div>와 같은 형태로 변경해야 합니다.

<div>는 <p>를 포함할 수 있다.

<div> 태그는 <p> 태그 처럼 문자 정보를 입력할 수 있지만, 실제 용도는 HTML 문서의 영역별 구분입니다.

각 영역의 용도를 구분하는 기능이므로 다른 블록 요소가 하위에 포함될 수 있습니다.

<div> 태그의 영역별 구분이 발전되어서 표현된 값이 <article>, <nav> 등의 태그입니다.

 

∴ 텍스트 정보는 <p> 태그 안에 작성하고, 그 밖의 다른 영역을 나누는 용도는 <div> 태그를 중복으로 겹쳐서 사용합니다.