HTML 인라인 요소와 블록 요소 /차이점과 변환하기

반응형

인라인 요소와 블록 요소는 HTML에서 중요한 두 가지 요소 유형입니다. 이 두 가지는 웹 페이지에서 콘텐츠를 어떻게 표시할지 결정하는 중요한 특성으로, 그 차이를 이해하는 것은 HTML과 CSS를 사용할 때 매우 중요합니다.

1. 블록 요소 (Block-level elements)

• 정의: 블록 요소는 새로운 줄에서 시작하고, 화면의 전체 너비를 차지하려고 합니다. 즉, 블록 요소는 항상 새로운 라인에서 시작되며, 그 후 다른 블록 요소가 올 때까지 아래로 쭉 확장됩니다.
• 특징:
  • 기본적으로 전체 너비를 차지 (100%).
  • 새로운 줄에서 시작합니다.
  • 다른 블록 요소가 있으면 그 아래에 배치됩니다.
  • 주로 레이아웃을 구성하는 데 사용됩니다.
• 예시:
  • <div>, <p>, <h1>, <ul>, <li>, <header>, <footer>, <section>, <article>, <form> 등.
• 사용 예시:

html

<div>   <p>이것은 블록 요소입니다.</p> </div> <p>또 다른 블록 요소입니다.</p>

• 위 예시에서는 <div>와 <p> 요소가 각각 새로운 줄에서 시작하고, 화면 전체 너비를 차지합니다.

---

2. 인라인 요소 (Inline-level elements)

• 정의: 인라인 요소는 새로운 줄을 시작하지 않으며, 내용이 들어 있는 만큼만 공간을 차지합니다. 즉, 인라인 요소는 수평으로 나란히 배치됩니다.
• 특징:
  • 내용만큼 공간을 차지합니다.
  • 새로운 줄을 시작하지 않음.
  • 다른 인라인 요소가 있을 경우, 같은 줄에 나란히 배치됩니다.
  • 주로 텍스트의 스타일링이나 간단한 요소에 사용됩니다.
• 예시:
  • <span>, <a>, <strong>, <em>, <img>, <code>, <i>, <b> 등.
• 사용 예시:

html

<p>이 텍스트는 <strong>강조</strong>된 부분이 있습니다.</p>

• 위 예시에서 <strong>은 인라인 요소로, 텍스트 내에서 강하게 표시될 뿐, 다른 텍스트와 같은 줄에 배치됩니다.

---

인라인 요소와 블록 요소의 차이점

특징블록 요소 (Block-level elements)인라인 요소 (Inline-level elements)

줄 바꿈	항상 새로운 줄에서 시작하고, 전체 너비를 차지합니다.	줄 바꿈 없이 같은 줄에서 다른 요소와 나란히 표시됩니다.
크기	전체 너비를 차지합니다. (100%)	내용만큼 공간을 차지합니다.
예시	<div>, <p>, <header>, <footer>, <h1>, <ul>, <ol> 등	<span>, <a>, <img>, <strong>, <em>, <i> 등
사용 용도	레이아웃 구성, 큰 블록을 만들기 위한 요소	텍스트 수정, 작은 콘텐츠의 스타일링

---

인라인과 블록을 변환하기

CSS를 사용하면 기본적으로 인라인 요소를 블록 요소로, 또는 그 반대로 변환할 수 있습니다.

인라인 요소를 블록 요소로 변환

css

span {   display: block; }

블록 요소를 인라인 요소로 변환

css

div {   display: inline; }

이렇게 CSS의 display 속성을 사용하여 요소의 기본 특성을 변경할 수 있습니다.

---

결론

• 블록 요소는 주로 레이아웃을 구성하는 데 사용되고, 내용이 전체 화면 너비를 차지하며 새로운 줄을 시작합니다.
• 인라인 요소는 텍스트의 스타일링이나 간단한 콘텐츠에 사용되며, 같은 줄에서 나란히 배치됩니다.

이 두 가지 요소는 웹 페이지의 구조를 정의하고, 그 안에 배치된 콘텐츠가 어떻게 표시될지를 결정하는 중요한 역할을 합니다.

 

 

[HTML관련] html을 배우면 어떤것들을 할수 있을까?

HTML부터 시작해서 웹 구현과 게임 개발까지

 

Visual Studio와 다양한 프로그래밍 언어: 초보자를 위한 안내