반응형
첫번째 목록List를 만들기 위해서는 기본적으로
<ul> 또는 <ol>을 사용하고 목록 아이템들을 <li>태그로 사용한다.
<ol> Ordered List : 순서가 있는 목록
<ul> Unordered List : 순서 없는 목록
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>목록 리스트</title>
</head>
<body>
<p>순서있는 리스트</p>
<ol>
<li>커피</li>
<li>우유
<ul>
<li>초코우유</li>
<li>바나나우유</li>
</ul>
</li>
<li>녹차</li>
</ol>
<p>순서없는 리스트</p>
<ul style="list-style-type: square;">
<li>커피</li>
<li>우유</li>
<li>녹차</li>
</ul>
</body>
</html>
|
cs |
여기서 순서없는 리스트(ul)을 style 속성으로 모양을 바꿀수도 있다.
속성 style = "list-style-type:속성값"
두번째 Table를 만들기위해서는
<table> : 표만들기
<tr> : 행(row)
<td> : 열(column)
<th> : 제목셀로 많이쓰이며 ( 굵은 글씨)
속성 boder는 테두리선의 굵기
<caption> 태그 : 표의 제목
colspan 속성 : 셀의 열(가로) 합침, colspan = "숫자값"(셀의 개수)
rowspan 속성 : 셀의 행 합침(세로), rowspan = "숫자값"(셀의 개수)
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블</title>
</head>
<body>
<table border ="1">
<caption>표의 제목</caption>
<tr>
<th>1행 1열</th>
<th>1행 2열</th>
<th>1행 3열</th>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
</table>
<table border ="1">
<caption>셀의 합침</caption>
<tr>
<th colspan="2">1행 2열</th>
<th>1행 3열</th>
</tr>
<tr>
<td>2행 1열</td>
<td rowspan="2">2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 3열</td>
</tr>
</table>
</body>
</html>
|
cs |
반응형
'Front-End > HTML' 카테고리의 다른 글
| HTML 크롬 익스플로어 IE 호환 문제가 아닌 경로 문제 (0) | 2021.11.04 |
|---|---|
| 무료 HTML 템플릿 사이트 5가지 (2) | 2021.10.04 |
| [HTML] 폼Form 및 input 사용법 정리 (0) | 2021.05.12 |