[HTML]/Program source (HTML)
HTML 20231128 [프로그램 소스] - Test009, Test010, Test011, Test011_1
Jelly-fish
2023. 11. 28. 11:48
WebApp01
Test009.html
Test009.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test009.html</title>
</head>
<body>
<div>
<h1>pre 태그 / xmp 태그</h1>
<hr>
</div>
<div>
나 보기가 역겨워 가실 때에는
말 없이 고이 보내드리오리다.
<br><br>
<pre>
<font color="blue">나 보기가 역겨워 가실 때에는</font>
말 없이 고이 보내드리오리다.
</pre>
<br><br>
<!-- xmp 태그를 사용하면, <font color="blue"> 텍스트까지 브라우저상에 표시된다. -->
<xmp>
<font color="blue">나 보기가 역겨워 가실 때에는</font>
말 없이 고이 보내드리오리다.
</xmp>
</div>
</body>
</html>
Test010.html
Test010.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test010.html</title>
</head>
<body>
<div>
<h1>이미지 다루기</h1>
<hr>
</div>
<!-- 가로 길이만 바꿨을 뿐인데, 이미지의 전체적인 종횡비율이 바뀌었다. -->
<!-- 하지만, 가로 길이와 높이 둘 다를 한꺼번에 바꾸려고 할 경우 이미지가 깨진다. -->
<div>
<h2>이미지 크기 및 정렬을 확인해 보도록 하자</h2>
<img src="images/img_02.gif">
<img src="images/img_02.gif" width="100">
<img src="images/img_02.gif" height="50">
<br>
<img src="images/img_02.gif" width="200" height="100">
<br><br>
<img alt="" src="images/img_02.gif" width="100" border="10"
vspace="200" hspace="100" align="top">위 아래 정렬 실습
<!-- [vspace] : 이미지 상하에 픽셀만큼 여백을 준다 -->
<!-- [hspace] : 이미지 좌우에 픽셀만큼 여백을 준다 -->
</div>
</body>
</html>
Test011.html, Test011_1.html
Test011.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test011.html</title>
</head>
<body>
<div>
<h1>하이퍼링크 실습</h1>
<hr>
</div>
<div>
<a href="http://localhost:3306/WebApp01/Test011_1.html">절대경로 지정 방식</a>
<!-- <a href="http://www.test.com/Test011_1.html">웹 상의 주소 지정 방식</a> -->
<!-- <a href="http://www.test.com>웹 상의 주소 지정 방식</a> -->
<br><br>
<!-- 절대 경로 : 어느 하드디스크 드라이브로부터 시작해서 그 안에 어떤 것이 있는지....ex : (C:\folder1\folder2\A.jpg)
상대 경로 : '나'(내가 컨트롤하고 있는 대상 파일. Test011.html)를 기준으로 주소를 명시. -->
<!-- [/] : 하위로 내려갈 때 -->
<!-- [..] : 상위로 올라갈 때 -->
<a href="./Test011_1.html">상대경로 지정 방식</a>
<br><br>
<a href="Test011_1.html">상대경로 지정 방식2</a>
<br><br>
<!-- check~!!! -->
<!-- C:\WebStudy\WebApp01\WebContent\Test011_1.html -->
<!-- C:\WebStudy\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\WebApp01 -->
<a id="top">책갈피 위치</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#top">책갈피 위치로 이동하기</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
Test011_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test_011_1.html</title>
</head>
<body>
<div>
<h1>하이퍼링크 이동 실습</h1>
<hr>
</div>
<div>
<h2>링크 이동 페이지~!!!</h2>
</div>
</body>
</html>