[면접] p, div, span 태그의 차이

 

 

div vs span vs p 태그 차이

 

div vs span vs p 각 태그의 차이점은 div와 p는 블록요소 이고, span은 인라인 요소입니다. 또한 p는 문자 단락 용도이고, div는 레이아웃 나누기 목적으로 사용합니다.

 

div vs span vs p 블록과 인라인 차이

 

<div>, <p> 태그와 <span> 태그 사이의 차이점은 블록 요소와 인라인 요소에 있습니다.

아래화면처럼 블록 요소는  <div>, <p> 처럼 태그의 영역이 브라우저의 양 끝을 모두 차지합니다.

 

인 라인 요소는 그림의 <span> 태그의 영역 처럼 태그 안에 적힌 텍스트 길이만큼 영역을 차지합니다.

 

1. 3개의 태그는 이와같이 블록요소와 인아인으로 구분지어 레이아웃 영역에서 얼만큼의 영역을  차지하는지를 결정합니다.

 

텍스트를 줄바꿈할 필요가 생기면 <div>, <p> 태그를 사용하고 줄바꿈이 필요없고 텍스트 영역만큼 공간을 차지해야할 경우 <span>

태그를 사용합니다.

 

 

 

2. <span>은 <div>, <p>를 포함할 수 없다.

 

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

따라서 <span> 태그로 <div>, <p> 태그를 포함하려고 할 경우 레이아웃이 꺠지게 됩니다.

 

 

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

 

그럼 같은 블록 요소인 <div>, <p> 태그의 차이점은 두 태그 모두 텍스트를 출력할 수 있으며 블록 요소로 자동 줄바꿈으로 영역이 형셩됩니다.

<p> 태그는 텍스트를 입력하는 영역을  구성합니다. <p> 태그 하위에는 다른 블록 요소를  포함할 수 없습니다.

 

 

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

 

<div> 태그는 <p> 태그 처럼 텍스트를 입력할 수 있지만, 실제 용도는 HTML 문서의 영역별 구분목적입니다. 각 영역의 용도를 구분하는 기능이므로 다른 블록 요소가 하위에 포함할 수 없습니다.