<img src = "이미지경로" width = "넓이" height = "높이" border = "테두리선 두께" title = "풍선도움말" alt = "이미지가로딩되지 않았을 때 보여줄 텍스트">
- 이미지경로 1. 절대경로 : c:/경로/파일명.: 사용하지 않는다 2. 상대경로 : 이미지의 자원을 사용하는 html파일이 제공되는 URL을 기준으로 설정하는 경로 기준 : HTML 파일의 위치 http://localhost/html_prj/day0107/test.html
- 이미지가 HTML 파일과 같은 위치에 존재할 때 : 경로를 사용하지 않는다 - 파일명만 기술 예) <img src = "a.png"/>
http://localhost/html_prj/day0107/images/a.png - 이미지가 HTML 파일의 하위폴더에 존재할 때 : 하위경로부터 기술한다 예) <img src = "images/a.png"/>
http://localhost/html_prj/common/images/a.png - 이미지가 HTML 파일과 다른 위치에 존재할 때 : 상위경로로 이동(..)하여 경로를 기술 예) <img src = "../common/images/a.png"/>
상대경로의 장점 : 경로를 짧게 기술할 수 있다 단점 : HTML파일의 위치가 변경되면 모든 경로를 그 위치에 맞게 변경해야한다 상위경로로 이동하는방법 : ..
3. URL : 이미지가 제공되는 모든 경로를 사용하는 방식 <img src = " http://localhost/html_prj/day0107/images/a.png">
URL의 장점 : HTML파일의 위차가 변경되더라도 경로 수정을 할 필요가 없다 단점 : 경로를 길게 작성해야한다
<map> <area> //하단에서 따로 다룰 예정(이미지와 링크를 같이)
[ 이미지태그 _ 1. 이미지 나타내기]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 연결</title>
</head>
<body>
<!-- 절대경로 : 사용하지 않는다<br/>
<img src="C:\dev\workspace\html_prj\WebContent\day0107\images\jj.png"/> -->
<h1>상대경로</h1><br/>
<ul>
<li>
이미지가 HTML과 같은 위치에 존재<br>
<img src = "google.png"/>
</li>
<li>
이미지가 HTML 파일의 하위폴더에 존재할 때<br>
<img src = "images/daum.png"/>
</li>
<li>
이미지가 HTML 파일과 다른 위치에 존재할 때<br>
<img src = "../common/images/google.png"/>
</li>
</ul>
<h1>URL</h1><br/>
<img src="http://localhost/html_prj/common/images/google.png">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>링크 : 다른 페이지와 연결</title>
</head>
<h2>2. 경로_이미지, target</h2>
<a href = "http://daum.net" title = "daum으로 이동"><img src="images/daum.png" width = "80" border = "0"></a>
<!-- image border를 없애는 이유 : internet explorer 8 에서는 자동으로 테두리가 생긴다 -->
<a href = "http://daum.net" target = "_new">새창(새탭)으로 daum 열기</a>
</body>
</html>
[ frame / iframe 이란 ? ]
-frame: 하나의 창(탭)에서 여러개의 HTML파일을 동시에 로딩하여 보여줄 떄 사용 - frame, iframe 을 제공한다 - frame : 웹브라우저 전체를 나눠서 페이지를 보여줄 때 사용 (페이지의 전체 디자인을 설정할 때) - (속도의 이유로 요즘은 div를 사용한다)
- iframe : 웹브라우저의 일부분을 나눠서 페이지를 보여줄 때 사용 - (아직 사용중)
