[Html] div, p, span 태그 차이

우선 가장 큰 차이점은 div와 p는 "블록"요소이고, span은 "인라인"요소라는 것이다.

여기서 블록요소와 인라인요소에 대해 잠깐 알아보자.

 

html의 요소는 크게 블록요소와 인라인요소로 나뉘어 진다. 

블록요소 

• 레이아웃 작업용도로 주로 쓰임.
• 사용 가능한 최대 가로 너비 사용함.(기본 너비값: 100%) : 각 요소가 수직으로 쌓임.
• 가로 및 세로 너비 지정 가능
• 상하좌우 마진 및 패딩 값 지정 가능

인라인요소

• 텍스트 작업용도로 주로 쓰임.
• 각 요소가 수평으로 쌓임.
• 크기값 가질 수 없음. -> 사이즈 지정 불가
• 상하 마진 적용 불가능
• 좌우 마진 및 상하좌우 패딩 값 지정 가능

인라인-블록요소

• 텍스트 작업용도로 주로 쓰임.
• 각 요소가 수평으로 쌓임.
• 크기값 가질 수 있음
• 상하좌우 마진 및 패딩 값 지정 가능

	블록요소	인라인요소	인라인-블록요소
용도	레이아웃	텍스트작업	레이아웃
데이터배치유형	수직배치	수평배치	수평배치
크기조절	가로, 세로 너비 지정가능	크기조절 불가	가로, 세로 너비 지정가능
마진 및 패딩 값 조절	상하좌우 마진 및 패딩 값 지정 가능	상하마진값 설정 불가	상하좌우 마진 및 패딩 값 지정 가능

그리고 p태그는 문자 단락 용도이고, div는 레이아웃 계층 나누기 용도로 쓰인다는점이다.

또한 div태그는 다른 블록요소가 포함될 수 있는 반면, p태그는 span, a, strong 등 인라인 요소들만 올 수 있고 다른 블록요소를 포함할 수 없다. 예로 p태그 안에 div태그는 포함 할 수 없다.