[HTML 기초] HTML 이미지 삽입하는 방법

HTML & WEB

by 어뮤징 라이프 2017. 2. 5. 13:44

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

이전 포스팅에서는 글자크기, 글자색상 지정하는 방법을 알려드렸는데요,

관련 포스팅 : http://amusinglife.tistory.com/21

오늘은 HTML 문서에 HTML이미지링크를 넣는 방법을 알려드리겠습니다.^^

HTML 이미지 삽입 태그

<IMG SRC="이미지경로">

크기를 지정하고 싶다면?

<IMG SRC="이미지경로" WIDTH="넓이" HEIGHT="높이" alt="그림설명">

여기서 alt 태그란??

alt태그는 태그에 대한 설명입니다. 이 부분은 웹페이에서는 보이지 않습니다.

그러나!! 이 alt 태그는 사실 시각장애인을 위한 태그랍니다.

시각장애인은 음식인식기를 컴퓨터에 장착하고 사용합니다.

음성인식기를 이용해서 웹사이트에 나와있는 전체를 음성으로 들을 수 있습니다.

이미지를 클릭할 경우 alt태그에 입력된 문장이 음성인식기를 통해 나온다고 하네요.

즉, ALT태그는 그림에 마우스를 올릴 때 나타낸느 설명문을 뜻합니다.

그렇기 때문에 귀찮더라도 올바르고 자세한 설명을 넣는 배려가 필요하겠네요^^

그럼 다시 본론으로 돌아가서, HTML이미지삽입 링크를 설명드리겠습니다.

<HTML>

<HEAD>

<TITLE> HTML 이미지 링크 넣기 </TITLE>

</HEAD>

<BODY>

IMG SRC를 넣어보겠습니다. 멍멍<BR><BR>

<IMG SRC="IMG01.JPG" WIDTH="600" HEIGHT="400" alt="강아지사진입니다.">

</BODY>

</HTML>

이렇게 HTML명령어를 넣어주고 HTML문서로 저장합니다.

웹브라우저로 열어볼까요??

여기서 WIDTH와 HEIGHT를 지정하여 알맞은 크기로 올릴 수 있답니다.

WIDTH : 이미지 넓이를 지정합니다.

HEIGHT : 이미지 높이를 지정합니다.

그 외 입력하는 이미지효과 HTML명령어

BORDER : 그림 외곽선으로 테두리를 지정합니다.

VSPACE : 그림 상하 여백을 지정합니다.

HSPACE : 그림 좌우 여백을 지정합니다.

ALIGN : 그림 위치를 지정합니다. (align="left, right, center")

지정을 따로 하지 않을 경우에는 기본으로 왼쪽정렬됩니다.

잘 따라오셨나요??

읽어주셔서 감사드리고 다음 포스팅에도 html기초 강좌는 계속됩니다~~^.^