HTML에서는 다양한 태그들이 있습니다. 이 중에서 "Block", "Inline", 그리고 "Inline-block"과 관련된 태그들을 알려드리겠습니다.
Block-level Elements (블록 레벨 요소):
이러한 요소들은 항상 새로운 줄에서 시작하며, 부모 요소의 가로 너비를 모두 차지하려고 시도합니다. 주로 컨텐츠의 구획을 나누거나 레이아웃을 조정하는 데 사용됩니다. 일부 예시는 다음과 같습니다:
<div>: 구획을 나누기 위한 일반적인 블록 요소입니다.
<p>: 단락을 나타내는 블록 요소입니다.
<h1>, <h2>, ..., <h6>: 제목을 나타내는 블록 요소입니다.
<ul>,<ol>, <li>: 목록을 나타내는 블록 요소입니다.
<table>, <tr>, <td>: 테이블을 구성하는 블록 요소입니다.
Inline Elements (인라인 요소):
이러한 요소들은 새로운 줄에서 시작하지 않고, 필요한 만큼의 너비만 차지합니다. 주로 텍스트 스팬이나 인라인 이미지 등을 포함할 때 사용됩니다.
<span>: 텍스트나 인라인 스타일을 위한 컨테이너로 사용되는 인라인 요소입니다.
<a>: 하이퍼링크를 생성하는 인라인 요소입니다.
<strong>, <em>: 텍스트를 강조하는 인라인 요소입니다.
<img>: 이미지를 삽입하는 인라인 요소입니다.
Inline-block Elements (인라인-블록 요소):
이러한 요소들은 인라인처럼 줄 바꿈이 없지만, 블록처럼 너비 조절이 가능합니다. 이것은 일부 인라인 요소들의 레이아웃적인 한계를 극복하기 위해 사용됩니다.
<input>: 입력 필드를 나타내는 인라인-블록 요소입니다.
<button>: 클릭 가능한 버튼을 만드는 인라인-블록 요소입니다.
<select>, <option>: 드롭다운 목록을 나타내는 인라인-블록 요소입니다.
이러한 태그들은 HTML 문서의 구조와 레이아웃을 결정하는 데 중요한 역할을 합니다. 각각의 요소 유형은 다른 방식으로 컨텐츠를 처리하고 표현합니다.
