[HTML] Block & Inline

Block 요소의 특징

-블록 레벨의 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다.

-브라우저는 보통 블록 레벨 요소의 앞과 뒤를 개행해서 그립니다. 상자를 쌓는 것 처럼 생각할 수 있습니다.

-블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.

 

▶<p>, <div>, <h>, <ul>, <ol>, <form>요소는 display 속성값이 블록(block)인 대표적인 요소입니다.

 

Inline 요소의 특징

-인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다.

 

▶<span>, <a>, <img>요소는 display 속성값이 인라인(inline)인 대표적인 요소입니다.

 

블럭(block)과 인라인(inline) 속성 태그 표기시 주의할 점

블럭(block)은 인라인(inline)을 포괄하는 더 큰 개념입니다. 따라서 HTML을 마크업 할 때는 Inline 속성의 태그 안에 Block 속성 태그를 넣으면 문법 오류가 됩니다.

나쁜 예제

<span><p>문장입니다.</p></span>

좋은 예제

<p><span>문장입니다.</span></p>

부득이한 경우에는 인라인(inline) 속성의 태그를 CSS에서 span { display: block } 과 같이 정의하여 임의로 block 속성으로 변경할 수 있지만, CSS는 표준 문법 규칙을 지키는 것을 원칙으로 합니다. 여기서는 인라인(inline)이 블럭(block)보다 작은 개념이라는 것을 잊지말도록 합시다.