반응형
1. <li> 태그란 무엇인가?
- <li>...</li> 태그는 list item(목록 항목) 으로 목록 작성 시 목록에 해당하는 항목을 나타내는 태그이다.
- 목록 관련 태그인 <ul>...</ul>, <ol>...</ol> 사이에 쓰인다.
2. <ul>...</ul> 태그란 무엇인가?
- <ul>...</ul> 태그는 unordered list(질서정연하지 않은, 순서가 없는 목록) 으로 순서 없는 목록을 표현하는 태그이다.
- type 에 따라 (disc : ●) / (circle : ○) / (square : ■) 표현이 가능하다.
3. <ul><li>..</li></ul> 태그 사용 예시
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>목록 태그에 대해 알아보자</title>
</head>
<body>
<h3>< 'ul' 태그 안에 li 태그가 있어요. ></h3>
<ul>
<li>나는 li태그 1 입니다.</li>
<li>나는 li태그 2 입니다.</li>
<li>나는 li태그 3 입니다.</li>
<li>나는 li태그 4 입니다.</li>
<li>나는 li태그 5 입니다.</li>
</ul>
</body>
</html>
|
cs |
4. <ul><li>..</li></ul> 태그 사용 결과
5. <ul><li>..</li></ul> 태그에 type적용 예시
|
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
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>목록 태그에 대해 알아보자</title>
</head>
<body>
<h3>< 'ul' 태그 안에 li 태그가 있어요. ></h3>
<ul type='square'>
<li>나는 li태그 1 입니다.</li>
<li>나는 li태그 2 입니다.</li>
<li>나는 li태그 3 입니다.</li>
<li>나는 li태그 4 입니다.</li>
<li>나는 li태그 5 입니다.</li>
</ul>
<h3>< 'ul' 태그 안에 li 태그가 있어요. ></h3>
<ul type='circle'>
<li>나는 li태그 1 입니다.</li>
<li>나는 li태그 2 입니다.</li>
<li>나는 li태그 3 입니다.</li>
<li>나는 li태그 4 입니다.</li>
<li>나는 li태그 5 입니다.</li>
</ul>
</body>
</html>
|
cs |
6. <ul><li>..</li></ul> 태그에 type적용 결과
반응형
'Programming Language > CSS' 카테고리의 다른 글
| [CSS] <dl> 태그, <dt> 태그, <dd> 태그란? (description list) (0) | 2022.01.18 |
|---|---|
| [CSS] <li> 태그, <ol> 태그란? (list item, ordered list) (0) | 2022.01.18 |
| [CSS] <span> 태그란? (0) | 2022.01.12 |
| [CSS] <div> 태그란? (division) (0) | 2022.01.12 |
| [CSS] CSS 스타일 적용 방법 (0) | 2022.01.11 |
댓글