<!DOCTYPE html>
<html>
<head>
<title>목록 관련 태그</title>
</head>
<body>
<li>목록1</li>
<li>목록2</li>
<h1>ul : 순서 없는 목록 태그</h1>
<ul>
<li>HTML
<ul>
<li>글자관련</li>
<li>목록관련</li>
</ul>
</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuary</li>
</ul>
<!--불릿(bullet)기호 : 채워진원, 빈원, 네모난거.. 변경 가능 => CSS시간에-->
<hr>
<h1>ol : 순서 있는 목록 태그</h1>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuary</li>
</ol>
<!--순서 있는 목록 태그는 기본적으로 1부터 시작하는 숫자값-->
<br>
<!--type속성을 이용해서 변경 가능(속성값 : 1(기본값), A, a, i, I)-->
<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuary</li>
</ol>
<br>
<!--start속성을 이용해서 시작값 변경 가능-->
<ol start="5" type="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuary</li>
</ol>
<br>
<!--reversed 속성을 통해 역순으로 표기 (속성값 제시 안함)-->
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuary</li>
</ol>
<br>
<hr>
<hl>d1 : 설명과 관련된 목록 태그</hl>
<dl>
<dt>이곳은 제목을 작성하는 곳</dt>
<dd>여기에 해당 설명을 작성하는 곳</dd>
<dd>여러줄을 작성할 수 있다.</dd>
<dt>또 다른 제목 작성 가능</dt>
<dd>설명도 마찬가지...</dd>
</dl>
</body>
</html>
'IT개발 과정 [취성패 학원] > Frontend' 카테고리의 다른 글
[HTML]03. 표관련태그 (0) | 2021.03.31 |
---|---|
[HTML] 01. 글자관련태그 (0) | 2021.03.31 |