블럭요소(block element)와 인라인요소(inline element)란?

Jan 4, 2024 • bamjun

블록 요소(Block Element)와 인라인 요소(Inline Element)는 HTML에서 요소들이 문서 상에서 어떻게 배치되고 표시되는지를 정의하는 두 가지 주요한 카테고리입니다.

블록 요소(Block Element):
- 블록 요소는 일반적으로 새 줄에서 시작하며, 그 전후에 줄바꿈이 있습니다.
- 이 요소는 가능한 많은 너비를 차지하려고 하며, 기본적으로 부모 요소의 전체 너비를 차지합니다 (100% 너비).
- 블록 요소는 높이, 너비, 마진 및 패딩을 설정할 수 있으며, 이 속성들은 요소의 레이아웃에 영향을 미칩니다.
- 예시: <div>, <p>, <h1> 등
인라인 요소(Inline Element):
- 인라인 요소는 새 줄에서 시작하지 않습니다. 대신, 문서의 흐름에 따라 텍스트 라인 안에 배치됩니다.
- 인라인 요소는 필요한 만큼의 너비만 차지합니다.
- 이 요소는 일반적으로 텍스트나 이미지와 같은 내용을 감싸는 데 사용되며, 높이와 너비는 이들의 내용에 의해 결정됩니다.
- 마진과 패딩은 상하 방향으로는 다른 요소에 영향을 주지 않습니다.
- 예시: <span>, <a>, <img>

이 두 카테고리의 주된 차이점은 페이지 레이아웃에서 차지하는 공간과 배치 방식에 있습니다. 블록 요소는 보통 구조를 형성하는 데 사용되며, 인라인 요소는 주로 콘텐츠 내에서 특정 부분을 스타일링하거나 강조하는 데 사용됩니다.

블록 요소(Block Element)는 HTML 문서에서 자신만의 공간을 차지하며, 기본적으로 새 줄에서 시작합니다. 주로 페이지의 주요 구조를 형성하는데 사용됩니다. 여기 몇 가지 블록 요소의 예시가 있습니다:

<div>: 가장 기본적인 컨테이너 요소로, 다른 요소를 그룹화하는 데 사용됩니다.
```
<div>
  <p>여기는 div 안의 문단입니다.</p>
</div>
```
<p>: 문단을 나타내는 요소입니다. 텍스트 콘텐츠를 단락으로 구분하는 데 사용됩니다.
```
<p>이것은 문단입니다.</p>
```
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: 제목을 나타내는 요소들입니다. <h1>은 가장 큰 제목을, <h6>은 가장 작은 제목을 나타냅니다.
```
<h1>메인 제목</h1>
<h2>서브 제목</h2>
```
<ul>, <ol>: 각각 순서가 없는 목록과 순서가 있는 목록을 나타냅니다. <li> 태그를 사용하여 목록 항목을 추가합니다.
```
<ul>
  <li>목록 항목 1</li>
  <li>목록 항목 2</li>
</ul>
```

<blockquote>: 인용문을 나타내는 요소입니다.

<blockquote>이것은 인용문입니다.</blockquote>

이러한 요소들은 문서의 레이아웃과 구조를 정의하는 데 중요한 역할을 합니다.

인라인 요소(Inline Element)는 HTML에서 텍스트 흐름 내에 위치하며, 새 줄에서 시작하지 않고 기존의 행 내에서 연속적으로 표시됩니다. 인라인 요소는 주로 텍스트나 이미지와 같은 콘텐츠를 감싸는 데 사용됩니다. 여기 몇 가지 인라인 요소의 예시가 있습니다:

<span>: 텍스트를 그룹화하는 가장 기본적인 인라인 요소로, 별도의 스타일이나 의미를 추가하지 않습니다.
```
<p>이것은 <span>span 요소</span>를 사용한 예제입니다.</p>
```
<a>: 하이퍼링크를 생성하는 요소로, 다른 페이지나 문서, 섹션 등으로 링크를 제공합니다.
```
<p>이것은 <a href="https://example.com">링크</a>를 포함한 문장입니다.</p>
```
<img>: 이미지를 삽입하는 요소입니다. src 속성을 사용하여 이미지의 주소를 지정합니다.
```
<p>이것은 <img src="image.jpg" alt="이미지 설명">를 포함한 문장입니다.</p>
```
<b>와 <strong>: 텍스트를 굵게 표시합니다. <strong>은 중요한 텍스트에 의미를 추가하기도 합니다.
```
<p><b>굵은 텍스트</b>와 <strong>중요한 텍스트</strong></p>
```
<i>와 <em>: 텍스트를 기울임꼴로 표시합니다. <em>은 강조할 텍스트에 의미를 추가하기도 합니다.
```
<p><i>기울임꼴 텍스트</i>와 <em>강조된 텍스트</em></p>
```

이러한 요소들은 일반적으로 문단 내부 또는 다른 텍스트와 함께 사용되며, 레이아웃에 영향을 주지 않고 콘텐츠 내에서 특정 부분을 스타일링하거나 강조하는 데 사용됩니다.

Share on:

메서드 오버라이딩

파이썬 try 구문