HTML 블럭요소와 인라인요소란?

📘 HTML 블럭요소와 인라인요소란?

📖 블럭요소

무조건 한 라인 전체를 차지하는 HTML 요소를 블럭요소라 한다.

블럭요소인 태그

<h>, <p>, <ul>, <ol>, <li>, <table>
  
<div>

📖 인라인요소

자신의 컨탠츠 크기만큼 자리를 차지하는 요소가 인라인 요소이다.

인라인 요소는 요소를 표시한 후에도 줄바꿈이 일어나지 않는다.

인라인요소인 태그

<a>, <img>, <strong>, <em>, <input>, <i>, <b>, <sub>, <sup>, <ins>, <del>

<span>

📖 인라인요소를 블럭요소처럼 표현할 수 있다.

<span style="display: block">span 태그이지만 블럭요소로 표현됨.</span>

위의 예시는 인라인요소인 span태그를 블럭요소처럼 한줄 전체를 차지하게한 것이다.

블럭요소인 태그들은 기본 display 설정이 블럭요소인 것이고,

인라인요소인 태그들은 기본으로 display 설정이 인라인으로 설정되어 있는것이다.

기본설정이 그렇다 뿐이지 절대불변은 아니다.