HTML5 UL과 OL의 차이, 리스트 만들기
2018. 1. 17. 11:08ㆍ화면 속/HTML5
반응형
SMALL
'메뉴'를 만들기에 좋은,
'목록'을 만들기에 좋은 List를 HTML을 통해 만드는 법입니다.
HTML의 list는 크게 두 가지로 나누어집니다.
1. 순서가 없는 목록
2. 순서가 있는 목록
1. 순서가 없는 목록 (UL)
보통 리스트를 만들 때 사용하게 되는 tag는 <ul> tag입니다.
순서가 없는(Unorder) 목록이고,
기본적으로 점 모양이 찍혀 나오게 됩니다.
보통 앞에 아무것도 없이, 하위메뉴처럼 만들고 싶을 때 사용합니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>순서가 없는(Unorder) 목록</p>
<ul>
<li>모두</li>
<li>같은</li>
<li>표시</li>
<li>단지</li>
<li>위에서</li>
<li>아래로</li>
</ul>
</body>
</html>
위와 같이 사용 하고,
순서가 없는(Unorder) 목록
- 모두
- 같은
- 표시
- 단지
- 위에서
- 아래로
실제로 사용할 경우 이렇게 나타나게 됩니다.
후에, CSS를 통해 목록 앞의 점 표시는 지워줄 수 있습니다.
2. 순서가 있는 목록 (OL)
순서가 있는(Order) 목록입니다.
자동으로 순서가 붙기 때문에, 경우에 따라서 훨씬 편하게 작업할 수 있고
리스트의 숫자를 체크하는 것에도 용이합니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>순서가 있는(Order) 목록</p>
<ol>
<li>기본</li>
<li>타입</li>
</ol>
<ol type = "I">
<li>로마자</li>
<li>표시</li>
</ol>
<ol type = "A">
<li>영문자</li>
<li>표시</li>
</ol>
</body>
</html>
사용법은 위와 같습니다.
실제로 사용하게 된다면,
순서가 있는(Order) 목록
- 기본
- 타입
- 로마자
- 표시
- 영문자
- 표시
이렇게 나타나게 됩니다.
(소문자로도 가능합니다)
ol 태그의특징은 'type'을 사용할 수 있다는 것이고,
ol과 ul tag모두, <li>라는 태그를 안에다 두고 그를
감싸는 형태의 부모 tag라고 할 수 있습니다.
반응형
LIST
'화면 속 > HTML5' 카테고리의 다른 글
| 인터넷에 사진/동영상 올리는 태그 (0) | 2018.01.22 |
|---|---|
| HTML5 LINK 연결하기 (0) | 2018.01.16 |
| HTML5 Tag의 기본, 다양한 HTML의 tag들(with body) (0) | 2018.01.05 |
| HTML5 Tag의 기본, 다양한 HTML의 tag들(with head) (0) | 2018.01.04 |
| HTML5의 특징, 시맨틱 웹(Semantic Web) (0) | 2018.01.02 |