HTML5 인라인 요소(Inline Element)와 블록 요소(Block Element)

@notepad_jj2

츄르사려고 코딩하는집사입니다.

---

HTML5 태그에서는 블록 요소(Block Element)와 인라인 요소(Inline Element)로 나눌 수 있습니다. 이 블록 요소(Block Element)와 인라인 요소(Inline Element)는 HTML5에 CSS를 입힐 때, 중요한 요소라고 할 수 있습니다. 블록 요소(Block Element)와 인라인 요소(Inline Element)에 적용되는 CSS는 각 다르기 때문에 어느 정도 이해를 하고 있어야 합니다.

1. 블록 요소(Block Element)
블록 요소(Block Element)는 인라인 요소(Inline Element)를 포함할 수도 있고 안할 수도 있으며, 다른 블록 요소(Block Element)도 포함할 수 있습니다. 블록 요소(Block Element)는 가로 전체의 크기를 가지기 때문에, width, height, margin, padding 등을 사용할 수 있으며, 태그를 사용할 경우 줄바꿈이 있습니다.

 

1) 블록 요소(Block Element) 종류

<article>, <div>, <figure>, <footer>, <H1>, <H2>, <H3>, <H4>, <H5>, H<6>, <header>, <hr> 등

 

2. 인라인 요소(Inline Element)
인라인 요소(Inline Element)는 블록 요소(Block Element)안에 포함되어 있으며, 인라인 요소(Inline Element)안에 다른 인라인 요소(Inline Element)가 들어갈 수 있습니다. 인라인 요소(Inline Element)는 블록 요소(Block Element)와 다르게 태그가 끝나는 지점까지 크기를 가지기 때문에 임의로 width나 height를 줄 수 없습니다. 그래서, line-height로 줄의 높이를 조절하고, text-align으로 텍스트의 정렬을 조절할 수 있습니다. 인라인 요소(Inline Element)는 블록 요소(Block Element)와 다르게 인라인 요소(Inline Element)의 태그를 사용할 경우 줄바꿈이 없습니다.

 

1) 인라인 요소(Inline Element) 종류

<a>, <br>, <button>, <span>, <select>, <script>, <label>, <input> 등