<p>- paragraph tag

문단 텍스트 절을 기재할 때 사용한다.

div 태그랑 거의 비슷하다. div는 세션 나누기가 목적이고, p는 글자 표현이 목적이다.

<div> - division tag

body 문서 안에서 각 영역의 세션을 구분, 정의한다.

가로줄 전체를 다 차지한다. (너비: 100%)

layout 구조 틀을 만들고, CSS를 통해 위치 및 layer을 구분하는 등, HTML 요소의 컨테이너 역할을 한다. 또한, 자바스크립트를 통해 특정 작업을 수행하고, 여러 유형의 동적인 효과도 줄 수 있다.

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

<span> - span tag

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

CSS 속성 inline이 자동으로 정의되어 있다.

줄바꿈 없이 사용 영역만 작성하고, 다른 블록 요소 등에 포함되어야 할 경우 인라인 요소를 사용한다.

span 태그는 div와 p 태그를 포함할 수 없다. (하위 태그 불가)

<div> vs <span>

• div: block level element (줄 바꿈)
• span: inline level element (줄 바꿈 없음)

물론 display 속성을 사용해서 div를 inline으로 바꾸거나, span을 block으로 바꿀 수 있다.