블록 구조(Block) / 인라인(Inline) 구조

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

블록구조 / 인라인 구조에 대해 알아보는 시간을 가지도록 하겠습니다.

---

01. 블록구조(block) / 인라인 구조(inline)의 특성

블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다.
인라인 요소는 블록 레벨 요소와 달리 줄 바꿈 특성이 없습니다. 즉, 행이 바뀌지 않고 한줄로 출력됩니다.
마크업을 할 때 블록 레벨 요소와 인라인 요소의 특성을 잘 알고 있어야 문법적 오류를 방지할 수 있습니다.
특징을 정리해보면 아래와 같습니다.

요소 유형	특징	자주 사용하는 태그
블록 레벨 요소	1. 블록 레벨 요소는 줄 바꿈이 일어납니다. 2. 블록 레벨 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 3. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함 할 수 있는 요소와 포함할 수 없는 요소가 있습니다.	기본설정이 block인 태그입니다 (div, p, h1~h6, ul, li, ol, table, form, section, footer...)
인라인 요소	1. 인라인 요소는 줄 바꿈이 일어나지 않습니다. 2. 인라인 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 3. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니다.	기본설정이 inline인 태그입니다 (span, a, em, i, strong, del, ins, sub, sup, textarea...)

---

02. 코드펜으로 비교