[HTML(4)] 블록 요소 vs 인라인 요소(재확인(비유) 필요)

우리가 보는 웹 페이지는 실제로는 수많은 블록으로 이루어진 퍼즐과도 같다.

각각의 영역이 네모난 모양으로 브라우저를 차지하고 있다. 

 

어떤 텍스트는 따로 <br> 태그를 붙이지 않아도 줄바꿈이 되는데, 그런 텍스트는 텍스트가 보이는 부분만 영역으로 차지하는 것이 아니라 그 옆까지 한 줄을 차지하는 요소이다.

이와 같이 태그 자기자신 앞뒤에 라인을 구분하고 브라우저에서 하나의 면을 차지하는 요소를 블록요소라고 한다.

 

이와 반면에, 텍스트가 줄바꿈이 없고 텍스트가 보이는 영역에만 영향을 미치는 태그를 인라인 요소라고 한다.

블록요소가 면이라면 인라인 요소는 선을 그린 것이라고 할 수 있다.(올바른 비유인가?)

 

Block Element	Inline Element
<h1> <h2> <h3> <p> <ol><ul> <li> <div>	<a>: 링크를 거는 태그 <span>:범위를 지정하기 위한 태그

두 요소의 특징을 이해했다면 자연스럽게 포함관계도 생각해볼 수 있다.(직관적으로 파악 가능)

면의 성격을 가진 블록 요소는 면의 성격을 가진 블록이나 선의 성격을 가진 인라인 요소를 포함할 수 있다.

그런데 선의 성격을 가진 인라인 요소는 블록 요소를 포함할 수 없다.(당연하다.)

 

*작성 참고 자료

https://techit.education/