[html/css]목록을 만드는 <ul> <ol> <li>태그

[html/css]목록을 만드는 <ul> <ol> <li>태그

목록을 만드려면 <ul> <ol> <dl>태그를 사용하는데요

오늘은 <ul> <ol>에 대해 다루고 다음 시간에 <dl>태그를 다룰게요.

목록을 만드는 방법은 아래 세 가지가 있습니다

<ol>태그는 ordered list의 약자로, 숫자나 알파벳 등 순서가 있는 목록을 만드는 데 사용합니다

<ul>태그는 unordered list의 약자로, 순서가 필요 없는 목록을 만듭니다

<dl>태그는 definition list의 약자로, 사전처럼 용어를 설명하는 목록을 만듭니다.

<ol>과 <ul>의 각 항목들을 나열할 때는 <li> 태그를 사용하는데 list item의 약자입니다.

▶사용 예

<ul>

</ul>

▶같이 사용할 수 있는 속성

type : 1 / a / A / i / I 기본값은 1

* <ol>일 경우 속성값임

* <ol>에서 type은 퇴화 속성이었으나, 지금은 그렇지 않음.

type : disc / circle / square 기본값은 disc

*<ul>일 경우 속성값

HTML5에서 지원하지 않음.

start <ol>의 시작 값 (예. start="5"라고 하면 5, 6, 7 순으로 순서가 매겨짐)

reversed reversed가 있으면, 항목 순서가 거꾸로임 (3,2,1)
없으면 순차적임(1,2,3)

HTML5에서 새로운 속성

compact 는 퇴화 속성, 대신 css의 line-height 속성 사용

▶html 작성 예입니다~ol ul li.htm

html

<body>

<h4>Ordered List</h4>
<ol type="I">
<li>영어</li>
<li>음악</li>
<li>수학</li>
<li>과학</li>
</ol>

<h4>Unordered List</h4>
<ul>
<li>명사</li>
<li>형용사</li>
<li>동사</li>
<li>부사</li>
</ul>

</body>
</html>

▶ 실행 화면입니다.

[html5] embed 태그 (0)	2014.07.16
[html/css]정의 목록 <dl><dt><dd> 태그 (2)	2014.07.10
html <object>태그 정리 (0)	2014.07.08
[html/css] iframe 태그 사용법 (1)	2014.07.04
[HTML,CSS 작성 규칙] 네이버는 이렇게 한다! HTML/CSS 코딩 컨벤션 (1)	2014.06.22