📌인라인 태그와 블럭 태그
모든 태그는 인라인 태그와 블럭 태그 두 분류 중 하나에 속한다.
예로 들어 문단 태그와 제목 태그는 블럭 태그이며, 링크 태그와 이미지 태그는 인라인 태그이다.
각 태그가 어디에 속해 있는지를 반드시 알고 있어야 한다.
인라인 태그와 블럭 태그에 속하는 것에 따라서 랜더링의 결과가 서로 다르기 때문이다.
랜더링 (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%이다. 높이는 내용물의 크기와 동일하다.
