블록과 인라인

블록과 인라인

HTML의 태그는 크게 블록요소와 인라인요소로 나눌 수 있습니다.

블록요소는 항상 한 줄을 독차지하게 됩니다.  (단, CSS를 통해 스타일을 변경하지 않았다면)

그 자체로 하나의 문단이 되므로 항상 새로운 줄에서 시작되고 강제로 개행합니다.

대표적인 블록요소로는 

1. 문단을 나타내는 <p> 태그

2. 제목을 나타내는 <h1>~<h6> 태그

3. 리스트를 표현하는 <ol> <ul> <li>태그

4. 의미론적 태그인 <div>태그

등이 있습니다.

인라인 요소는 문단의 한 부분을 차지하며 단어처럼 취급됩니다. 따라서 블록요소처럼 강제개행되지 않습니다.

문장사이에 끼어서 글자 형태로 배치되며 글자와 함께 나란히 배치됩니다.

대표적인 인라인 요소로는

1. 인라인요소를 나타내는 <span>태그

2. 문서의 링크를 걸어주는 <a> 태그

등이 있습니다.

블록요소는 다른 블록요소와 인라인요소를 포함합니다. 단, 예외적으로 <p> 태그는 다른 블록요소를 포함할 수 없습니다.

인라인요소는 오로지 인라인 요소만 포함할 수 있습니다.

※ 이렇게 쓸 수 있어요!

<div>

  <p><a href="url">링크</a></p>

  <span>HelloWorld!</span>

</div>

<div>는 블록요소이므로 또다른 블록요소인 <p>태그와 인라인요소인 <span>을 포함할 수 있습니다. 

※ 이렇게는 안되요 ㅠㅠ

<h1><p>HelloWorld!</p></h1> :  블록요소 중 예외적으로 <p>태그는 인라인요소만 포함할 수 있으므로 올바르지 못합니다.

<span>

먹은 리스트들

<ul>

<li>라면</li>

<li>떡볶이</li>

</ul>

</span>

위 경우도 올바르지 못한 예시입니다. <span>은 인라인요소이기 때문에 블록요소가 아닌 인라인요소가 들어와야한다. 따라서 <ul>, <li>와 같은 블록요소가 들어왔으므로 올바르지 못합니다. <span>을 <div>로 고치면 사용가능합니다.