HTML-블록과 인라인

HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다.

대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다.

블록(block)

인라인(inline)

블록은 새로운 라인에서 시작하고 모든 줄을 사용하고, 인라인은 내용만큼만 자리를 사용합니다.

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다.

See the Pen Untitled by Dully Dully (@Dully-Dully) on CodePen.

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

<div>요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.

<div>요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용됩니다.

See the Pen block div tag by Dully Dully (@Dully-Dully) on CodePen.

display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다.

또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다.

See the Pen Untitled by Dully Dully (@Dully-Dully) on CodePen.

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

요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소입니다.

요소는 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용됩니다.

IT blog / Thanks to everyone!