ul, ol, li, dl, dt, dd ; 목록 작성하기
2019. 9. 5. 00:43ㆍWEB/HTML
ul : 순서가 없는 리스트
ol : 순서가 있는 리스트
dl : 정의형 목록(dfn의 블럭 형태)
※dt가 하나인데 dd가 여러개 있을 수 있고, dt가 여러개이고 dd가 하나만 있으면 안되고, dt나 dd가 각자 하나씩 있으면 안됨.
dt : 인라인 요소만 포함
dd : 어떠한 태그가 와도 상관 없음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ul, ol, li, dl, dt, dd</title>
</head>
<body>
<ul> <!-- 순서가 없는 리스트 -->
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ol> <!-- 순서가 있는 리스트 -->
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<hr>
<ul>
<li><a href="#">menu 1</a>
<ul>
<li><a href="#">submenu 1</a></li>
<li><a href="#">submenu 2</a></li>
<li><a href="#">submenu 3</a></li>
<li><a href="#">submenu 4</a></li>
</ul>
</li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
</ul>
<hr>
<dl> <!-- 정의형 목록(dfn의 블럭 형태) ※dt가 하나인데 dd가 여러개 있을 수 있고, dt가 여러개이고 dd가 하나만 있으면 안되고, dt나 dd 각자 하나씩 있으면 안됨. -->
<dt><strong>Lorem ipsum dolor sit.</strong></dt> <!-- 인라인요소만 -->
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident autem rem aperiam numquam, beatae aspernatur necessitatibus dolor sapiente eum et quam unde, quaerat qui earum veritatis cumque labore cupiditate nam.</dd> <!-- 어떠한 태그가 와도 상관 없음 -->
<dt><strong>Lorem ipsum dolor sit.</strong></dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident autem rem aperiam numquam, beatae aspernatur necessitatibus dolor sapiente eum et quam unde, quaerat qui earum veritatis cumque labore cupiditate nam.</dd>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident autem rem aperiam numquam, beatae aspernatur necessitatibus dolor sapiente eum et quam unde, quaerat qui earum veritatis cumque labore cupiditate nam.</dd>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident autem rem aperiam numquam, beatae aspernatur necessitatibus dolor sapiente eum et quam unde, quaerat qui earum veritatis cumque labore cupiditate nam.</dd>
</dl>
</body>
</html>
※인프런 강좌 보고 작성했습니다.
https://www.inflearn.com/course/html-css-webazit#
퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준 - 인프런
웹표준 기초인 html과 css를 마스터하고 실전 웹페이지를 제작해 봅니다. 그때 그때 '그럴 것같은' 이 아니라 제대로 된 퍼블리싱 개념과 방법을 배워 퍼블리셔가 될 수 있습니다. 입문 웹 개발 웹앱 디자인 html/css 웹 디자인 온라인 강의
www.inflearn.com