# 블록 텍스트

## p
```html
<p>이것은 단락입니다. 여러 문장으로 구성된 텍스트를 나타냅니다.</p>
<p>두 번째 단락입니다.</p>
```
- 설명: 일반적인 텍스트 단락을 표시.


## pre
```html
<pre>
  function hello() {
    console.log("Hello, World!");
  }
</pre>
```
- 설명: 코드처럼 공백과 줄 바꿈이 유지된 텍스트 표시.

## div
```html
<div class="container">
  <h1>제목</h1>
  <p>이 div는 콘텐츠를 묶는 역할을 합니다.</p>
</div>
```
- 설명: 스타일링이나 레이아웃을 위한 컨테이너로 사용.

## blockquote
| **속성** | **설명** |
|----|---|
| `cite` | 인용문의 출처 URL을 지정합니다. (브라우저에 직접 표시되지는 않음) |

```html
<blockquote cite="https://example.com/source">
  <p>인생은 한 번뿐이다. 그러니 즐겨라!</p>
</blockquote>
```
- 설명: 다른 출처에서 가져온 인용문을 표시. `cite`로 출처 URL 지정.

## hr
> 과거 `align`, `size`, `width` 등이 있었으나 HTML5에서 비추천됨. CSS 사용 권장.

```html
<p>첫 번째 섹션의 내용입니다.</p>
<hr>
<p>두 번째 섹션의 내용입니다.</p>
```
- 설명: 섹션 간 구분을 위해 수평선 삽입.

## figure, figcaption
```html
<figure>
  <img src="image.jpg" alt="풍경 사진">
  <figcaption>산과 강이 어우러진 아름다운 풍경</figcaption>
</figure>
```
- 설명: 이미지와 그 캡션을 함께 그룹화하여 표시.

---

## ul

> 과거 `type` 속성(예: `disc`, `circle`)이 있었으나 HTML5에서 비추천. CSS 사용 권장.

> 목록의 모양(글머리 기호, 번호 스타일 등)은 CSS(`list-style-type`)로 조정하는 것이 현대적입니다.

```html
<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>오렌지</li>
</ul>
```
- 설명: 순서 없는 목록으로, 기본적으로 글머리 기호(•)로 표시.


## ol
| **속성** | **설명** |
|----|---|
| `start` | 목록의 시작 번호를 지정합니다. (예: `start="3"`) |
| `reversed`| 목록을 역순으로 표시합니다. (HTML5에서 추가, Boolean 속성) |
| `type` | 번호 스타일을 지정합니다. (예: `1`, `A`, `a`, `I`, `i`) |

```html
<ol start="2" type="A">
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li value="5">다섯 번째 항목</li>
</ol>
```
- 설명: 순서 있는 목록. `start="2"`로 2부터 시작, `type="A"`로 대문자 알파벳 사용, `value="5"`로 특정 항목 번호 지정.

## menu
| **속성** | **설명** |
|----|---|
| `type` | 메뉴 유형을 지정합니다. (예: `context`, `toolbar`, HTML5에서 실험적) |

```html
<menu type="context" id="popup">
  <li>새로고침</li>
  <li>복사</li>
  <li>붙여넣기</li>
</menu>
```
- 설명: 컨텍스트 메뉴를 정의. (브라우저 지원 제한적, 실험적 기능)

> `menu`는 현재 브라우저 지원이 제한적이므로 실무에서 잘 사용되지 않습니다. 대신 `ul`이나 `nav`를 활용하세요.

## li
| **속성** | **설명** |
|----|---|
| `value` | `ol` 내에서 항목의 번호를 수동으로 지정합니다. (예: `value="5"`) |

```html
<ul>
  <li class="fruit">포도</li>
  <li class="fruit">수박</li>
</ul>
```
- 설명: `ul` 내부의 개별 항목을 정의하며, `class`로 스타일링 가능.

## dl, dt, dd
```html
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language의 약자로, 웹 페이지의 구조를 정의합니다.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets의 약자로, 웹 페이지의 스타일을 정의합니다.</dd>
</dl>
```
- 설명: 용어(`dt`)와 그 설명(`dd`)을 쌍으로 구성한 정의 목록.