[HTML/CSS] 블록 요소와 인라인 요소

html의 태그들은 여러 가지가 있지만 크게 블록과 인라인 요소로 나눈다.

요소가 블록인지 인라인 요소인지에 따라서 적용되는 속성이 다르기 때문에 구분을 해서 사용해야 합니다.

---

 

블록 요소

블록요소는 브라우저상에서 한 줄을 차지하는 요소들이다.

간단하게 브라우저의 가로 한 줄을 다 가진다고 말할 수 있습니다.

다른 블록 요소나 인라인 요소들을 하위 요소로 가지고 있을 수 있습니다. 

콘텐츠가 한 줄을 차지하므로 블록 요소 다음에는 줄 바꿈이 일어납니다.

 

블록 요소의 대표적인 태그들

<p> <h> <ul> <ol> <div> <blockquote> <form> <hr> <table> 등

 

 

 

인라인 요소

인라인요소는 블록 요소와 달리 브라우저에 표시되는 콘텐츠 영역만을 사용하는 요소입니다.

블록 요소와 달리 나머지 공간이 생기므로 인라인 요소는 한 줄에 여러 가지 요소가 올 수 있습니다.

 

인라인 요소의 대표적인 태그들

<a> <span> <strong> <i> <img> <button> <br> <b> <abbr> <label> <input> <sub> <sup> <object> 등

 

---

블록 요소의 대표적 태그인 <p>와 인라인요소의 대표적 태그인 <b>를 이용해서 브라우저 상에 적용했을 때의 모습입니다. 블록 요소는 한 줄을 차지하고 자동개행이 되며, 다음 줄로 넘어갈 때 공백이 생김을 보여줍니다. 인라인 요소는 개행이 되지않고 한줄에 두 개의 인라인 요소를 모두 표시 하고있음을 보여주고 있습니다.