★★★반드시 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는 경로에 포함하지 않음. 유의할 것
경로 지정 방법
- 절대 경로
- 상대 경로
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] 정적인 웹사이트 구현하기 (0) | 2020.06.11 |
|---|---|
| [HTML] 여러개 중 하나를 선택하기 <select >, <option>, <datalist> (0) | 2020.06.11 |
| [HTML] 인용구 넣기 <blockquote> 태그 (0) | 2020.06.11 |
| [HTML] 코드 및 문장 그대로 나타내기 <pre> 태그 (0) | 2020.06.11 |
| [HTML] 특수문자 표현하기('<', '>', ' ') (0) | 2020.06.11 |
