h11. HTML 이미지 태그

HTML 이미지 태그

HTML에서는 이미지 표시도 태그로 정의합니다. src 속성으로 이미지의 url 을 입력해 줍니다.

alt 속성은 이미지가 로드되지 않았을 때 대체 문자를 표시해 줍니다. 

또 alt 속성값은 페이지를 읽어주는 프로그램에서 사용되기도 합니다.

<img src="이미지 경로 및 파일명" alt="대체 문자" />

<img style="width: 210px; height: 78px;" src="http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif" alt="네이버 로고" />

이미지 사용시, 가로와 세로 픽셀을 지정하는 것이 좋습니다. 가로 세로 픽셀이 지정되어 있지 않으면 이미지가 로드 될 때 떨수가 있습니다.

---

이미지의 경로가 지정되어 있지 않으면, 브라우저는 같은 폴더내에서 파일을 찾기 때문에, 폴더위치가 틀리다면 틀린부분을 적어 주어야 합니다.

하위 폴더에 이미지가 있는 경우가 많은데, 이때에는 폴더이름과 파일이름을 적어 줍니다.

다른 사이트에 있는 이미지의 경우에는 전체 경로를 모두 포함하여야 합니다.

<img src="/이미지가 담긴 하위경로명/이미지파일명.확장자" alt="대체 문자" style="width:256px;height:256px;">

이미지에 링크를 삽입하려면 <img alt="" /> 태그를 <a> 태그로 감쌉니다.</a>

<a href="http://www.naver.com">
<img style="width: 210px; height: 78px;" src="http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif" alt="네이버 로고" />
</a>

---

이미지에 CSS float 위치지정 속성을 사용하여 이미지의 표시위치를 왼쪽이나 오른쪽으로 조정할 수 있습니다.

<div><img style="float: right; width: 210px; height: 78px;" src="http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif" alt="네이버 로고" />
<br /><p>이미지가 텍스트의 오른쪽에 위치합니다.</p></div>

<div><img style="float: left; width: 210px; height: 78px;" src="http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif" alt="네이버 로고" />
<br /><p>이미지가 텍스트의 왼쪽에 위치합니다.</p></div>

이미지가 텍스트의 오른쪽에 위치합니다.

이미지가 텍스트의 왼쪽에 위치합니다.

---

[광고] Udemy 동영상 강의로 보기