반응형
1. Image 예제
1) img폴더 생성 후 img폴더에img1.jpg를 복사
* alt -> 그림이 없을때 나오는 설명
img2.jpg
0.07MB
img1.jpg
0.01MB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02-이미지</title>
</head>
<body>
<!-- 이미지 태그의 기본 사용 방법 -->
<p>
<img src="img/img1.jpg" alt="There is no image here!!"/>
</p>
<!-- 이미지 크기 지정하기 -->
<p>
<img src="img/img2.jpg" width="200" height="400" alt="이미지 설명"/>
</p>
</body>
</html>
2. Link 예제
* <a> : Anchor(닻의 약자)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03-링크</title>
<!-- #은 아이디를 뜻함 -->
<style type="text/css">
#blank{
height: 1000px;
}
</style>
</head>
<body>
<h1>링크의 기본 사용 방법</h1>
<ul id="menu" type="A">
<li><a href="exam2.html" >현재 사이트의 특정 파일로 링크</a></li>
<!--
_blank : 새창
_self : 기존창
-->
<li><a href="http://www.naver.com" target="_blank">다른 사이트로 링크(새창)</a></li>
</ul>
<hr/>
<!-- 아이디호출 -->
<div id="blank">빈공간</div>
<hr/>
<h1>현재 페이지에서의 링크 이동</h1>
<ul>
<li><a href="#">현재 페이지의 맨 위로 이동</a></li>
<li><a href="#menu">현재 페이지의 특정위치로 이동</a></li>
</ul>
</body>
</html>
예제 1 결과
예제 2 결과
반응형
'IT > Programming' 카테고리의 다른 글
| HTML - DROPDOWN(SINGLE,MULTI), 파일 첨부 (0) | 2023.04.18 |
|---|---|
| HTML - INPUT TYPE(TEXT,PASS,MEMO,HIDDEN,CHECK,RADIO) (0) | 2023.04.18 |
| HTML - TAG연습 (0) | 2023.04.18 |
| HTML 기본구조 (0) | 2023.04.18 |
| HTML 개념 (0) | 2023.04.18 |
