목차
- 순서 없는 목록 태그 <ul> </ul>
- 순서 있는 목록 태그 <ol> </ol>
2-1. 기본 순서 표기
2-2. 영문 소문자로 표기
2-3. 영문 대문자로 표기
2-4. 로마 숫자 소문자로 표기
2-5. 로마 숫자 대문자로 표기
2-6. 시작 값 변경
2-7. 역순으로 항목 표시 - 정의 목록 태그 <dl> </dl>
✅ 리스트 요소 등록에는 <li> </li> 태그를 사용한다.
1. 순서 없는 목록 태그 <ul> </ul>
<body>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</body>
- 순서가 필요하지 않은 목록을 만들 때 사용한다.
- 리스트 앞에 특정 모양이 출력된다. 디폴트는 위 예시와 같은 검은색 불릿(⦁)이며, CSS 이용해 수정할 수 있다.
2. 순서 있는 목록 태그 <ol> </ol>
- 순서가 있는 목록을 만들 때 사용한다.
- 속성으로서 순서 형식을 정하는 type, 시작 순서를 명시하는 start, 역순으로 표시하는 reversed를 쓸 수 있다.
2-1. 기본 순서 표기
<body>
<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
</body>
- 기본값은 숫자로 설정돼 있으며 1부터 부여된다.
2-2. 영문 소문자로 표기
<body>
<ol type="a">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
</body>
- <ol> 시작태그에 type="a"를 명시한다.
2-3. 영문 대문자로 표기
<body>
<ol type="A">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
</body>
- <ol> 시작태그에 type="A"임을 작성한다.
2-4. 로마 숫자 소문자로 표기
<body>
<ol type="i">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
</body>
- <ol> 시작태그에 type="i"라고 쓴다.
2-5. 로마 숫자 대문자로 표기
<body>
<ol type="I">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
</body>
- <ol> 시작태그에 type="I"를 쓰면 로마 숫자 대문자로 표기된다.
2-6. 시작 값 변경
<body>
<ol type="1" start="5">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
</body>
- start 속성을 통해 시작값 정의가 가능하다.
- <ol> 시작태그에 type="1" start="5"임을 명시한다.
2-7. 역순으로 항목 표시
<body>
<ol reversed="reversed">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
</body>
- reversed 속성 통해 역순으로 표시할 수 있다.
- <ol> 시작태그에 reversed="reversed"를 명시한다.
3. 정의 목록 태그 <dl> </dl>
<body>
<dl>
<dt>이곳은 목록의 제목을 적는 곳입니다.</dt>
<dd>이곳은 목록에 대한 설명을 적는 곳입니다.</dd>
<dd>여러 줄 작성할 수도 있습니다.</dd>
<dt>또 다른 목록의 제목을 적어 새로운 목록을 만들 수도 있습니다.</dt>
<dd>새로운 목록도 설명을 작성할 수 있으며</dd>
<dd>역시 여러 줄을 작성할 수도 있습니다.</dd>
<dd>목록별로 설명에 필요한 행을 다르게 할 수도 있습니다. 여기는 세 줄.</dd>
</dl>
</body>
- 정의 목록 <dl>은 용어나 문장에 대한 정의(definition) 리스트이다.
- 목록의 제목을 담는 <dt> </dt> 태그와 정의 내용, 즉 목록에 대한 설명을 나타내는 <dd> </dd> 태그로 구성된다. 목록에 대한 설명 개수는 목록별로 상이할 수 있다.
- 자동으로 들여쓰기돼 출력된다.
'Frontend > HTML' 카테고리의 다른 글
| [HTML5] 멀티미디어 태그 | img | audio | video (0) | 2022.02.09 |
|---|---|
| [HTML5] 영역 분할 태그 | div | span | iframe | 시맨틱 (0) | 2022.02.09 |
| [HTML5] 테이블 태그 | table | rowspan | colspan | thead (0) | 2022.02.08 |
| [HTML5] 글자 태그 | br | p | cite (0) | 2022.02.08 |
| [HTML5] 웹 | 웹 표준 | HTML 개요 (0) | 2022.02.08 |
