HTML 블록 요소 vs 인라인 요소 정리
1. 블록 요소 (Block Element)
- 특징
- 항상 새로운 줄에서 시작합니다.
- 가로 폭을 기본적으로 부모 요소의 전체 너비(100%) 차지합니다.
- 내부에 다른 블록 요소와 인라인 요소 모두 포함할 수 있습니다.
- 레이아웃의 큰 구조를 잡을 때 사용합니다.
- 대표적인 태그
-
<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <section>, <article>, <header>, <footer>, <nav>, <table>
- 예시
-
<p>이것은 단락입니다.</p> <div>이것은 블록 요소입니다.</div>
2. 인라인 요소 (Inline Element)
- 특징
- 새로운 줄로 넘어가지 않고, 한 줄 안에서 이어집니다.
- 필요한 콘텐츠의 크기만큼만 공간을 차지합니다.
- 블록 요소 안에서 텍스트나 작은 단위를 꾸밀 때 사용합니다.
- 블록 요소를 직접 포함할 수는 없습니다. (인라인 요소 안에 블록 요소 배치는 권장되지 않음)
- 대표적인 태그
-
<span>, <a>, <strong>, <em>, <img>, <label>, <abbr>, <cite>, <code>
- 예시
-
<p>문장 안에서 <span>강조</span>할 부분입니다.</p> <a href="#">링크</a>
3. 비교 정리
구분블록 요소인라인 요소
| 줄바꿈 |
항상 줄바꿈 발생 |
줄바꿈 없음 |
| 차지하는 영역 |
부모의 가로폭 전체 |
콘텐츠 크기만큼 |
| 포함 가능 요소 |
블록 + 인라인 |
인라인만 (블록은 불가) |
| 대표 태그 |
<div>, <p>, <h1>~<h6> |
<span>, <a>, <strong>, <img> |
4. CSS와의 관계
- CSS의 display 속성을 활용하면 요소의 성격을 변경할 수 있습니다.
- 또한 inline-block을 사용하면 인라인처럼 한 줄에 배치되지만, 블록처럼 크기(width/height) 조절이 가능합니다.
span {
display: block; /* 인라인 요소를 블록처럼 */
}
div {
display: inline; /* 블록 요소를 인라인처럼 */
}
5. 정리
- 블록 요소: 문서의 구조와 레이아웃을 구성하는 큰 단위
- 인라인 요소: 문장이나 콘텐츠 안에서 작은 단위 꾸밈
- 필요에 따라 CSS의 display 속성으로 성격을 바꿔 활용할 수 있습니다.