block요소랑 inline요소란?

 

✅ block과 inline이란?

Block 요소는 줄 전체를 차지하며 줄바꿈이 발생하는 요소이고, Inline 요소는 줄 안에서 나란히 배치되는 요소입니다.

📌 왜 이런 구분이 생겼는가?

HTML 문서는 구조와 텍스트가 함께 구성되기 때문에, 일부는 문단 전체를 구성하고, 일부는 문장 안에서 동작해야 했습니다. 그래서 줄 단위 요소(block)와 줄 안 요소(inline)로 나뉘게 되었습니다.

📋 block 요소 특징

• 항상 새로운 줄에서 시작
• 한 줄 전체 차지
• width, height 설정 가능
• 다른 block/inline 포함 가능

대표 태그: <div>, <p>, <h1>, <ul>, <table>

📋 inline 요소 특징

• 줄 안에서 배치됨
• 내용만큼 공간 차지
• width, height 설정 거의 불가
• 다른 inline만 포함 가능

대표 태그: <span>, <a>, <img>, <strong>

📊 block vs inline 비교표

항목	block 요소	inline 요소
줄바꿈	생김	없음
크기	전체 가로 폭	내용만큼
대표 태그	<div>, <p>	<span>, <a>
크기 설정	가능	제한적
포함 가능 요소	block + inline	inline만

🧪 예시 코드

<!-- Block 요소 -->
<p>이건 문단입니다.</p>
<div>이건 블록 박스입니다.</div>

<!-- Inline 요소 -->
<span>이건 인라인입니다.</span>
<a href="#">이것도 인라인입니다.</a>

💡 CSS로 display 전환

span {
  display: block;
}

div {
  display: inline;
}

CSS를 사용하면 원래 block이던 요소를 inline으로, 또는 그 반대로도 바꿀 수 있습니다.