|
◈ 이미지 넣기
여러분들은 이제 텍스트로 이루어진 웹 페이지는 별 어려움 없이 만들 수가 있을 것입니다. 저는 이쯤에서 여러분이 알고 싶은 것이 무엇인지를 쉽게 짐작할 수 있습니다.여러분들도 아마도 단조로운 텍스트만으로 이루어진 웹 페이지가 아니라 깔끔한 이미지와 텍스트가 적절히 조화된 웹 페이지를 만들고 싶을 것입니다. 여러분들은 <img> 태그를 이용하여 웹 페이지에 이미지를 넣을 수 있습니다.
▶ <IMG> : 이미지를 넣기 위한 태그입니다.
|
<IMG>의 속성 |
|
SRC |
이미지 파일이 위치한 곳에 관한 URL 정보가 들어간다 |
|
ALIGN |
이미지와 텍스트를 같이 사용 했을 때 텍스트의 위치를 정렬시킨다.
ALIGN 속성에는 TOP, CENTER, BOTTOM, LEFT, RIGHT가 있다. |
|
ALT |
이것은 텍스트 브라우저를 위한 속성으로 이미지의 위치에 이미지의 내용을 전달해 주는 것이다. (풍선 도움말) |
|
ISMAP |
이미지 맵을 위해 사용하는 속성으로 ISMAP으로 설정된 이미지 위의 임의의 위치를 마우스로 클릭하면 해당영역으로 연결시켜준다. |
|
BORDER |
이미지의 테두리를 그려주기 위한 속성이다 |
|
HEIGHT |
이미지의 높이를 픽셀단위로 지정하기 위한 속성이다 |
|
WIDTH |
이미지의 넓이를 픽셀단위로 지정하기 위한 속성이다 |
|
HSPACE |
이미지의 좌우에 얼마만큼의 여백을 줄지 지정한다 |
|
VSPACE |
이미지의 상하에 얼마만큼의 여백을 줄지 지정한다 |
|
USEMAP |
이미지 맵을 지정할 때 사용한다 |
|
예제 |
|
<HTML>
<HEAD>
<TITLE> HTML 문서에 이미지 넣기 </TITLE>
</HEAD>
<BODY>
<H3>HTML 문서에 이미지 넣기</H3>
<P>
<IMG SRC="img/lycos.gif" ALIGN=TOP WIDTH=57 HEIGHT=55 ALT="라이코스 마스코트"> 텍스트의 위치<br>
<IMG SRC="img/lycos.gif" ALIGN=CENTER ALT="라이코스 마스코트" BORDER=0 HSPACE=20> 텍스트의 위치와 이미지의 좌우 여백<br>
<IMG SRC="img/lycos.gif" ALIGN=BOTTOM BORDER=3 ALT="라이코스 마스코트"> 텍스트의 위치와 이미지의 테두리 넓이<br>
</BODY>
</HTML> |
<예제 실행 화면>
|
<IMG> 태그의 ALIGN 속성 |
|
TOP |
이미지와 같은 라인에 있는 텍스트를 상단에 정렬한다. |
|
CENTER |
이미지와 같은 라인에 있는 텍스트를 중앙에 정렬한다. |
|
BOTTOM |
이미지와 같은 라인에 있는 텍스트를 하단에 정렬한다. |
|
LEFT |
이미지는 왼쪽에 텍스트는 오른쪽에 정렬한다. |
|
RIGHT |
이미지는 오른쪽에 텍스트는 왼쪽에 정렬한다. |
|
예제 |
|
<html>
<head>
<title>고싸움놀이</title>
</head>
<body>
<h2>고싸움 놀이</h2>
<p align="justify"><font face="돋움" size="2"><img src="img/1-1.jpg" align="left" width="150" height="113" border="0" hspace="5">전남 광산군 대조면 칠석리 윷돌 마을에서 매해 음력 정월 10경부터 2월 초하루에 걸쳐서 벌이던 놀이다.</font></p>
<p align="justify"><font face="돋움" size="2">큰 줄을 꼬아 앞쪽에 고를 짓고 이것을 양쪽에서 밀어서 부딪게 한 다음 상대방의 고를 땅에 내려뜨린 쪽이 이기게 된다.</font></p>
<p align="justify"><font face="돋움" size="2">이 놀이의 유래에 대해 마을 주민들은 윷돌 마을이 황소가 쭈그리고 앉은 와우상이라 터가 거세기 때문에 이를 풀어주기 위해 시작하였다고들 한다.</font></p>
</body>
</html> |
<예제 실행 화면>
|
POWERED BY TISTORY. THEME BY HE+STORY
