html 블록과 인라인 요소 차이점

HTML에서 블록(block)과 인라인(inline) 요소는 서로 다른 형태와 동작을 가지고 있습니다.

 

블록 요소는 문서의 구조를 정의하고, 하나의 블록 요소는 새로운 줄에서 시작하며, 크기는 부모 요소에 맞추어집니다. 대표적인 블록 요소로는 <div>, <h1>, <p> 등이 있습니다. 블록 요소는 기본적으로 부모 요소의 전체 너비를 차지하기 때문에, 다른 요소와 함께 나란히 놓이지 않고 새로운 줄에서 시작하게 됩니다.

 

인라인 요소는 문서의 내용을 정의하며, 블록 요소와 달리 같은 줄에 나란히 위치할 수 있습니다. 대표적인 인라인 요소로는 <a>, <span>, <img> 등이 있습니다. 인라인 요소는 내용의 크기에 맞추어 너비가 결정됩니다.

 

또한, 블록 요소와 인라인 요소는 CSS를 이용하여 스타일을 지정할 수 있습니다. 블록 요소는 display: block으로 지정하고, 인라인 요소는 display: inline으로 지정합니다. 또한, display: inline-block으로 지정하면, 인라인 요소처럼 같은 줄에 위치하면서 크기와 마진 등을 지정할 수 있습니다.