블록 태그와 인라인 태그

 

블록 태그

• 자기가 속한 모든 영역의 자리를 차지
• 예: p 태그, h 태그

 

인라인 태그

• 자기가 필요로 하는 영역의 자리만 차지

    예)

• strong 태그 - 인라인 태그, 감싸고 있는 콘텐츠를 굵게 표시
• em 태그 - 인라인 태그, 감싸고 있는 콘텐츠를 이탤릭체로 표시
• makr 태그 - 감싸고 있는 컨텐츠에 형광펜 표시를 더해줌

 

코드 예시

<p> p 태그는 블록의 특성을 가집니다.</p>
<h1> h 태그 또한 블록의 특성을 가집니다.</h1>
<strong> strong 태그는 인라인 특성을 가집니다.</strong>
<em> em 태그 또한 인라인 특성을 가집니다.</em>
<mark> mark 태그 또한 인라인 특성을 가집니다.</mark>

 

코드 설명

p 태그와 h1 태그는 블록의 특성을 가집니다. 

따라서 콘텐츠가 속한 모든 영역을 차지합니다. 

따라서 p 태그와 h1 태그는 가각 한 줄 씩 영역을 차지한는 것으 확인할 수 있습니다. 

 

반면 strong, em, mark 태그는 인라인 태그로써 콘텐츠 내용까지만 영역을 차지압니다. 

따라서 strong, em, mark 태그의 콘텐츠는 각각 한 줄 씩 표현이 되지 않고

연결되어서 표현 되는 것을 확인할 수 있습니다. 

 

코드 결과