이미지삽입

 

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

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

 

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

 

  기본 사용법(필수속성)

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

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

 

  확장 사용법

<IMG SRC =  "이미지 파일 이름"  추가 속성>

 

  추가속성

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

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

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

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

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

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

 

 

  실습(title/alt/width/height )

1
2
3
4
5
6
7
8
9
10
11
12

13

16

15

16

17

<!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)

1
2
3
4
5
6
7
8
9
10
11
12

13

16

15

16

17

<!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)

Posted by 행복한 유유로그

댓글을 달아 주세요

  1. 로샤씨 2018.05.15 07:44 신고  댓글주소  수정/삭제  댓글쓰기

    이미지 넣을 때 참고해야겠네요 ㅎㅎ! 오늘도 좋은 정보 감사합니다^^!!

  2. 낭만ii고양이 2018.05.15 07:56 신고  댓글주소  수정/삭제  댓글쓰기

    좋은정보잘배워갑니다~ 좋은하루되세요^^

  3. 공수래공수거 2018.05.15 08:34 신고  댓글주소  수정/삭제  댓글쓰기

    광고도 이렇게 해서 들어가는거로군요^^

  4. 김양 2018.05.15 23:01 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보네요!!



티스토리 툴바