HTML5
[HTML5] 리스트 태그 <ol>, <ul>, <dl>
FRDYtheme
2022. 9. 22. 11:00
1. 순서가 있는 목록 태그 <ol>
- 순서가 있는 목록 태그는 <ol>로 작성한다.
- <ol>은 블록 요소이며 자동으로 숫자가 부여되는 리스트 태그다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>순서가 있는 목록 태그 ol</title>
</head>
<body>
<ol>
<li>ol과 li 사이엔 다른 태그가 올 수 없다.</li>
<li>li태그 안에는 다양한 다른 태그들 작성 가능.</li>
<li>ol과 li는 함께 사용. 둘 중 하나만 사용할 수 없다.</li>
<li>꼭 순서가 필요한 리스트에 작성.</li>
<li>start 속성 작성 시 작성한 숫자부터 시작.</li>
</ol>
</body>
</html>
- 기본적으로 1부터 시작되지만 시작되는 숫자를 지정하고 싶으면 start 속성을 사용한다.
<ol start="10">
<li>start 속성을 작성하면</li>
<li>1부터 시작하는게 아니라</li>
<li>10부터 시작하게 만들 수 있다</li>
- 특정 목록의 번호를 지정하려면 value 속성을 사용한다.
<ol start="10">
<li>start 속성을 작성하면</li>
<li>1부터 시작하는게 아니라</li>
<li>10부터 시작하게 만들 수 있다</li>
<li value="15">이것만 15로 만들고 싶다.</li>
2. 순서가 없는 목록 태그 <ul>
- 순서가 없는 목록 태그는 <ul>로 작성한다.
- <ul>은 블록 요소 / 블릿 기호로 표시되는 리스트 태그다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>순서가 없는 목록 태그 ul</title>
</head>
<body>
<ul>
<li>ul과 li 사이엔 다른 태그가 올 수 없다.</li>
<li>li태그 안에는 다른 다양한 태그들 작성 가능.</li>
<li>ul과 li는 함께 사용. 둘 중 하나만 사용할 수 없다.</li>
</ul>
<h3>요리 재료</h3>
<ul>
<li>감자 3개</li>
<li>육두구 1t</li>
<li>소금 1t</li>
<li>생크림 500ml</li>
<li>버터 1T</li>
</ul>
</body>
</html>
- 목록에 붙는 블릿 기호는 기본적으로 '점'이다. 다른 모양으로 변경하려면 CSS를 활용하는게 좋다.
3. 정의형 목록 태그 <dl>
- 정의형 목록 태그로 용어의 정의, 설명, 참고문헌, 메타데이터 등 다양하게 사용하며 <dl>로 작성한다.
- <dl>은 블록 요소이다.
- 일부 os에서 dl의 정의가 다르기 때문에 접근성이 좋지 않다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>정의형 목록 태그 dl</title>
</head>
<body>
<dl>
<dt>dt : 항목의 제목, 용어..</dt>
<dd>dd : 위의 제목이나 용어의 설명란</dd>
<dd>dl, dt, dd 모두 블록 요소</dd>
<dt>html이란?</dt>
<dd>하이퍼 텍스트 마크업 랭귀지, 웹문서의 구조를 담당한다.</dd>
<dt>css란?</dt>
<dt>cascading style sheets란?</dt>
<dd>웹 문서의 디자인을 담당한다.</dd>
</dl>
</body>
</html>
- <dl>태그는 <ol>, <ul> 태그와 달리 dl과 dt, dd 사이에 다른 태그를 작성할 수 있다.
<dl>
<div>
<dt>dl은?</dt>
<dd>ol, ul과 달리 dl과 dt, dd 사이에 다른 태그를 작성할 수 있다.</dd>
</div>
<div>
<dt>dl은?</dt>
<dd>ol, ul과 달리 dl과 dt, dd 사이에 다른 태그를 작성할 수 있다.</dd>
</div>
</dl>4. 중첩 리스트
- 리스트끼리는 서로 중첩이 가능하며 <ol>, <ul> 태그는 꼭 <li></li>태그 사이에 다른 태그가 들어가야한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>중첩 리스트</title>
</head>
<body>
<ul>
<li>ol이나ul과 li 사이가 아니라
<ul>
<li>li와 /li 태그 사이에 들어가야한다.
<ul>
<li>기본은 점모양이지만 중첩 될수록
<ul>
<li>모양이 바뀌는데
<ul>
<li>html로는 네모가 최대인가보다.</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>ul끼리만 되는게 아니라
<ol>
<li>ul안에 ol 혹은 그 반대도 가능하다.</li>
<li>dl도 되는지 확인해보자
<dl>
<dt>dl은 되나요?</dt>
<dd>된다.</dd>
</dl>
</li>
<li>다음은 3번</li>
</ol>
</li>
</ul>
</body>
</html>