-
Notifications
You must be signed in to change notification settings - Fork 0
/
HTML_3.html
92 lines (89 loc) · 3 KB
/
HTML_3.html
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<h1 style="background-color:darkblue">
style속성을 이용한 배경색 변경
</h1>
<h1 style="color:burlywood">
style속성을 이용한 글자색 변경
</h1>
<h1 style="font-size:200%">
style속성을 이용한 글자 크기 변경
</h1>
<h1 style="text-align:center">
style속성을 이용한 문단 정렬 변경
</h1>
<h1 style="background-color:powderblue; color:darkcyan; font-size:150%; text-align:left">
style속성을 이용하여 한번에 스타일링
</h1>
<h1 style="color:rgb(179,50,190)">
rgb색상값으로 표현하기
</h1>
<p><h1>css스타일로 배경색을 변경하기</h1><br>
<style>
body{ backgroung-color:lightblue;}
h1 {backgroung-color:rgb(255,128,0);}
p {background-color:#FFFFCC;}
</style>123
<a href="/html/intro" target="_self">
<h2>이 링크를 클릭해보세요</h2>
</a>
<p><h1>링크의 상태에 따른 색상 변화 만들기</h1><br>
<style>
a:link {color:tomato}
a:visited {color:hotpink;text-decoration: none}
a:hover {color:blueviolet;text-decoration: none}
a:active {color:gold;text-decoration: none}
</style>
<b href="#bookmark"><p>김지성 으로 가기</p></b>
<img src="https://images.chosun.com/resizer/g8idcFcDZScJIs26gdWQJYtRQJM=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/JTRAZWPHTVEQWBAB2MFQ6IQYSI.jpg" alt="이미지가 없네요">
<style>
img {
width:50%;
border: 1px solid black;
}
</style>
<h2><b name="bookmark"></b>김지성</h2>
<a href="http://tcpschool.com/html/html_basic_images" target="_blank">
<img src="https://images.chosun.com/resizer/g8idcFcDZScJIs26gdWQJYtRQJM=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/JTRAZWPHTVEQWBAB2MFQ6IQYSI.jpg" alt="이미지가 없네요">
</a>
<h2>순서가 없는 리스트(ul태그)</h2>
<ul>
<li>사과</li>
<li>멜론</li>
<li>바나나</li>
</ul>
<ul style="list-style-type: square">
</ul>
<h2>순서가 있는 리스트(ol태그)</h2>
<ol>
<li>사과</li>
<li>멜론</li>
<li>바나나</li>
</ol>
<ol style="list-style-type: upper-roman">
</ol>
<h2>정의 리스트(dl태그)</h2>
<dl>
<dt>호박</dt>
<dd>-박과의 한해살이 덩굴성 채소</dd>
</dl>
<h2>HTML TABLE</h2>
<table style="width:100%">
<caption>좋아하는 음식</caption>
<tr style="background-color:lightcoral">
<th>파스타</th>
<th>피자</th>
</tr>
<tr>
<td colspan="2">닭발</td>
</tr>
</table>
<style>
table, th, td {border: 1px solid black}
</style>
</head>
<body>
</body>
</html>