인라인 구조와 블록구조

블록 레벨 요소(Block-level Elements)

 

이미지 출처

 

다음은 HTML 블록 레벨 요소의 전체 목록입니다.

(사실 HTML5의 새로운 요소를 설명할 때, "블록 레벨"이라는 용어는 정의되지 않습니다.)

 

1. 블록 레벨 요소는 마크업을 할때 줄이 바뀌는 특성을 가지고 있습니다.

2. 블록 레벨 요소는 줄 바꿈이 일어납니다.

3. 블록 레벨 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다.

4. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함 할 수 있는 요소와 포함할 수 없는 요소가 있습니다.

 

블록 요소 모음 : ol, ul, li, h1~h6, p, div

 

<h1>블록 요소는 h1~h6</h1>
<p>블록요소의 p태그</p>
<div>
  <p>블록요소를 자식 요소로 블럭 요소를 포함</p>
</div>
<ul>
  <li>ul과 li는 블럭 요소</li>
</ul>
<ol>
  <li>ol과 li는 블록 요소</li>
</ol>

 

 

 

인라인 요소(Inline Element)

이미지 출처

 

인라인 요소는 마크업을 할 때 가로로 정렬이 됩니다. 인라인 요소는 텍스트라고 생각하면 됩니다.

 

1. 인라인 요소는 블록 레벨 요소와 달리 줄 바꿈 특성이 없습니다. 즉, 블록 레벨 요소처럼 행위 바뀌지 않고 한 줄로 출력 됩니다.

2. 인라인 요소는 줄 바꿈이 일어나지 않습니다.

3. 인라인 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다.

4. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니다.

 

인라인 요소 모음 : a, strong, span, img

 

<a>a태그는 inline 요소</a>
<strong>storng태그는 inline 요소</strong>
<span>span태그는 inline 요소</span>
<img src="" alt="inline 요소" />

 

 

블록 레벨 요소와 인라인 요소의 특성

마크업을 할 때 블록 레벨 요소와 인라인 요소의 특성을 잘 알고 있어야만 문법적 오류를 방지할 수 있습니다.

 

예를 들어 인라인 요소에는 일반적으로 블록 레벨 요소가 자식으로 올 수 없는 문법적 특징이 있습니다.

<span><h1>블록 레벨 요소</h1></span>

span은 인라인 요소이고. h1은 블록 레벨 요소입니다. 즉, 인라인 요소의 자식 요소로 블록 레벨 요소를 마크업을 하면 문법적 에러가 발생하게 됩니다.

 

유효성 검사 : https://validator.w3.org/nu/#textarea

1. Error: Element h1 not allowed as child of element span in this context. (Suppressing further errors from this subtree.)<span><h1>asdasdContent model for element span:Phrasing content.
2. From line 1, column 7; to line 1, column 10

위에 있는 에러 코드는 w3에서 검사한 결과로 인라인 요소의 자식에 블록 요소를 넣은 결과 문법적 에러가 발생한 내용입니다.