목록 태그 - <ul>, <ol>, <dl>
목록을 나열할 때 사용하는 태그는 <ul>, <ol>, <dl> 가 있습니다.
<ul> 태그는 순서가 중요하지 않을 때 사용하는 태그입니다.
<ol> 태그는 순서가 중요할 때 사용하는 태그입니다.
<ul> 태그와 <ol> 태그의 항목은 <li> 태그를 이용합니다.
<dl> 태그는 제목과 그에 관한 설명을 목록으로 표시할 때 사용하는 태그입니다.
<dl> 태그를 사용할 때 제목은 <dt>, 설명은 <dd> 태그를 사용합니다.
<!DOCTYPE html />
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>언제나 휴일 - 목록</title>
<style>
section h3
{
background-color:Aqua;
color:Red;
}
footer
{
margin:10px;
clear:both;
text-align:center;
}
.style_ul
{
background-color:White;
color:Green;
}
.style_ol
{
background-color:Green;
color:White;
}
article dt
{
font-weight:bold;
}
</style>
</head>
<body>
<section>
<article id="use_ul" class="style_ul">
<h3>ul 태그 사용</h3>
<ul class="style_ul">
<li>하나</li>
<li>둘</li>
<li>셋</li>
</ul>
</article>
<article id="use_ol" class="style_ol">
<h3>ol 태그 사용</h3>
<ol class="style_ol">
<li>하나</li>
<li>둘</li>
<li>셋</li>
</ol>
</article>
<article id="use_dl">
<h3>dl 태그 사용</h3>
<dl class="style_ul">
<dt>수</dt>
<dd>하나</dd>
<dd>둘</dd>
<dd>셋</dd>
</dl>
</article>
</section>
<footer>
<p>Copyright 2015 언제나 휴일 ehclub.co.kr</p>
</footer>
</body>
</html>
'언어 자료구조 알고리즘 > HTML5' 카테고리의 다른 글
| [HTML5] 6. 안전한 구조를 위해 br 태그에 종료를 표시하자. (0) | 2016.05.05 |
|---|---|
| [HTML5] 5. 소스 코드를 본문에 포함할 때는 pre 태그를 사용! (0) | 2016.05.05 |
| [HTML5] 4. 주석으로 가독성을 높이자. (0) | 2016.05.05 |
| [HTML5] 3. 글자가 이상하게 보일 때 깨지지 않게 meta태그에 인코딩 설정 (0) | 2016.05.04 |
| [HTML5] 2. 간단해진 HTML 문서 형식 선언 <!DOCTYPE html> (0) | 2016.05.04 |
| [HTML5] 1. 첫 번째 만드는 HTML 문서, "Hello, HTML" (0) | 2016.05.04 |
| [HTML5] 이미지 (0) | 2016.04.09 |
| [HTML5] 테이블 (0) | 2016.04.09 |
| [HTML5] P 태그와 PRE 태그 (0) | 2016.04.09 |
| [HTML5] 시맨틱 태그와 CSS (0) | 2016.04.09 |