반응형 웹 실전 프로젝트 #6 (목록관련요소)
HTML, CSS 2020. 7. 17. 14:43반응형
반응형 웹 실전 프로젝트 #6 (목록관련요소)
요소 유형 : 블록 레벨 요소
태그명 : <ol></ol>
의미및 특징 : Order List 의 약자로 순서 목록을 정의 할때 사용하는 태그
자식 요소로 반드시 <li> 태그를 정의해 주어야 하며, <li>태그 이외의 다른 태그는 자식 요소로 올수 없다
요소 유형 : 블록 레벨 요소
태그명: <li></li>
의미및 특징: list item의 약자로 항목을 정의 할때 사용한다 <ol>, <ul> 태그의 자식요소이다
텍스트, 인라인요소, 블록레벨요소를 모두 포함할수 있다
비순서 목록
요소 유형: 블록 레벨 요소
태그명 : <ul></ul>
의미와 특징:
- Unorder List의 약자로 비순서 목록을 정의 할때 사용 한다
- 자식요소로 반드시 <li> 태그를 정해주어야 하며, <li> 태그 이외의 다른 태그는 자식으로 올수 없다
태그명 : <li></li>
요소 유형: 블록 레벨
의미와 특징 :
- list items의 약자로 항목을 정의 할때 사용한다
- <ul>,<ol>태그의 자식 요소이다
- 텍스트, 인라인요소, 블록 레벨 요소를 모두 포함할수 있다
HTML문서의 디자인 컨텐츠 구성은 대부분 비순서 목록으로 되어 있기 때문에, 그만큼 <ul>태그가 많이 사용된다
<ul>태그에서 중첩된 <ul>구조를 이해 하고 마크업 할수 있어야 하는데 HTML문서에서 많이 사용되는 주메뉴(2단메뉴)가 중첩된 <ul>구조를 가지기 때문이다
|
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2단메뉴</title>
</head>
<body>
<ul>
<li>
<a href="#">메뉴 2</a>
<ul>
<li>
<a href="#">서브 메뉴 1_1</a>
</li>
<li>
<a href="#">서브 메뉴 1_2</a>
</li>
<li>
<a href="#">서브 메뉴 1_3</a>
</li>
</ul>
</li>
<li>
<a href="#">메뉴 2</a>
<ul>
<li>
<a href="#">서브 메뉴 2_1</a>
</li>
<li>
<a href="#">서브 메뉴 2_2</a>
</li>
<li>
<a href="#">서브 메뉴 2_3</a>
</li>
</ul>
</li>
<li>
<a href="#">메뉴 3</a>
<ul>
<li>
<a href="#">서브 메뉴 3_1</a>
</li>
<li>
<a href="#">서브 메뉴 3_2</a>
</li>
<li>
<a href="#">서브 메뉴 3_3</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
|
cs |
설명 목록 <dl>
요소유형: 블록 레벨
태그명 : <dl></dl>
의미및 특징:
- Description List의 약자로 용어에 대한 설명 목록을 정의 할때 사용하는 태그
- 자식 요소로 반드시 <dt>태그와 <dd> 태그를 정해줘야 하며 <dl> → <dt> → <dd> 순서로 마크업 해야 한다
- <dl>태그는 <dt>, <dd> 이외의 태그는 자식요소로 올수 없지만 <dt>, <dd>를 한쌍으로 묶는 <div>태그는 예외적으로 올수 있다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>설명목록</title>
</head>
<body>
<dl>
<dt>html</dt>
<dd>Hypertext Markup Language</dd>
<dd>version html 4.0, xhtml 1.0, html5</dd>
<dt>css</dt>
<dd>cascading style sheets</dd>
<dd>version css2, css3</dd>
</dl>
</body>
</html>
|
cs |
반응형
'HTML, CSS' 카테고리의 다른 글
| 반응형 웹 실전 프로젝트 #8 (폼 관련요소 및 속성) (0) | 2020.07.17 |
|---|---|
| 반응형 웹 실전 프로젝트 #7 (표관련요소 및 속성) (0) | 2020.07.17 |
| 반응형 웹 실전 프로젝트 #5 (텍스트 관련요소) (0) | 2020.07.17 |
| 반응형 웹 실전 프로젝트 #3 ~ #4 (블록 레벨요소와 인라인요소, 기본요소) (0) | 2020.07.16 |
| 반응형 웹 실전 프로젝트 #2 (시멘틱 마크업과 논리적 순서마크업) (0) | 2020.07.16 |