DIV SPAN P 차이점

*필수 개념*

Block-level Element (블락 레벨 엘리먼트) : 왼쪽에서 오른쪽으로 하나의 가로 영역(Block) 전체를 차지하는 태그들

Inline-level Element (인라인 레벨 엘리먼트) : 자기의 고유 영역이 없이 그저 자신이 둘러싸고 있는 내용들의 양에 따라 길이가 결정되어 지는 태그들

 

 

 

1. Block-level Element (블락 레벨 엘리먼트)

<div> (Division = 분할하다)

 - div 태그는 HTML 문서(웹 브라우저의 화면)를 위에서부터 아래로 분할하고 왼쪽부터 오른쪽 끝까지 가로로 된 하나의 영역(Block)을 만드는 태그입니다.

 - div 태그는 컨텐츠 없을 시 높이:0, 길이:100% 이다.

 

<p> (Paragraph = 절, 단락)

 - p 태그는 HTML 문서 안에서 문장의 단락을 표시하는데 사용하라고 만들어진 태그입니다.  

 - div 태그와는 시각적으로는 비슷하나 문서의 의미론적/구조론적으로 큰 차이를 가지고 있습니다.

 - p 태그는 기본적으로 상/하 마진(Margin)을 가지고 있으며 기본적으로 마진을 가지고 있는 태그들이 더 있다.

 - p 태그는 컨텐츠 없을 시 높이:0, 길이:100%, 기본 마진(Margin)까지 이다.

 

2. Inline-level Element (인라인 레벨 엘리먼트)

<span>

 - span 태그는 자신이 둘러싸고 있는 내용물의 양과 크기에 의존하여 높이와 길이가 결정된다.

 - span 태그는 한줄(One Line)입니다.

 - span 태그는 영역(Block) 단위가 아니라 줄(Line) 단위이다.

 - span 태그는 컨텐츠 없을 시 높이:none, 길이:none 이다.