인라인, 블록 레벨 태그</> 정리

가끔 html 목업을 하다가 쓰고있는 박스 모델이 인라인 레벨 요소인지 블록 레벨 요소인지 헷갈릴 때가 있다.

그때 볼 수 있도록 정리해두자ㅏㅏ

블록 레벨 태그 : 혼자 한 줄을 차지하는 요소.

너비나 마진, 패딩을 이용해 크기나 위치를 지정하려면 블록레벨 요소여야한다.

<p>
<h1>~<h6>
<ul>
<ol>
<div>
<blockquote>
<from>
<hr>
<table>
<fieldset>
<address>

인라인 레벨 태그 : 줄을 차지하지 않는 요소.

화면에 표시되는 콘텐츠만큼만 영역을 차지하고, 나머지 공간에는 다른 요소가 올 수 있다.

따라서, 한 줄에 여러 인라인 레벨 요소를 배치할 수 있다.

<img>
<object>
<br>
<sub>
<sup>
<span>
<input>
<textarea>
<label>
<button>

 

 

---

css 박스 모델 : 웹 문서의 내용을 박스 형태로 정의하는 방법.