[Html] UL 태그, OL태그, DL태그, LI태그 사용법
- Web/HTML, CSS
- 2018. 6. 20.
이번 포스팅에서는 HTML의 각종 목록 태그에 대해서 알아보도록 하겠습니다. 목록태그를 잘 활용하신다면 웹사이트에서 보기 좋은 목록을 쉽게 만들 수 있습니다. 메뉴를 만들때, 안내표를 만들때 주로 사용합니다.
UL태그, OL태그, DI태그, LI태그 사용법
| 속성 | 태그 | 비고 |
| 목록 태그 | UL | 글머리 기호를 앞에 붙여 목록을 만드는 형식 |
| OL | 번호를 앞에 붙여 목록을 만드는 형식 | |
| DL | 기호 없이 문단으로 목록을 만드는 형식 | |
| LI | UI와 OL내부에서 활용되는 태그 |
1. UL태그는 글머리 기호를 붙여 목록을 만드는 방식으로 순서가 필요없는 목록을 만들때 주로 사용합니다.
2. OL태그는 주로 순서가 필요한 목록을 만들때 사용하며 ol type="속성"을 줘 다양한 형태의 목록을 만들 수 있습니다.
3. DL는 기호없이 문단의 여백으로 목록을 만드는 방식입니다. <DL> 제목은 <DT> 내용은 <DD>태그로 설정합니다.
4. LI태그는 UI와 OL태그의 안에 들어가는 태그입니다. 이 LI태그가 UL와 OL태그의 실질적인 내용 역할을 합니다.
UL태그
UL는 순서가 필요없는 목록을 만들때 사용합니다.
<body>
<UL>
<LI>다음중 동물이 아닌것은?</LI>
<UL>
<LI>사자</LI>
<LI>호랑이</LI>
<LI>코끼리</LI>
<LI>메뚜기</LI>
<LI>원숭이</LI>
</UL>
</UL>
</body>
OL태그
OL태그는 순서가 있는 목록을 만들때 사용합니다.
<body>
<OL type="I">
<LI><HEAD>태그에서 사용하는 태그가 아닌것은?</Li>
<OL>
<LI>META</LI>
<LI>TITLE</LI>
<LI>DIV</LI>
<LI>SCRIPT</LI>
</OL><br>
<LI><FONT>태그의 특성이 아닌것은?</Li>
<OL type = "A" start="5">
<Li>size</Li>
<Li>fontname</Li>
<Li>face</Li>
<Li>color</Li>
</OL><br>
<LI>다음중 HTML 편집기가 아닌것은? </Li>
<OL type="square">
<Li>메모장</Li>
<Li>드림위버</Li>
<Li>나모 웹에디터</Li>
<Li>그림판</Li>
</OL>
</OL>
</body>
DL태그
DL태그는 기호가 붙지않는 목록으로 문단만으로 목록을 만드는 방식입니다.
<body>
<DL>
<DT>다음중 꽃이 아닌것은?
<DD>벚꽃</DD>
<DD>소나무</DD>
<DD>진달래</DD>
<DD>철쭉</DD>
<DD>코스모스</DD>
</DT>
</DL>
</body>
'Web > HTML, CSS' 카테고리의 다른 글
| [Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등) (7) | 2018.06.22 |
|---|---|
| [Html] 문단을 나누는 P태그 사용법 (0) | 2018.06.21 |
| [Html] 일정시간 후 다른페이지로 보내기 (메타태그 활용) (0) | 2018.06.19 |
| [Html] 옆으로 움직이는 텍스트 만들기 (MarQuee) (5) | 2018.06.18 |