웹 프로그래밍/HTML

[HTML] 이미지 띄우기(경로 지정 방법: 상대, 절대 / 경로 404 에러 주의) <img> 태그

산을넘는다 2020. 6. 11. 11:07

★★★반드시 WebContent 밑에 있어야 한다. (주의)

 

 

경로를 안적고, 파일명만 적어주면

exam08.html과 같은 경로에 있다는 것을 의미한다. 

그런데, 이미지 파일이 html과 다른 경로(html - images)에 있다. 그래서 엑박이 뜬다.

alt 라는 속성은, 엑박이 뜰 때 설명해주는 글을 표현한다.

 

<figure> 태그 내에 이미지를 넣으면, 액자와 같이 표현할 수 있다.

 

 

 

html과 경로가 다를 경우, 어떻게 경로를 적어야 할까?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<img src = "daum_logo.png"> <!-- 엑박 뜬다 -->
	<img src = "http://localhost:9999/Lecture-WEB/html/images/daum_logo.png">
	<img src = ./images/daum_logo.png> <!--  './' : 현재 html과 같은 레벨에 있는 -->
	<img src = "daum_logo.png" alt ="DAUM 로고"> <!-- 엑박일 때 설명해주는 글 -->
	
	<a href = "http://www.daum.net" target ="_blank"> 
		<!-- a태그의 href : 해당 이미지에 링크 걸기 -->
		<!-- target : 누르면 새창으로 띄우기 -->
	
		<img src = ./images/daum_logo.png alt ="DAUM 로고" withd= "400" height = "300"
					border ="10" style ="border-color: navy" title = "이미지를 클릭해보세요~~~" >  
	</a>
	
	<hr>
	<figure>
		<img src = "images/추노1.jpg">
		<figcaption> 추노 사진 </figcaption>  <!-- figure : 액자처럼 보이기 -->
	</figure>
	
	<figure>
	
		<img src = "images/추노1.jpg" withd = "300" height ="300">
		<img src = "images/추노2.jpg" withd = "300" height ="300">
		<figcaption> 추노 모음집 </figcaption>
	</figure>
	
</body>
</html>

 

- http://localhost:9999/Lecture-WEB/WebContent/html/images/daum_logo.png 

- ★★★webcontent는 경로에 포함하지 않음. 유의할 것

 

 

 

경로 지정 방법

- 절대 경로

- 상대 경로