[HTML] div / span / p 차이

<div>, <span>, <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

---

1. 인라인 여부

<div>, <p> vs <span>

 

인라인 태그 : <span>

블록 요소 : <div>, <p>

 

<div>, <p> 태그는 내용물의 길에 상관없이 한 블록을 차지하고 있는 반면,

<span> 태그는 내용물의 길이에 의해 차지하는 영역이 결정된다.

 

내용을 작성할 때 줄바꿈이 되어야 할 경우 : <div>, <p>

내용을 작성할 때 줄바꿈 되지 않고 다른 블록 안에 포함되어 있으며, 사용하려는 영역만 작성해야 할 경우 : <span>

 

ex)

내 이름은

너구리

: <div>, <p>

내 이름은
<div> 너구리 </div>

or

내 이름은
<p> 너구리 </p>

 

내 이름은 너구리

: <span>

내 이름은 <span> 너구리 </span>

 

2. 포함 가능 여부

2-1) <div>, <p> > <span>

 

<span>은 인라인 요소이기 때문에 블록 요소인 <div>, <p>를 포함할 수 없지만

블록 요소 <div>, <p>는 인라인 요소인 <span>을 태그 안에 포함할 수 있다.

 

 

ex)

(x)

<span>
    <div> hi </div>
    <p> hello </p>
</span>

 

(o)

<div>
    <span> hi </span>
</div>

or

<p>
    <span> hello </span>
</p>

 

2-2) <div> > <p>

<p>는 <div>를 포함할 수 없지만

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

 

<p>는 문자 정보를 입력하는 단락을 구성하기 때문에

<p>의 하위 태그 안에 다른 블록 요소의 태그를 포함하면 안됨

( <p>의 하위 태그 안에는 <span>, <a>, <strong>같은 인라인 요소만 포함 가능 )

 

ex)

(x)

<p>
    <div> hi </div>
</p>

 

 

(o)

<div>
    <p> hello </p>
</div>