1. Block 요소
블록 요소는 화면의 가용 너비 전체를 차지하며, 항상 새로운 라인에서 시작하고 이전 요소와 다음 요소를 새로운 라인으로 밀어낸다. 즉, 블록 요소가 들어가면 자동으로 줄 바꿈이 일어난다.
너비와 높이, 마진, 패딩 등의 속성을 변경할 수 있다.
블록 레벨 요소는 다른 블록 레벨 요소나 인라인 요소를 포함할 수 있다.
예시로는 <div>, <p>, <h1> ~ <h6>, <ol>, <ul>, <li>, <header>, <footer>, <section> 등이 있다.
<div>
<h1>블록 요소</h1>
<p>블록 요소는 새로운 라인에서 시작하며, 항상 전체 너비를 차지한다.</p>
</div><div>, <h1>, 그리고 <p> 요소는 모두 블록 레벨 요소.
2. Inline 요소
인라인 요소는 새로운 라인에서 시작하지 않고, 문서 흐름 중에 나타나며 해당 요소의 내용만큼만 공간을 차지한다. 인라인 요소는 줄 바꿈 없이 요소들이 나란히 배치된다.
너비와 높이, 상하 마진 등을 직접 변경할 수 없다. 좌우 마진과 패딩은 변경 가능하다.
인라인 요소는 다른 인라인 요소를 포함할 수 있지만, 블록 레벨 요소를 포함할 수 없다.
예시로는 <span>, <a>, <img>, <button>, <input>, <label>, <em>, <strong> 등이 있다.
<p>이건 <span style="color: red;">인라인 요소</span>이다.</p>위의 코드에서, <span> 요소는 인라인 요소