🏷️ 비슷해 보이는 <p> <div> <span> 태그 차이점

<div> <span> <p> 태그

​

​<div>

 : div 태그는 body 문서 안에서 각 영역의 세션을 구분 정의 한다.

 : 구역을 나누는 태그. 가로줄 전체를 다 차지. 너비가 100%

 

Layout 구조 틀을 만들고 CSS를 통해 위치 및 layer을 구분등 HTML요소의 컨테이너 역활을 한다.

또한 javascript를 통해 특정 작업을 수행하고 여러 유형의 동적인 효과를 줄수도 있다.

<div id="nav"> <!--div가 엄청 많이 쓰이니까 뭐하는 놈인지 구분해주기 위해 id를 쓴다!-->
  <h3>제목</h3>
  <p>단락 설명...</p>
</div>

 

---

<span>

 : 일반적으로 텍스트에 색칠, 크기, 좌우간격을 조절하는데 사용된다.

 : css속성 inline 이 자동으로 적용되어있다.

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

---

​<p>

 : 문단(paragraph) 텍스트 절을 기재할때 사용된다.

 : div랑 거의 같다고 보면 된다. div는 세션 나누기가 목적이고, p는 글자 표현이 목적이다.

---

<div> 와 <span> 의 차이 비교

• <div> : block level element (줄 바꿈 O)
• <span> : inline level element (줄 바꿈 X)

display 속성을 사용해서 <div> 를 inline 으로 바꾼다던지 <span> 을 block 으로 바꾸는 것도 가능은 하다.

---

줄바꿈 display 요소

Display 요소는 두개의 특징을 가진다

• Block-level Element : 왼쪽에서 오른쪽으로 하나의 가로 영역(Block) 전체를 차지하는 태그들
• Inline-level Element : 자기의 고유 영역이 없이 그저 자신이 둘러싸고 있는 내용들의 양에 따라 길이가 결정되어 지는 태그들

 

Block-level 요소

Block 레벨은 아래 그림과 같이 한 부분을 통째로 블럭처럼 사용하는 것이다.

새로운 Block 요소는 새로운 라인에서 Block을 시작한다.

그래서 두 Block간에는 겹치는 일이 없다.

 

Block-level 요소 종류는 아래와 같다.

• <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

 

Inline-level 요소

Inline-level 요소는 문단 중간에 들어간다고 생각하면 된다.

새로운 라인에서 시작하지 않는다. 또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.

 

inline 특징을 가지는 태그나 속성값은 아래와 같이 많다.

• <a> <abbr> <acronym> <b> <dbo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kdb> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

---

block vs inline 화면 표현 차이

Hello World에 빨간색 네모박스는 span을 사용한 것이다. 단락을 차지하지않아 중간에 들어가 저렇게 일부분을 꾸밀수가 있다.

 

<div> vs <span> vs <p>

따라서 문자 정보를 줄바꿈을 하면서 작성해야 할 경우 <div>, <p> 태그를 사용해야 한다.

반면 줄바꿈 없이 사용 영역만 작성하고 다른 블록 요소 등에 포함되어야 할 경우 <span> 태그와 같은 인라인 요소를 사용하면 된다.

 

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

인라인 요소인 <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> vs <p>

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

 

그럼 같은 블록 요소인 <div>, <p> 태그의 차이점은 무엇일까?

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

<p> 태그는 문자 정보를 입력하는 단락을 구성한다. 아래와 같이 <p> 태그 하위에는 다른 블록 요소가 포함되어서는 안된다.

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

<p> 태그 하위에는 <span>, <a>, <strong> 등과 같은 인라인 요소만 올 수 있다.

​

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

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

​

​

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

 

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

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

 

예를 들어 웹페이지에서 어떤 영역이 헤더 영역이고, 네비게이션 메뉴 영역, 본문 기사 영역 등의 영역 구분을 할 때 <div> 태그를 여러겹 겹쳐서 사용한다.

<div id="title">
    <div id = navigator>
    </div>
    <div id = content>
        <p>본문</p>
    </div>
</div>

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

<div> 태그의 목적은 영역 구분이므로 하위에 <p> 태그와 같은 다른 블록 요소를 포함할 수 있다.

정리하면, 텍스트 정보는 <p> 태그 안에 작성한다.

그 밖의 다른 영역을 나누는 용도는 <div> 태그를 중복으로 겹쳐서 사용한다.

---

# 참고자료

https://miaow-miaow.tistory.com/94

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/