|
<img>태그로
이미지 삽입을 손쉽게 해결할 수 있는데요,
이미지의 크기, 테두리등의 조절 뿐만 아니라 텍스트와의
정렬 상태, 수평/수직 여백등을 조절할 수 있습니다.
<img>태그에
사용되는 속성을 살펴볼까요?
- src-삽입할 이미지의 파일명, 또는 url을 지정합니다.
그림의 주소를 보시려면 그림위에 마우스를 대신 다음
른쪽 버튼을 클릭하시면 그림의 등록정보를 보실 수
있습니다.)
- border-이미지의 테두리 크기를 지정합니다
- width-이미지의 넓이를 지정합니다.
- height-이미지의 높이를 지정합니다.
- align-이미지와 텍스트와의 정렬상태를 지정합니다.
(left, right, top, middle, bottom등의 값을 사용합니다.)
- hspace-이미지의 수평 여백을 지정합니다.
- alt-이미지위에 마우스를 대면 풍선도움말이 뜨며 설명이 나옵니다
그럼 그림을 넣어볼까요?
예제1-기본적인 이미지 넣기
<html>
<head>
<title>이미지 넣기</title>
</head>
<body>
<img src="http://skin011.com.ne.kr/HOME/tag1/img/ani_pskippy.gif">
</body>
</html> |
[결과]
 |
예제2-이미지 테두리 두께 조절하기
그럼 이번에는 그림의 크기를 조절해볼까요?
예제3-이미지크기 조절하기
|
<html>
<head>
<title>이미지 크기 조절하기</tille>
</head>
<body>
<img src="http://skin011.com.ne.kr/HOME/tag1/img/kitty6.gif" width=38 height=33>
<img src="http://skin011.com.ne.kr/HOME/tag1/img/kitty6.gif" width=50 height=40>
<img src="http://skin011.com.ne.kr/HOME/tag1/img/kitty6.gif" width=70 height=60>
</body>
</html> |
[결과]
|
그림의 크기가 변화된 것을 볼 수 있습니다.
그럼 그림옆에 넣을 글씨의 위치를 조절해볼까요?
|
<html>
<head>
<title>이미지의 상,중,하에 텍스트 정렬</title>
</head>
<body>
<img src="http://skin011.com.ne.kr/HOME/tag1/img/kitty6.gif" align=top>이미지 상단에 텍스트 정렬
<img src="http://skin011.com.ne.kr/HOME/tag1/img/kitty6.gif" align=middle>이미지 중앙에 텍스트 정렬
<img src="http://skin011.com.ne.kr/HOME/tag1/img/kitty6.gif" align=bottom> 이미지 하단에 텍스트 정렬
</body>
</html> |
[결과]
이미지 상단에 텍스트 정렬
이미지 중앙에 텍스트 정렬
이미지 하단에 텍스트 정렬 |
그럼 이제 그림을 설명해주는 풍선 도움말을 달아봅시다-
그림위에 마우스를 대면 조그만 풍선창이 뜨면서
설명이 나오는 것 보셨죠?
<html>
<head>
<title>풍선 도움말 만들기</title>
</head>
<body>
<img src="http://skin011.com.ne.kr/HOME/tag1/img/kitty6.gif" alt="귀여운키티">
</body>
</html> |
| 그림위에 마우스를 대보세요 ^^
자, 이제 문서에 그림을 자유자재로 넣으실 수 있겠죠 *^-^*
★-그럼 오늘도 좋은 하루 되세요-★ | |