메뉴 건너뛰기

조회 수 389 댓글 1

<!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">입력이 필수였습니다.

 

 

 

?
  • ?
    황기태 2017.04.30 21:53

    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"> 태그를 삽입해 두었으면 이런 불편함이 없었겠다는 생각이 드는군요.
    책을 수정할 때 고쳐야할 것 같습니다.

    감사합니다.


QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18173
222 비정형 표 질문 file ㅇㅇ 2020.04.08 187
221 ; 가 쓰일 때를 여쭙고 싶습니다 2 file 입문한 사람 2020.04.07 139
220 따옴표를 4중 5중으로 사용하는 방법에 대해 여쭙고 싶습니다. 입문한 사람 2020.04.07 40
219 SRC와 SRDOC의 차이를 여쭙고 싶습니다. 입문한 사람 2020.04.07 48
218 선생님 정말 고맙습니다 재질문도 드리고 싶습니다 file 입문한 사람 2020.04.07 137
217 표와 div span 4 키보드 향기 2020.04.05 108
216 목록을 한줄로 나란하게 만드는 법 질문드립니다 3 file 입문한 사람 2020.04.04 258
215 div 와 pre 중에서 어떤 게 더 상위에 위치하나요? 1 file 입문한사람 2020.04.03 749
214 코드 잘못된 부분을 봐주시면 정말 감사하겠습니다 1 file 입문한 사람 2020.04.01 598
213 ; 에 대해 질문드립니다 1 입문한 사람 2020.04.01 85
212 2장 오픈 챌린지 웹페이지 음악연주 질문있습니다. 1 초보자 2020.03.29 190
211 한글html 1 키보드 향기 2020.03.29 919
210 예제 2-21 1 Daisy 2020.03.29 237
209 7장의 8번문제 1 궁금 2020.03.20 247
208 71page 1 아리송 2020.03.07 77
207 1장 test1, 2, 3 파일 2 열공중 2020.03.07 538
206 html에 css작성할때 2 궁금이 2020.03.04 351
205 61 page 실습문제 1번 오류찾기 2 궁금이 2020.02.15 1754
204 한글 타이틀이 깨져 보입니다. 1 안스가리오 2020.01.06 116
203 11장 실습문제 6번 arc()문제 제발요 2019.12.06 1093
목록
Board Pagination Prev 1 ... 5 6 7 8 9 10 11 12 13 14 ... 21 Next
/ 21
위로