핵심 HTML | block과 inline

HTML에서 요소는 크게 block 요소와 inline 요소로 나눌 수 있다. 이 두 가지의 주요 차이점은 디스플레이 방식에 있다.

block 요소

block 요소는 기본적으로 새로운 줄에서 시작하며, 전체 너비를 차지한다. 다른 block 요소와 함께 있을 경우, 각 요소는 수직으로 쌓이게 된다.

주요 특징

• 새로운 줄에서 시작: block 요소는 화면에서 다른 요소와 동일한 줄에 놓이지 않고, 항상 새로운 줄에서 시작된다.
• 전체 너비 차지: 기본적으로 부모 요소의 너비를 꽉 채운다. 예를 들어, div, p, h1~h6, section 등이 block 요소이다.
• 높이 및 너비 설정 가능: block 요소는 높이와 너비를 직접 설정할 수 있다.

예시

<div>This is a block element</div>
<p>This is another block element</p>

inline 요소

inline 요소는 새로운 줄을 만들지 않고, 내용의 너비만큼만 차지한다. 즉, 다른 inline 요소와 같은 줄에 위치할 수 있다.

주요 특징

• 새로운 줄을 만들지 않음: inline 요소는 다른 inline 요소와 같은 줄에 나란히 배치된다.
• 내용의 너비만큼 차지: inline 요소는 자신의 콘텐츠의 크기만큼만 공간을 차지하고, 부모 요소의 전체 너비를 사용할 수 없다.
• 높이 및 너비 설정 불가능: inline 요소는 기본적으로 높이나 너비를 설정할 수 없다. 대신, padding, margin 등의 속성은 설정할 수 있다.

예시

<span>This is an inline element</span>
<a href="#">This is another inline element</a>

block과 inline 요소의 혼합

일부 요소는 기본적으로 block 또는 inline이지만, CSS를 통해 이들의 디스플레이 방식을 변경할 수 있다. 예를 들어, inline-block은 inline처럼 같은 줄에 나란히 배치되지만, block처럼 너비와 높이를 설정할 수 있는 요소이다.

예시

<span style="display: inline-block;">This is inline-block</span>

정리

• block 요소는 전체 너비를 차지하고 새로운 줄에서 시작한다.
• inline 요소는 내용만큼만 차지하고, 새로운 줄을 만들지 않는다.
• CSS를 사용하여 block 요소나 inline 요소의 디스플레이 속성을 변경할 수 있다.