[HTML] 인라인 태그와 블럭 태그

📌인라인 태그와 블럭 태그

---

모든 태그는 인라인 태그와 블럭 태그 두 분류 중 하나에 속한다.

예로 들어 문단 태그와 제목 태그는 블럭 태그이며, 링크 태그와 이미지 태그는 인라인 태그이다.

각 태그가 어디에 속해 있는지를 반드시 알고 있어야 한다.

인라인 태그와 블럭 태그에 속하는 것에 따라서 랜더링의 결과가 서로 다르기 때문이다.

 

랜더링 (Rendering)

HTML에서의 랜더링은 태그를 화면에 출력하는 작업을 의미한다.

 

💡인라인 태그

---

인라인 태그(Inline Tag)는 자신의 내용물과 주변 태그의 내용물을 같은 라인에 출력을 한다.
같은 줄에 출력을 한다고 해서 Inline이다.

PCDATA(텍스트)는 인라인 태그에 속하는 성질을 가진다.

 

<a> 태그는 인라인 태그이다.
<br> 태그가 인라인 요소들을 개행하는 역할을 한다.

 

인라인 태그의 특징

문자열
<a href="http://naver.com">링크1</a>
<a href="http://google.com" style="background-color:yellow;">링크2</a>
<a href="http://daum.com">링크3</a>
문자열

인라인 태그는 개행을 하지 않는 이상 계속 한 줄로 출력된다.

 

💡블럭 태그

---

<p> 태그는 블럭 태그이다.

<h1> 제목 태그는 블럭 태그이다.

 

블럭 태그의 특징

<p>문단1</p>
<p style="background-color:yellow;">문단2</p>
<p>문단3</p>

축하합니다!
<h1>라인 독점입니다.</h1>
독점 보너스 x3배

블럭 태그는 앞 뒤 태그들이 가지는 내용과 절대 한 줄에 같이 출력하지 않는다.

내용물의 크기와 상관없이 자신이 속한 라인을 독점한다.

내용물의 크기와 상관없이 태그의 너비는 항상 100%이다. 높이는 내용물의 크기와 동일하다.