HTML의 모든 요소는 형태적인 면에서 사각형 모양의 박스이다. 이런 박스를 배치하여 웹페이지 레이아웃을 만든다. 이것을 박스 모델(box model)이라고 하며, 박스형태로 웹페이지를 구성한다.
- 인라인요소
말 그대로 하나의 줄 안에 포함되는 요소.
줄 바꿈이 되지 않고 요소의 내용(content)만큼만 공간을 차지한다.
일반적으로 인라인 요소는 너비와 높이를 정할 수 없다.
코드에서<strong>~</strong>요소를 줄 바꿈을 해도 브라우저에서는 주변 텍스트에 이어져 보인다.
인라인 요소에는<a> · <br> · <img> · <table> · <i>, <strong>등이 있다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements 참조
- 블록요소
가능한 최대의 너비를 차지하는 요소.
가장 큰 특징은 블록레벨 요소는 무조건 줄 바꿈이 되어 새 줄에서 시작한다.
사용자가 너비와 높이를 정할 수도 있다.
코드에서<h1>~</h1>요소와<p>~</p>요소를 한 줄에 쓰더라도 브라우저에서는 줄 바꿈이 된 것을 확인할 수 있다. 두 요소 모두 브라우저 양끝까지 공간을 차지하기 때문.
블록 요소에는<h1>, <h2>, …, <h6> · <ol>, <ul>, <li> · <p>, <div> · <table>등이 있다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements 참조
