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

블록 텍스트

p

<p>이것은 단락입니다. 여러 문장으로 구성된 텍스트를 나타냅니다.</p>
<p>두 번째 단락입니다.</p>

• 설명: 일반적인 텍스트 단락을 표시.

pre

<pre>
  function hello() {
    console.log("Hello, World!");
  }
</pre>

• 설명: 코드처럼 공백과 줄 바꿈이 유지된 텍스트 표시.

div

<div class="container">
  <h1>제목</h1>
  <p>이 div는 콘텐츠를 묶는 역할을 합니다.</p>
</div>

• 설명: 스타일링이나 레이아웃을 위한 컨테이너로 사용.

blockquote

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

<blockquote cite="https://example.com/source">
  <p>인생은 한 번뿐이다. 그러니 즐겨라!</p>
</blockquote>

• 설명: 다른 출처에서 가져온 인용문을 표시. cite로 출처 URL 지정.

hr

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

<p>첫 번째 섹션의 내용입니다.</p>
<hr>
<p>두 번째 섹션의 내용입니다.</p>

• 설명: 섹션 간 구분을 위해 수평선 삽입.

figure, figcaption

<figure>
  <img src="image.jpg" alt="풍경 사진">
  <figcaption>산과 강이 어우러진 아름다운 풍경</figcaption>
</figure>

• 설명: 이미지와 그 캡션을 함께 그룹화하여 표시.

---

ul

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

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

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>오렌지</li>
</ul>

• 설명: 순서 없는 목록으로, 기본적으로 글머리 기호(•)로 표시.

ol

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

<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에서 실험적)

<menu type="context" id="popup">
  <li>새로고침</li>
  <li>복사</li>
  <li>붙여넣기</li>
</menu>

• 설명: 컨텍스트 메뉴를 정의. (브라우저 지원 제한적, 실험적 기능)

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

li

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

<ul>
  <li class="fruit">포도</li>
  <li class="fruit">수박</li>
</ul>

• 설명: ul 내부의 개별 항목을 정의하며, class로 스타일링 가능.

dl, dt, dd

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language의 약자로, 웹 페이지의 구조를 정의합니다.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets의 약자로, 웹 페이지의 스타일을 정의합니다.</dd>
</dl>

• 설명: 용어(dt)와 그 설명(dd)을 쌍으로 구성한 정의 목록.