<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>음료 메뉴</h3>
<ul> <!-- <ul> 순서 없는 목록이다. -->
<li>콜라</li>
<li>사이다</li>
<li>환타</li>
<li>레쓰비</li>
</ul>
<hr>
<h3>커피 종류</h3>
<ol> <!-- <ol> 순서 있는 목록이다. <ul>은 순서가 없는 목록 -->
<li>아메리카노</li>
<li>카페라떼</li>
<li>카페모카</li>
<li>바닐라라떼</li>
</ol>
<hr>
실행하면 <ul>~</ul> 태그로 입력한 것은 순서가 없는 목록이 됩니다.
밑에 커피 종류에서는 <ol> 태그로 사용했는데 순서가 있는 목록으로 표시된 것을 알 수 있습니다.
<h3>음료 메뉴</h3>
<!-- type="disc", "circle", "square" 속성 -->
<ul type="square"> <!-- <ul> 순서 없는 목록이다. -->
<li>콜라</li>
<li>사이다</li>
<li>환타</li>
<li>레쓰비</li>
</ul>
<hr>
<h3>커피 종류</h3>
<!-- type="1", "a", "A", "I", "i" -->
<ol type="i"> <!-- <ol> 순서 있는 목록이다. <ul>은 순서가 없는 목록 -->
<li>아메리카노</li>
<li>카페라떼</li>
<li>카페모카</li>
<li>바닐라라떼</li>
</ol>
<hr>
<h3>중국집 메뉴</h3>
<ul type="disc">
<li>짜장면</li>
<li>짬뽕</li>
<li>탕수육</li>
<li>만두</li>
<ol type="a">
<li>군만두</li>
<li>물만두</li>
<li>찐만두</li>
</ol>
<li>볶음밥</li>
<li>잡채밥</li>
</ul>
</body>
</html>
실행하면 음료 메뉴는 <ul> 태그로 순서 없는 목록을 했습니다.
<ul type="square">는 ul type에서 square란 속성을 적용하여 네모 표시로 된 것을 알 수 있습니다.
커피 종류에서는 <ol> 태그로 순서 있는 목록으로 했습니다.
<ol type="i">는 ol type에서 i란 속성을 적용하여 i,ii,iii,iv 같은 순서 있는 목록으로 표시된 것을 알 수 있습니다.
중국집 메뉴에서는 <ul type="disc">로 순서 없는 목록으로 했습니다.
<ul type="disc">는 disc란 기본값 속성을 적용하여 검은 원으로 표시된 것을 알 수 있습니다.
코드 중간에서 보면
<li>만두</li>
<ol type="a">
<li>군만두</li>
<li>물만두</li>
<li>찐만두</li>
<ol type="a">로 되어 있습니다.
순서 있는 목록이 a로 설정하여 a,b,c 순서로 되어 있는 것을 알 수 있습니다.
● list-style-type 속성
list-style-type 속성은 항목 모양의 종류를 지정한다.
- 속성값
<ol> 태그는 ordered list의 약어이며 숫자나 알파벳 등 순서가 있는 목록을 만드는 데 사용됩니다.
<ul> 태그는 unordered list의 약어이며 순서가 필요없는 목록을 만드는 데 사용됩니다.
<ol>과 <ul>의 항목을 나열할 때 <li> 태그를 사용하는데 list item의 약어입니다.
'웹표준 > HTML4' 카테고리의 다른 글
| HTML4 테이블 태그 (0) | 2017.08.22 |
|---|---|
| HTML4 텍스트 서식 관련 및 이미지 태그 (0) | 2017.08.19 |
| HTML4 태그 속성 <hr>, 링크태그, target="blank" 속성 (0) | 2017.08.19 |
| HTML4 태그 속성에 대한 설명 (0) | 2017.08.19 |
| HTML4 태그 속성 및 단락 (0) | 2017.08.19 |