HTML | 블록 구조 / 인라인 구조

블록 구조 / 인라인 구조

HTML의 모든 요소는 display 속성을 통해 웹 사이트에서 어떤식으로 표현되는지 결정됩니다.
대표적으로 많이 쓰는 블록(block)과 인라인(inline) 구조에 대해 알아봅시다.

---

1. 블록(block) 구조

📌 한 라인에 하나씩 밖에 오지 못하기 때문에 가로로 배치되지 않습니다.

📌 쉽게 말해 하나의 박스(영역)이기 때문에 margin 값과 padding 값을 적용할 수 있습니다.

📌 블록 구조 내에 블록 구조와 인라인 구조 전부 포함이 가능합니다.

div, p, h1 ~ h6, ul, li, ol, table, section, footer, ...

2. 인라인(inline) 구조

📌 쉽게 말해 하나의 텍스트로 글자처럼 옆으로 나열되며 가로로 배치가 됩니다.

📌 margin 값과 padding 값은 적용할 수 없으나 좌우는 적용할 수 있습니다.

📌 마크업 하고 있는 컨텐츠의 크기만큼 공간이 차지되기 때문에 width 와 height 값이 적용되지 않습니다.

📌 인라인 구조 내에 블록 구조는 포함할 수 없습니다.

span, a, em, i, strong, b, sub, textarea, ...

---

+ 인라인 블록(inline-block) 구조

📌 inline 구조처럼 가로로 배치되지만 block 구조의 특징을 가지고 있습니다.

📌 width / height / margin / padding 설정이 가능합니다.

📌 여러 요소를 한 라인에 원하는 간격과 너비만큼 배치할 수 있습니다.

button, input, select, ...