웹 개발/HTML
[HTML] 목록 태그 (ol, ul, dl, li)
코딩하는흑구
2019. 3. 27. 00:17
List, 목록 태그
1. <ol>태그
- 순서가 있는 목록
- Ordered List
2. <ul>태그
- 순서가 없는 목록
- Unordered List
3. <dl>태그
- 정의 목록(용어 목록)
- Definition List
4. <li>태그
- 목록의 항목
- List Item
<ol> </ol> 태그
예제 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <h1>오늘의 할일</h1> <ol type="i"> <!-- 여기 안에는 li밖에 못온다. --> <li><b>마트</b>에서 장보기</li> <li>HTML 정리하기 <ol> <li>태그정리하기</li> <li>속성정리하기</li> </ol> </li> <li>강아지 밥주기</li> <li>이클립스 설치하기</li> </ol> | cs |
결과 출력
<ul> </ul> 태그
예제 코드
1 2 3 4 5 6 7 8 9 | <h1>내 일의 할일</h1> <!-- bullet : 불릿 --> <ul type="square"> <li>팀회식</li> <li>사우나가기</li> <li>오라클 설치하기</li> <li>고양이 밥주기</li> </ul> | cs |
결과 출력
<dl> </dl> 태그
예제 코드
1 2 3 4 5 6 7 8 9 10 11 | <h1>자바 용어</h1> <dl> <dt>클래스</dt><!-- definition term. 용어 --> <dd>클래스는 이러이러하고 저러저러하다.클래스는 이러이러하고 저러저러하다.</dd><!-- definition description. 용어 설명 --> <dt>오라클</dt> <dd>클래스는 이러이러하고 저러저러하다.클래스는 이러이러하고 저러저러하다.</dd><!-- definition description. 용어 설명 --> <dt>HTML</dt> <dd>클래스는 이러이러하고 저러저러하다.클래스는 이러이러하고 저러저러하다.</dd><!-- definition description. 용어 설명 --> </dl> | cs |
결과 출력