[HTML] 블록구조와 인라인 구조

블록(block) 구조 / 인라인 구조(inline)

블록 구조와 인라인 구조는 요소의 종류라고 볼 수 있습니다. 블록 구조는 박스, 인라인 구조는 텍스트 형식이라고 쉽게 생각하시면 됩니다.😆
또한 태그의 종류에 따라 기본적으로 블록과 인라인 구조가 설정되어 있으며 css 속성인 display를 통해 임의적으로 바꿔줄 수도 있습니다.
그럼 아래에서 더 자세히 알아보겠습니다!

! 자투리 지식 !
요소 = <p> 이것은 요소 입니다. </p>
즉 <시작 태그></닫는 태그>로 한 쌍이 되었을 때 요소라 볼 수 있습니다.

---

#1. 블록(block) 구조 🧱

블록 구조란 일반적으로 줄바꿈이 일어나는 형태로 요소가 가로로 정렬되지 않습니다. 즉 전체 가로가 1000px, 블록 구조인 요소의 가로가 400px이라고 가정했을 때 가로 여백이 600px남았어도 줄바꿈은 일어납니다! 또한 블록 구조는 영역을 표시하기 때문에 패딩과 마진 값을 줄 수 있으며, 텍스트, 인라인 요소, 블럭 요소(예외도 존재!)도 모두 포함이 가능합니다. 때문에 블럭 구조는 하나의 박스와 같은 형태라고 볼 수 있습니다.

블록 구조의 대표적 태그들

div, p, h1~h6, ul, li, ol, table

! 예시 !

---

#2. 인라인(inline) 구조 📝

인라인 구조란 블록 구조와는 달리 줄바꿈이 일어나지 않으며 요소가 가로로 정렬되는 형태입니다. 즉 텍스트처럼 옆으로 나열되는 형태라 볼 수 있습니다. 만약 본문이 1000px인데 인라인 요소의 총합이 1200px이라고 하면 자동으로 줄바꿈을 선언합니다. 인라인 구조는 패딩과 마진값을 설정할 수 없으며 css에서 속성 display(inline block)를 따로 선언해주어야 설정이 가능해집니다. 또한 인라인 구조는 텍스트와 인라인 요소만 포함 가능하며 블록 구조를 포함할 수 없습니다.

인라인 구조의 대표적 태그들

span, a, em, i, strong

! 예시 !