바깥쪽 여백은 margin , 구성 요소와 배경 사이의 거리
안쪽 여백은 padding , 구성 요소의 테두리와 글자 사이의 거리
|
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>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 배경색 글자색 테두리색-->
<h1 style="background-color:tomato">html color</h1>
<h1 style="background-color:rgb(255,0,255)">html color</h1>
<h1 style="background-color:rgba(255,0,255,0.5)">html color</h1></body>
<h1 style="background-color:rgba(255,0,255,0.3)">html color</h1></body>
<h1 style="background-color:rgba(255,0,255,1)">html color</h1></body>
<hr/>
<!--글자 색-->
<h1 style="color:tomato">html color</h1>
<h1 style="color:rgb(255,0,255)">html color</h1>
<h1 style="color:rgba(255,0,255,0.5)">html color</h1></body>
<h1 style="color:rgba(255,0,255,0.3)">html color</h1></body>
<h1 style="color:rgba(255,0,255,0.0)">html color</h1></body>
<h1 style="color:rgba(255,0,255,1)">html color</h1></body>
<h1 style="border:2px solid blue">html color</h1>
<h1 style="border:2px dashed rgb(255,0,255)">html color</h1>
<h1 style="border:2px double rgb(0,0,255)">html color</h1>
<h1 style="border:2px dotted rgb(0,255,0)">html color</h1>
</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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Style 속성 </title>
</head>
<body>
<!-- <tagname style="property(스타일 가지고 있는 속성) : value(값); property:value"-->
<!-- 배경색 : Background-color: -->
<!-- 글자 색 : -->
<!-- 글꼴 : -->
<h1 style="background-color:orange;color:green;">naver.com</h1>
<p><font size="5">http</font></p>
<p>http://www.<span style="background-color:purple;color:white;">naver.com</span></p>
<hr/>
<!--textSize:font-size = % -->
<h1>naver.com</h1>
<p><font size="5">http</font></p>
<p style="font-size:150%">http://www.naver.com</p>
<p style="font-size:150%">http://www.naver.com</p>
<p style="font-size:300%">http://www.naver.com</p>
<hr/>
</body>
</html> |
cs |
404 not found
400 = 클라이언트 에러
500 = 서버 에러
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- ../ => 상위 폴더로 이동-->
<img src="../img/naver.png"><br/>
<a href="../ex03.html">문서 3 호출</a>
<!--../ 상대 주소 참조 : 현재 해당 문서의 위치에서 다른 파일을 참조-->
</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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>링크 : a</title>
</head>
<body>
<!--a태그 : <a href="url">link text</a>-->
<!--a:link => 일반적인 색 (아직 방문하지 않음)-->
<!--a:visited => 방문한적이 있음 (아직 방문하지 않음)-->
<!--a:hover => 마우스를 올려 놓은 상태 (아직 방문하지 않음)-->
<!--a:activity => 클릭한 상태 (아직 방문하지 않음)-->
<!--글자 링크-->
<a href="http://www.naver.com">www.naver.com</a><br/>
<a href="http://www.naver.com" target="_blank">네이버</a><br/>
<!-- target="_blank 새창에서 출력되게함 -->
<a href="http://www.naver.com" style="text-decoration:none;">네이버</a><br/>
<!-- style="text-decoration:none; 밑줄이 없는 링크 -->
<!-- <img alt="그림이 없을때 나타나는 글자 또는 위치가 틀렸을때"
src="위치 값" title="풍선 도움말"> -->
<img src="img/naver.png"><br/>
<img alt="네이버" src="/img/naver.png"><br/>
<img src="img/naver.png" title="naver"><br/>
<a href="http://www.naver.com"><img src="img/naver.png"></a><br/>
<a href="ex03.html"><h3>문서 3</h3></a>
</body>
</html> |
cs |
jswoo030@gmail.com 으로 질문을 보내시면 빠른 답변을 드립니다.
'HTML│CSS│Java Script' 카테고리의 다른 글
| html table / div / iframe 태그 작성하는 방법 (0) | 2017.12.04 |
|---|---|
| html ul 태그 li 태그 (0) | 2017.12.01 |
| jsp (0) | 2017.12.01 |
| Brackets IDE 설치 (0) | 2017.10.26 |
| 티스토리 블로그 글꼴 편집 (0) | 2017.09.13 |
댓글