2025-03-07T20:29:01

doc/html5/55_블록 텍스트.md

@@ -0,0 +1,134 @@
+# 블록 텍스트
+
+## 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`)을 쌍으로 구성한 정의 목록.
+