<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>이미지 삽입</title>
</head>
<body>
<h3>이미지 삽입</h3>
<hr>
<p> 엘비스 프레슬리의 사진입니다.</p>
<img src="media/Elvis1.jpg" width="150" height="200"
alt="Elvis">
<img src="media/kitae.jpg" width="80" height="100"
alt="황기태사진없음" >
<img src="http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif"
alt="사진 주소 변경됨" width="100" height="100">
</body>
</html>
교수님의 웹 프로그래밍 코드 연습에서는 실행하면 책의 그림과 같이 잘 되는데 개인컴퓨터에서 실행하면 엘비스 프레슬리 사진이 나오지 않습니다. img src="http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif" 를 개인컴퓨터에서도 나오게하려면 어떤 경로 코드를 적용해야 엘비스 프레슬리 사진이 나올수 있는지 알고 싶습니다.
그리고 상기 코드를 edit plus 프로그램에 <meta charset="UTF-8">를 입력안하면 글자도 깨져서 엉망이라 <meta charset="UTF-8">입력이 필수였습니다.
1. 이미지의 경로 때문에 어려움을 당하는 군요.
아래의 이미지 태그에서 이미지의 경로명은 HTML 파일이 있는 폴더에 media라는 서브폴더가 있어야 하고 media 폴더에 Elvis1.jpg 이미지가 있어야 합니다.
<img src="media/Elvis1.jpg" width="150" height="200" alt="Elvis">
HTML 파일을 작성하는 폴더에 media라는 폴더를 만드세요. 그런다음 media 폴더에 Elvis1.jpg 이미지를 저장해두면 됩니다.
이렇게 HTML 파일이 있는 위치에 이미지 파일을 저장하지 않고, 이미지를 저장하는 media라는 폴더를 따로 두는 이유는 HTML 파일이 있는 위치에 구분하여 관리를 용이하게 하기 위함입니다.
2. 네이버의 이미지는 아래 태그 그대로 사용해도 나옵니다. 이것은 다른 사이트에 있는 이미지의 절대 주소를 준 사례입니다.
네이버에서 이미지의 위치를 바꾸지 않는한. 이미지가 출력될 것입니다.
<img src="http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif"
alt="사진 주소 변경됨" width="100" height="100">
3. HTML 파일을 utf-8 인코딩으로 저장하고, 다음 태그를 <head></head> 태그 내에 작성하여 브라우저에게 알려주면 한글이 깨지지 않고 나옵니다.
<meta charset="UTF-8">
하지만, HTML5 표준은 기본이 utf-8로 인코딩하는 것이기 때문에(표준을 따르는 브라우저는 utf-8로 해석하는것이 기본이므로) <meta> 태그를 사용하지 않더라고 한글이 잘 출력되어야 하는 것이 정상입니다. 하지만, 사용자들이 다양한 인코딩 방식으로 HTML 파일을 저장할 가능성이 있기 때문에, 브라우저에 따라 <meta charset="UTF-8"> 태그가 없으면 브라우저의 메뉴(익스플로러의 경우 보기/인코딩 메뉴에서)에 지정된 인코딩 방식에 따라 글자를 해석합니다. 익스플로러의 경우 인코딩 메뉴에서 utf-8을 설정하면 됩니다.
크롬에서는 <meta charset="UTF-8"> 없이도 잘 됩니다.
* 어쩌면 책의 모든 예제에 처음부터 <meta charset="UTF-8"> 태그를 삽입해 두었으면 이런 불편함이 없었겠다는 생각이 드는군요.
책을 수정할 때 고쳐야할 것 같습니다.
감사합니다.