HTML 이미지 삽입 하는법
안녕하세요 산책입니다.
오늘은 html에서 이미지 삽입하는 법을 배울 거예요
잘 따라 오시면
쉽게 하실수 있을 실 겁니다.
우선 atom을 먼저 켜주세요!
첨부 파일에 있는 사진을 받아주신 다음에
만들어주신 폴더에 이미지를 넣어주세요
그리고 atom에서
이렇게 적어볼까요??
<DOCTYPE html>
<html>
<head>
<meta charset= "utf-8>
</head>
<body>
<h3> 비치 사진 </h3>
<img src="beach.jpg title="beach" >
<img src="beach.jpg width="300">
<img src="beach.jpg width="200 height="200">
</body>
</html>
<img src="----.jpg>
이처럼 사진의 이름을 적어주시면 화면에 사진이 불러와집니다.
하지만 같은 폴더에 있지 않거나 제대로 된 이름을 적지 않는다면
불러와지지 않겠죠?? (저도 몇 번 고생한 적이 있었어요..)
<img src="----.jpg 뒤에 붙어있는 title , width, height에 대해 알아볼까요??
title
이미지 위에 마우스 커서를 올렸을 때 타이틀 이름이 나옵니다.
즉 title 속성은 이미지 제목을 설정하는 데 사용됩니다.
width
속성은 웹 페이지에 삽입되는 이미지의 너비를 설정하는데 사용됩니다.
width="300"은 너비를 300 픽셀로 설정한다는 말입니다.
height
속성은 웹 페이지에 삽입되는 이미지의 높이를 설정하는데 사용됩니다.
height="200" 은 높이를 200 픽셀로 설정한다는 말입니다.
정리하자면
| 속성 | 설명 |
| src | 삽입되는 이미지 파일명 (경로 포함 )설정 |
| width | 이미지의 너비 |
| height | 이미지의 높이 |
| title | 마우스 커서를 갖다 대였을 때 표시되는 이미지 제목 |
URL 주소와 경로
웹에서 사용되는 URL (uniform resource locator) 주소는 인터넷 상에서 존재하는
자원인 HTML, 이미지, 오디오, 동영상 파일 등의 위치를 의미합니다.
URL 주소를 설정하는 방법에는 상대 경로와 절대 경로를 이용하는 방법 두 가지가
있습니다.
1.상대 경로
상대 경로는 현재의 html , 문서 파일의 위치를 기준으로 상대적인 위치에 있는 파일을
찾아가는 방식입니다.
만약 이미지가 파일 안에 있으면 어떻게 될까?
만약 사진이 img 파일에 있는데
그대로 <img src="japan.jpg>로 치면
이렇게 이미지가 깨져 보일 것이다. 해결방법은
파일의 위치까지 같이 적어준다면 해결 가능합니다.
<img src="./img./japan.jpg>
폴더의 위치를 같이 넣어줬더니 사진이 나오네요!
2. 절대 경로
절대 경로는 http:// 로 시작하는 도메인 네임이 포함된 인터넷 상의 유일무이하고 절대적인 URL 주소를 의미합니다.
예시
<img src="http://naver.com/image/logo.png">
이런 느낌으로 사용하시면 됩니다.
다음 시간에는
HTML의 특수문자와 빠진
태그 문자에 대해 알아보겠습니다!
감사합니다.~