1. <ul> 태그 - 순서 없는 목록 만들기
기본형 :
<ul>
<li> 내용 </li>
<li> 내용 </li>
...
</ul>
- <ul> 태그는 Unordered List의 약자로써 '정돈되지 않은 리스트'를 뜻 합니다.
<ul> 태그를 사용하고 <ul> 태그 안에 <li> 태그를 사용하여 각 항목을 표시합니다. <ul> 태그 사용 시 각 항목 앞에 작은 원이나 사각형 같은
불릿(bullet)이 붙습니다. 작은 원이 디폴트 값입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><ul>, <li>태그 사용 방법</title>
</head>
<body>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</body>
</html> |
cs |
<사진 1.1>
<사진 1.1> 코드는 <ul> 태그와 <li> 태그를 사용했습니다. 그리고 <li> 태그의 끝 태그인 </li> 태그를 생략해도 결과는 같습니다.
<사진 1.1 결과 화면>
결과 화면을 보면 a, b, c, d, e의 앞에 작은 원인 불릿이 붙어서 출력되는 것을 확인할 수 있습니다.
2. <ol> 태그 - 순서 목록 만들기
기본형 :
<ol>
<li> </li>
<li> </li>
<li> </li>
....
</ol>
- <ol> 태그는 Ordered List의 약자로써 '정돈된 리스트'를 뜻 합니다.
<ul> 태그처럼 순서 없는 목록이 아닌, 순서를 알고 싶은 목록을 사용하고 싶으면 <ol> 태그를 사용하면 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><ol>, <li>태그 사용 방법</title>
</head>
<body>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ol>
</body>
</html> |
cs |
<사진 1.2>
<사진 1.2> 코드는 <사진 1.1> 코드에서 <ul> 태그 부분을 <ol> 태그로만 수정한 코드입니다. 아래는 결과 화면입니다.
<사진 1.2 결과 화면>
<ul> 태그와 달리 <ol> 태그는 순서를 확인할 수 있는걸 볼 수 있습니다. 물론 <li> 태그의 끝 태그는 생략 가능합니다.
2.1 <ol> 태그의 Type 속성
<사진 1.3>
위 표는 <ol> 태그안에서 사용할 수 있는 속성 값들 입니다. 사용법은 아래와 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 |
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><ol>, <li>태그 사용 방법</title>
</head>
<body>
<ol type="1"> <!-- 속성 값 1은 type 속성의 디폴트 값이므로 작성하지 않아도 결과는 똑같습니다. -->
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ol type="a">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ol type="A">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ol type="i">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ol type="I">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
</body>
</html> |
cs |
<사진 1.4>
아래는 결과 화면입니다.
<사진 1.4 결과 화면>
'Web Basic > HTML5' 카테고리의 다른 글
| [HTML5] <table>, <tr>, <td>, <th>태그 사용 방법 (0) | 2018.03.14 |
|---|---|
| [HTML5] <dl>, <dt>, <dd>태그 사용 방법 (0) | 2018.03.14 |
| [HTML5] <span> 태그 사용 방법 (0) | 2018.03.11 |
| [HTML5] <mark>태그 사용 방법 (0) | 2018.03.11 |
| [HTML5] <q>태그 사용 방법 (0) | 2018.03.08 |