HTML 태그중 <div> , <p> , <span> 요소들을 감각적으로 사용해 왔을 가능성이 높다.
차이점과 특징 그리고 언제 쓰는지를 제대로 알아보자.
<div> 태그는 대부분 컨텐츠를 그룹화 하는데 사용한다. 기본적으로 블록 디스플레이 속성을 가지고 있다. <div> 태그 안에는 다른 블록 레벨 요소나 인라인 요소들을 포함 할 수 있다.
<p> 태그는 문단을 나타내는 블록레벨 요소. 기본적으로 블록 디스플레이 속성을 가지고 있다. 텍스트를 하나의 문단으로 그룹화하며 앞뒤에 여백을가지고 문단 간의 간격을 제공하므로 텍스트를 나타내는데 있어서는 최적화된 요소이다.
다만, <p>태그 안에는 다른 블록 레벨 요소를 가지는 태그를 사용할 수 없다! 대신 인라인 요소인 <span>,<a>,<strong>,<em> 요소들은 가능하다.
<span>태그는 텍스트나 다른 인라인 요소를 그룹화 하는데 사용되는 인라인 디스플레이 속성을 가진다. 컨텐츠 내에서 일부분을 스타일링하거나 텍스트 내에 연속적으로 배치하고 싶을때 사용된다. 당연하게도 <span> 태그 안에는 인라인 요소만 들어 갈 수 있다.
- 블록 디스플레이 속성 : 요소를 블록 방식으로 차지하며 새로운 줄에서 시작하고 전체 폭을 차지한다.
- 인라인 디스플레이 속성 : 요소를 인라인 방식으로 배치하여 같은 줄 내 다른 요소들과 함께 배치된다.
App.js (div , span , p 사용 예시)
div태그로 하나의 컨테이너 컨텐츠 영역을만들고
첫번째 문단에서는 p태그영역이다. 도중에 span영역이 들어갔지만 블록레벨요소가 아니므로 줄바꿈같은 일은 발생하지 않는다. 자연스럽게 들어가 있음을 볼 수 있다.
두번째 문단은 div태그영역이다. 코드에서는 같은줄에서 서술하였지만 div태그는 블록레벨요소이므로 줄바꿈 현상이 일어난다.
다음 그림을 보고 좀 더 쉽게 알 수 있다.
