[HTML] Tag :: 태그의 성질

Tag의 성질

• 인라인 태그 vs 블럭 태그
• 모든 태그는 위의 두 분류 중 하나에 속한다. (어느 쪽에 속해있는지 반드시 알아야 코딩을 할 수 있다.)
• 랜더링(Rendering, 태그를 화면에 출력하는 작업) 결과가 서로 다르다.

 

인라인 태그(Inline Tag)

• 자신의 내용물과 주변 태그의 내용물을 같은 라인에 출력한다.
• PCDATA(텍스트)는 인라인 태그에 속하는 성질을 가진다.
• 내용물의 크기가 태그의 영역이다.(★★★)

 

블럭 태그(Block Tag)

• 자신의 내용물과 주변 태그의 내용물을 다른 라인에 출력한다.
• 내용물의 크기와 상관없이 자신이 속한 라인을 독점한다.
• 내용물의 크기와 상관없이 태그의 너비는 항상 100%이다. 높이는 내용물의 크기와 동일하다.

 

<!-- a 태그는 인라인 태그이다. (like java의 print)-->
<!-- <br> 태그는 인라인 요소들을 개행하는 역할 -->

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

<!-- <p> 태그는 블럭 태그이다. -->
<p>문단1</p>
<p style="background-color: yellow;">문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2</p>
<p>문단3</p>


문자열
<h1 style="background-color: mistyrose;">제목입니다.</h1>
문자열

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

*글 작성에 참고한 내용: 학원 쌤의 열정적인 수업