HTML/목록
HTML에서 그 부분이 목록임을 나타낼 때 ul 요소나 li 요소 등을 사용한다. 목록 요소에 의해서 작성된 부분은 일반적인 브라우저에서 행의 시작에 들여쓰기가 되어지고 각 항목은 강제적으로 각각의 행으로 표시된다. 또, 행의 시작에는 가운데점이나 숫자로 표시되지만 브라우저의 종류나 웹 페이지가 설정한 것에 따라 그 이외의 것으로 표시되기도 한다.
순서가 없는 목록 +/-
순서가 없는 목록은 ul 요소(Unordered List의 줄임말)를 사용한다. 각각의 항목은 ul 요소의 시작과 종료 태그 사이에 li 요소(List Item의 줄임말)을 사용해서 작성한다. 목록의 행의 시작에는 표준으로 가운뎃점이 표시되지만 위키책의 표준 스타일(Monobook)에서는 사각 마크가 표시되게 되어 있다.
예시 +/-
| 입력 | <ul>
<li>밥</li>
<li>된장 찌개</li>
<li>연어구이</li>
</ul>
|
|---|---|
| 출력 |
|
추가 설정 +/-
기호의 종류를 변경 +/-
type 속성을 더하는 것으로 목록 기호의 종류를 변경할 수가 있다. ul에 지정하면 목록 전체 기호를, li에 지정하면 개별 항목의 기호를 변경할 수가 있다. 단, 정식 HTML의 사양으로는 비권장하기 때문에 CSS를 사용하는 것이 바람직하다. 또, 목록 기호 디자인은 브라우저에 따라서 다소 다른 경우가 있다.
- disc
- 가운뎃점
- circle
- 원
- square
- 사각형
순서가 있는 목록 +/-
각 항목의 순서를 표시하는 목록은 ol 요소(Ordered List)를 사용한다. 일반적인 웹 브라우저에서는 1, 2, 3, ... 이나 A, B, C, ... 등으로 된 묘화인 것이 많다. 개별 항목은 ul 요소일 때와 마찬가지로 li 요소를 사용한다.
예시 +/-
| 입력 | <ol>
<li>○○역에서 지하철 타기</li>
<li>××역에서 환승하기</li>
<li>△△역에서 하차</li>
</ol>
|
|---|---|
| 출력 |
|
추가 설정 +/-
번호의 종류를 변경 +/-
type 속성을 변경하는 것에 따라서 번호의 종류를 변경할 수가 있다. 다만, 표준 사양에 따르는 경우에는 ul 요소의 경우와 마찬가지로 CSS를 사용하는 것이 바람직하다.
- 1
- 숫자 (1, 2, 3, ...)
- a
- 알파벳 소문자 (a, b, c, ...)
- A
- 알파벳 대문자 (A, B, C, ...)
- i
- 로마 숫자 소문자 (i, ii, iii, ...)
- I
- 로마 숫자 대문자 (I, II, III, ...)
숫자 번호를 변경 +/-
ol 요소에 value 속성을 지정하면 시작 번호를 변경할 수 있다. 예를들면, value 속성에 5를 지정하면 li 요소에는 위에서부터 5, 6, 7, ...이라는 번호로 시작된다. 또, 개별 li 속성에 start 속성을 바꾸는 것으로 목록 도중에서 시작 번호를 변경할 수 있다. 예를들면, 목록 중의 세 번째에 있는 목록에 9라는 value 속성값을 부여했을 경우에 그 목록은 세 번째 항목부터 9, 10, 11, ...이라는 번호가 된다.
정의 목록 +/-
정의 목록은 dl 요소(Definition List의 줄임말)를 사용한다. dl 요소는 ul 요소나 ol 요소와 다르며, li 요소는 없이 dt 요소와 dd 요소의 두 요소로 구성된다. 일반적인 브라우저에서는 행의 시작에 목록 기호는 표시되지 않지만 dd 요소에 들여쓰기를 취하는 일이 많다. 또한, 위키책의 표준 스타일(Monobook)에는 dt 요소는 굵은글씨로 표시되지만 다른 환경에서도 굵은글씨로 표시된다고는 할 수 없다.
dt 요소는 정의되는 용어(Definition Term)를 나타내며 dd 요소는 용어의 해설(Definition Description)를 나타내지만 반드시 그대로 사용해야 된다는 규정은 없다. dl 요소에는 dt 요소와 dd 요소만 포함할 수가 있으며 dt 요소는 들여쓰기 요소, dd 요소는 블록 레벨 요소를 포함할 수가 있다. 다음의 예시에서는 위키책의 자매프로젝트를 설명하고 있다.
예시 +/-
| 입력 |
<dl>
<dt>메타위키</dt>
<dd>모든 프로젝트의 보조적인 프로젝트입니다.</dd>
<dt>위키백과</dt>
<dd>백과사전을 작성하는 프로젝트입니다.</dd>
<dt>위키낱말사전</dt>
<dd>사전 · 유의어 작성 프로젝트입니다.</dd>
</dl>
|
|---|---|
| 출력 |
|