본문 바로가기
정보창고/블로그 정보

18.이미지태그로 문서 꾸미기

풍란의 향기 2012. 2. 8. 12:37

이미지태그로 문서를 꾸며봅시다.

<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-이미지 테두리 두께 조절하기

<html>
<head>
<title>이미지 테두리 두께 조절하기</title>
</head>
<body>
<center>

<img src="http://skin011.com.ne.kr/HOME/tag1/img/kitty6.gif" border=10>

<img src="http://skin011.com.ne.kr/HOME/tag1/img/kitty6.gif" border=20>

<img src="http://skin011.com.ne.kr/HOME/tag1/img/kitty6.gif" border=30> 

</center>
</body>
</html>

[결과]

      


그럼 이번에는 그림의 크기를 조절해볼까요?

예제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>

그림위에 마우스를 대보세요 ^^

 


귀여운 키티


자, 이제 문서에 그림을 자유자재로 넣으실 수 있겠죠 *^-^*

★-그럼 오늘도 좋은 하루 되세요-★

 




'정보창고 > 블로그 정보' 카테고리의 다른 글

16.문서의 프리 스타일  (0) 2012.02.08
17.marquee태그로 글자 움직이기  (0) 2012.02.08
19.배경음악 올리기  (0) 2012.02.08
20.링크시키기  (0) 2012.02.08
21.table넣기  (0) 2012.02.08

'정보창고/블로그 정보' Related Articles

티스토리툴바