Block / In-Line Element 가 뭐죠?

HTML 의 Tag 에는 Block, In-Line element Tag가 있어요.

Block Tag Element 는 Block, Figure, Floater, List, ListItem, Paragraph, Section, Tble, Tablecell
Inline Tag 에는 Bole, Acesskey, lineBreak, HyperLink, Italic, supscript, underline

이 있습니다.

웹표준을 처음으로 접할 때 블록레벨 요소와 인라인 요소라 하는 소리를 종종 들으실텐데요.
지난 2년 동안 웹표준을 접해오면서 가장 기본이면서 가장 중요하지만 간과할 수 있는 블록레벨과 인라인 요소를 설명해볼께요.

블록레벨 요소
웹표준 교과서를 따르면 '한 개의 독립된 덩어리'라는 표현을 사용하고 있어요.
그 의미로 하나의 큰 그룹임을 나타내요. 학교를 예를 들면 학교는 블록레벨 요소이며 학교를 구성하는 한년과 각반은 그 안에 속해 있는 인라인 요소라고 할 수 있어요. 블록레벨 요소는 다른 블록레벨 요소와 인라인 요소를 포함하여 작성 할 수 있는데, 이 때 사용되는 태그는 div, h1~h6, address 등을 들 수 있겠네요.

인라인 레벨요소
웹 표준 교과서를 따르면 '행 안의 일부'라는 표현을 사용하고 있어요.
한줄에 계속 적으로 표현하는 span, img, a tag들이 인라인 태그로 정의되어 있으며, 인라인 요소 안에는 블록레벨 요소가 올 수 없어요.

이와 같은 정의는 마크업에서 매우 중요하며 마크업을 지키지 않을 경우 CSS를 통한 표현의 어려움과 가장 중요한 시멘틱 마크업이 될 수 없어요.

아주 극단적인 예를 한번 볼께요.
아래는 div라는 전체 블록레벨이며 중간에 p라는 블록라벨 요소가 는데, 그 안에 p라는 블록레벨 요소가 있는데 그 안에 <a>라는 인라인 요소가 들어 있어요. 여기에 인라인 요소를 사용함으로서 그전에 있는 내용과 한 줄에 표현 될 수 있어요.

<div>

<h1>둥이의 블로그입니다.</h1>

<p>

오늘은 간단하게 웹표준화 작업에 대해 알아 보겠습니다. <a href="">바로 가기</a>

</p>

</div>