HTML 리스트를 만들자(li, ul, ol)
HTML 리스트를 만들자
(li, ul, ol)
ㆍ 이번에는 HTML에서 리스트를 만들어보도록 하겠습니다.
ㆍ li, ul, ol의 뜻만 알아도 사용하는 방법은 아주 쉽습니다.
ㆍ li는 예상하시는 것처럼 List입니다
ㆍ ol은 ordered list의 약자로 순서가 있는 List입니다.
ㆍ ul은 ol의 반대로 unordered list의 약자로 순서가
없는 List입니다.
ㆍ dl도 있지만 이번에는 생략하겠습니다.
설명보다 바로
결과를 보는게
이해가 빠를것
같으므로
하나씩 보도록
하겠습니다.
먼저 li(list)
입니다
결과를 먼저 보면
hi, hello, good이
리스트처럼
뿌려져 있습니다.
코드를 보겠습니다.
<html>
<head>
<title>ITPANGPANG</title>
</head>
<body>
<li>hi</li>
<li>hello</li>
<li>good</li>
</body>
</html>
보시는것과
같이
간단하게 Text 양쪽에
<li></li>를
추가 시킨것 밖에 없습니다.
이번에는
ol을 보도록
하겠습니다.
보시는 것과 같이
1.2.3 숫자가 생겼습니다
ol(ordered list)대로
순서가 생겼습니다.
코드로 보겠습니다.
<html>
<head>
<title>ITPANGPANG</title>
</head>
<body>
<ol>
<li>hi</li>
<li>hello</li>
<li>good</li>
</ol>
</body>
</html>
딱 2줄 추가됬습니다
li(List)로 감싼 Text를
순서가 있는 리스트로
한번더 감싸주면 됩니다.
이번에는
ul을 보도록
하겠습니다
그냥 보는대로
순서가 없는 리스트
입니다.
코드 역시 보면
<html>
<head>
<title>ITPANGPANG</title>
</head>
<body>
<ul>
<li>hi</li>
<li>hello</li>
<li>good</li>
</ul>
</body>
</html>
ol을
ul로 바꾼 것
밖에 없습니다
'웹(Web) > HTML' 카테고리의 다른 글
| Form(폼) 태그를 써보자 (1) | 2016.07.31 |
|---|---|
| HTML 표를 만들어보자 (0) | 2016.07.03 |
| HTML에서 하이퍼링크 걸기 (1) | 2016.06.19 |
| HTML 기본구조 및 Hello World 출력하기 (1) | 2016.06.18 |