HTML 이미지 삽입 / 예제

이미지삽입

이미지 삽입은 가장 많이 사용되는 태그 중 하나 입니다.

HTML 이미지 삽입 방법과 다양한 속성에 대하여 알아보고, 예제를 통하여 속성들이 적용 된 모습을 확인 해 보도록 하겠습니다.

<img src="이미지주소" alt="대체텍스트" title="설명문구" width="300" height="300">

기본 사용법(필수속성)

<IMG SRC = "이미지 파일 이름">

※ SRC : 필수 속성입니다. GIF, JPG, PNG 등의 확장자 형식 이미지를 사용합니다.

확장 사용법

추가속성

- ALT : 대체 텍스트로 이미지파일 오류로 나타나지 않을 경우 표시 됩니다.

- TITLE : 설명문구로 이미지에 마우스를 가져가면 표시 됩니다.

- WIDTH : 가로크기를 지정합니다.

- HEIGHT : 세로크기를 지정합니다.

- ALIGN : 텍스트 위치를 설정 합니다. 설정값(TOP / MIDDEL / BOTTOM / LEFT / RIGHT)
- VSPACE : 이미지 상하 여백을 지정합니다.

- HSPACE : 이미지 좌우 여백을 지정합니다.

코딩실습(title/alt/width/height )

<!DOCTYPE html>

<html>

<head>

<title>테스트</title>

</head>

<body>

  <div>

    <img src="이미지.png" title="녹색 나뭇잎과 맑은 하늘">
    <img src="없는이미지.png" alt="하늘 이미지">
    <img src="이미지.png" width="300" height="300">
  </div>

</body> 

</html>

코딩결과

코딩결과(title/alt/width/height )

코딩실습(vspace/hspace/align)

<!DOCTYPE html>

<html>

<head>

<title>테스트</title>

</head>

<body>

  <div>

    <img src="이미지.png" vspace="30"> <br>
    <img src="이미지.png" hspace="30"> <br>
    <img src="이미지.png" align="right">
  </div>

</body> 

</html>

코딩결과

코딩결과(vspace/hspace/align)

HappyLog