|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!-- <body style="background-image:url('img/1.jpg')"> 바둑판식 배열-->
<body style="background-image:url('img/2.jpg');background-repeat:no-repeat;background-size:50%;
background-position:right center">
<!-- use map 이름 부여 -->
<a href="https://www.w3schools.com/html/html_images.asp">
<img src="img/workplace.jpg" usemap="#workmap"></a>
<!-- 각 부분 지정 및 링크 설정 -->
<!-- 해당 그림을 그림판에 연결 -->
<map name="workmap">
<area href="ex01.html" shape="rect" coords="40,40,270,350">
<!--앞의 두개는 시작 좌표(x,y) 뒤의 두개는 끝 좌표(x,y)-->
<area href="ex02.html" shape="circle" coords="340,300,30">
<area href="ex03.html" shape="rect" coords="290,180,330,250">
</map>
</body>
</html> |
cs |
html ul태그 , li 태그
|
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list: 목록</title>
</head>
<body>
<!--ul : 순서가 없는 리스트-->
<!-- -->
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<hr/>
<ul style="list-style:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<hr/>
<ul style="list-style:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<!--ol : 순서가 있는 리스트-->
<!--dl : 사전이나 정의할 때 쓰는 리스트 -->
</body>
</html> |
cs |
|
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 |
<ol type="1"><!--순서가 있는 목록-->
<!--type:1,A,a,I,i-->
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<hr/>
<ol type="I"><!--순서가 있는 목록-->
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<hr/>
<ol type="I">
<li>Coffee</li>
<li>Tea
<ol type="i"start="5">
<li>Green Tea
<ul>
<li>Hot</li>
<li>Cold</li>
</ul>
</li>
<li>Black Tea</li>
<li>Green Tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
<hr/>
<ol>
<li>Coffee</li>
<li>Tea
<ol style="list-style:upper-alpha;">
<li>Green Tea
<ul>
<li>Hot</li>
<li>Cold</li>
</ul>
</li>
<li>Black Tea</li>
<li>Green Tea</li>
</ol>
</li>
<li>Milk</li>
</ol> |
cs |
|
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 |
<hr/>
<ol>
<li>Coffee</li>
<li>Tea
<ol style="list-style:upper-alpha;">
<li>Green Tea
<ul>
<li>Hot</li>
<li>Cold</li>
</ul>
</li>
<li>Black Tea</li>
<li>Green Tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
<!--ol : 순서가 있는 리스트-->
<dl>
<dt>키보드</dt>
<dd>표준 입력 장치</dd>
<dt>모니터</dt>
<dd>표준 출력 장치</dd>
</dl>
<!--dl : 사전이나 정의할 때 쓰는 리스트 -->
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!-- <body style="background-image:url('img/1.jpg')"> 바둑판식 배열-->
<body style="background-image:url('img/2.jpg');background-repeat:no-repeat;background-size:50%;
background-position:right center">
<!-- use map 이름 부여 -->
<a href="https://www.w3schools.com/html/html_images.asp">
<img src="img/workplace.jpg" usemap="#workmap"></a>
<!-- 각 부분 지정 및 링크 설정 -->
<!-- 해당 그림을 그림판에 연결 -->
<map name="workmap">
<area href="ex01.html" shape="rect" coords="40,40,270,350">
<!--앞의 두개는 시작 좌표(x,y) 뒤의 두개는 끝 좌표(x,y)-->
<area href="ex02.html" shape="circle" coords="340,300,30">
<area href="ex03.html" shape="rect" coords="290,180,330,250">
</map>
</body>
</html> |
cs |
'HTML│CSS│Java Script' 카테고리의 다른 글
| 자바스크립트 (0) | 2017.12.04 |
|---|---|
| html table / div / iframe 태그 작성하는 방법 (0) | 2017.12.04 |
| Brackets IDE 설치 (0) | 2017.10.26 |
| 티스토리 블로그 글꼴 편집 (0) | 2017.09.13 |
| 티스토리 블로그 스킨 색상 변경하는 방법 (0) | 2017.09.13 |
댓글