인라인 구조와 블록구조

01. 블록 레벨 요소(Block-level Element)

블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성이 있어 가로로 정렬되지 않습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다.

 

<블록 레벨 요소 특징> 

1. 블록 레벨 요소는 줄 바꿈이 일어납니다.
2. 블록 레벨 요소는 영역을 표시하기 때문에 패딩과 마진 값을 줄 수 있습니다.
3. 블록 레벨 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다.
4. 블록 레벨 요소 중에는 블록 레벨 요소를 지식 요소를 자식 요소로 포함할 수 있는 요소와 포함할 수 없는 요소가 있습니다. 

<대표적인 블록 태그들>

• div
• header
• section
• aside
• footer

02. 인라인 요소(Inline Element)

인라인 요소는 마크업을 할 때 줄 바꿈이 일어나지 않으며 가로로 정렬이 됩니다. 인라인 요소는 텍스트라고 생각하면 됩니다.

즉, 블록 레벨 요소처럼 행이 바뀌지 않고 한 줄로 출력됩니다.

 

<인라인 요소 특징>

1. 인라인 요소는 줄 바꿈이 일어나지 않습니다.
2. 인라인 요소는 패딩과 마진값을 줄 수 없으며 css에서 속성 display(inline block)를 따로 선언해주어야 설정이 가능합니다.
3. 인라인 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다.
4. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니다.

<대표적인 인라인 태그들>

• span
• a
• i
• br
• img

이미지출처