블럭 요소는 왜 화면 배치를 위해, 인라인 요소는 왜 텍스트를 꾸미기 위해 사용되는건지에 대해 이해를 구합니다

1. 인라인 요소는 너비와 높이를 조절할 수 없습니다.

반면, 블럭 요소는 너비와 높이 조정이 편리하죠. 따라서 블럭 요소는 레이아웃(화면 배치)에 유리합니다.

2. 블럭 요소와 인라인 요소는 너비와 높이의 기준이 다릅니다.

블럭 요소의 너비는 한 행을 모두 차기하는 반면, 인라인 요소의 가로길이는 컨텐츠의 길이만큼만을 차지합니다. 또 블럭 요소의 높이는 margin과 padding에 의해 결정되지만, 텍스트의 높이는 line-height 속성에 의해 결정됩니다.

이러한 이유로 인라인 요소인 텍스트는 span과 같은 인라인 요소로 감싸 꾸며주는게 일반입니다. 텍스트를 블럭 요소로 꾸미는 경우 기존 레이아웃이 깨지기 때문입니다.

<p>텍스트는 <span style="color: red">인라인 요소</span>로 감싸 꾸며줘야 합니다. 텍스트 자체가 인라인 요소이기 때문입니다.</p>
<p>텍스트를 <div style="color: red">블럭 요소</div>로 꾸미게 되면 기존 레이아웃이 깨지게 됩니다.</p>