인라인 요소와 블록 요소 정리

인라인 요소와 블록 요소 정리

1. 인라인 요소와 블록 요소의 정의

HTML 태그는 크게 두 가지 성격을 가집니다.

바로 블록 요소(Block-level element)와 인라인 요소(Inline element)입니다.

• 블록 요소(Block)
  : 화면에서 하나의 “덩어리”로 취급되는 요소.
• 줄 전체를 차지하며, 항상 새 줄에서 시작합니다.

• 인라인 요소(Inline)
  : 줄 안에서 다른 요소와 나란히 표시되는 요소.
• 줄 전체를 차지하지 않고 글자처럼 이어지는 성격을 가집니다.

---

2. 블록 요소의 특징

1. 줄바꿈이 자동 발생
   블록 요소는 시작하면 무조건 새로운 줄에서 나타납니다.
2. 부모 영역 너비 전체를 차지
   기본적으로 width: 100% 성격을 가지며, 옆에 다른 블록 요소가 올 수 없습니다.
3. 대표적인 블록 요소들
   • <div> : 구역 나눔
   • <p> : 문단
   • <h1> ~ <h6> : 제목
   • <ul>, <ol>, <li> : 목록
   • <header>, <section>, <footer> 등 시맨틱 태그

블록 요소 예시

<div>첫 번째 박스</div>
<div>두 번째 박스</div>
<p>문단입니다.</p>

출력 결과:

첫 번째 박스

두 번째 박스

문단입니다.

👉 줄바꿈이 자동으로 일어납니다.

---

3. 인라인 요소의 특징

1. 줄바꿈이 없음
   인라인 요소는 문장 중간에서 사용해도 새로운 줄을 만들지 않습니다.
2. 자신의 콘텐츠 크기만큼만 차지
   즉, 글자나 이미지의 크기만큼만 공간을 차지합니다.
3. 대표적인 인라인 요소들
   • <a> : 링크
   • <span> : 구간 표시
   • <strong>, <em> : 강조
   • <img> : 이미지
   • <label>, <abbr> 등

인라인 요소 예시

<p>안녕하세요. <span style="color:red;">빨간 글씨</span> 입니다.</p>
<a href="#">링크</a>와 <a href="#">또 다른 링크</a>

출력 결과:

안녕하세요. 빨간 글씨 입니다.

링크와 또 다른 링크

👉 줄바꿈이 없이 한 줄 안에서 이어집니다.

---

4. 블록 요소 vs 인라인 요소 비교

구분	블록 요소(Block)	인라인 요소(Inline)
줄바꿈	항상 줄바꿈 발생	줄바꿈 없음
차지 영역	부모 영역 전체	내용 크기만큼
예시 태그	<div>, <p>, <h1>~<h6>, <ul>, <li>	<a>, <span>, <strong>, <em>, <img>
용도	레이아웃, 큰 구조	텍스트 일부, 특정 구간 스타일링

---

5. 정리

• 블록 요소는 한 줄 전체를 차지하는 큰 덩어리 요소입니다.
• 인라인 요소는 글자처럼 한 줄 안에서 옆으로 나란히 배치되는 요소입니다.
• 웹 페이지를 구성할 때, 블록 요소로 큰 레이아웃을 만들고, 인라인 요소로 세부적인 꾸밈을 적용하는 방식으로 사용합니다.