135 lines
3.6 KiB
Markdown
135 lines
3.6 KiB
Markdown
# 블록 텍스트
|
|
|
|
## 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`)을 쌍으로 구성한 정의 목록.
|
|
|