[지식루프의 웹개발공부] 블록(block) 요소와 인라인(inline) 요소의 차이

블록(block) 요소와 인라인(inline) 요소의 차이

---

1. 기본 개념

• 블록 요소(block):
  • 항상 새로운 줄에서 시작합니다.
  • 가로 폭(width)은 기본적으로 **부모 요소의 100%**를 차지합니다.
  • 세로 방향으로 쌓이며, 레이아웃을 구성하는 주요 구조에 사용됩니다.
  • width, height, margin, padding 모두 적용 가능합니다.
  • 예시: <div>, <p>, <h1>~<h6>, <section>, <article> 등.
• 인라인 요소(inline):
  • 현재 줄에서 바로 이어서 배치됩니다.
  • 콘텐츠의 크기만큼만 가로 폭을 차지합니다.
  • width와 height는 적용되지 않으며, margin과 padding은 좌우만 적용됩니다.
  • 예시: <span>, <a>, <strong>, <em>, <label> 등.

---

2. 시각적 차이 예시

html

코드 복사

<div class="block">블록 요소</div> <span class="inline">인라인 요소</span> <span class="inline">인라인 요소 2</span>

css

코드 복사

.block { background-color: lightblue; width: 300px; height: 100px; } .inline { background-color: lightgreen; margin: 10px; }

---

결과:

• 블록 요소는 부모의 가로 폭을 전부 차지하고, 새 줄에서 시작됩니다.
• 인라인 요소는 같은 줄에 나란히 배치되며, 콘텐츠 길이만큼의 크기를 가집니다.

---

3. 주요 차이점 비교표

구분블록 요소 (block)인라인 요소 (inline)

줄 바꿈	항상 새로운 줄에서 시작	현재 줄에서 이어서 배치
가로 폭	부모 요소의 100%	콘텐츠의 너비만큼
세로 폭	콘텐츠 크기 또는 height 값에 따라 변함	콘텐츠 높이만큼
크기 조절 (width, height)	적용 가능	적용 불가
margin/padding 적용 범위	상하좌우 모두 적용	좌우만 적용, 상하는 적용되지 않음
주요 사용 예시	레이아웃 구성 및 구조적인 요소	텍스트, 링크, 강조 표시 등
대표적인 태그	<div>, <p>, <h1>~<h6>, <section>	<span>, <a>, <strong>, <em>, <label>

---

4. 인라인-블록 (inline-block) 요소

• 인라인 요소처럼 같은 줄에 배치되지만, 블록 요소처럼 width, height 조정 가능
• margin과 padding이 상하좌우 모두 적용됨
• 예시:
  css

  코드 복사

  .inline-block { display: inline-block; width: 150px; height: 50px; margin: 10px; }

---

5. 사용 예시 및 용도

• 블록 요소 사용 예시→ 페이지의 주요 레이아웃을 구성할 때 사용됩니다.
• html
  코드 복사
  <div class="container">콘텐츠 영역</div> <p>문단입니다.</p> <section>섹션입니다.</section>
• 인라인 요소 사용 예시→ 텍스트 내에서 특정 부분만 스타일을 적용하거나, 링크를 걸 때 사용됩니다.
• html
  코드 복사
  <p>이 문장 안에 <span>강조된 부분</span>이 있습니다.</p> <a href="#">링크</a>

---

6. 언제 사용해야 할까?

• 블록 요소: 레이아웃을 구성하고, 콘텐츠의 구조를 나누는 경우 사용
• 인라인 요소: 문장이나 텍스트 안에서 작은 부분을 강조하거나 특정 구역에 스타일을 적용할 때 사용

---

7. 요약

• 블록 요소는 구조적인 레이아웃을 만들고,
• 인라인 요소는 텍스트 내의 특정 부분에 스타일이나 링크를 추가할 때 사용됩니다.
• 인라인-블록 요소는 두 가지의 장점을 결합해 유연하게 사용할 수 있습니다.