블로그스쿨(blog school)





포스팅의뢰 및 제휴 문의

<img> 태그는 웹에 이미지를 표시할때 사용하는 태그입니다. 


사용법: <img src="이미지경로" border=0 width="넓이" height="높이">  

           - src는 웹에 표시할 이미지의 경로와 이름을 적어줍니다.
           - width는 이미지폭을 지정하고 height는 이미지 높이를 지정하는데 생략가능
           - border 는 이미지의 테두리를 표시할것인지를 적어주는 옵션입니다.
             0을 적으면 테두리가 표시되지 않고, 1을 입력하면 테두리가 표시됩니다.

 

▣ 예제 

 

예제1) <img src="http://cfs9.tistory.com/image/29/tistory/2008/05/23/00/00/48358aa7a2baf">
 

결과

 

  글자...

 

예제2)

<img src="http://cfs9.tistory.com/image/29/tistory/2008/05/23/00/00/48358aa7a2baf"  border=0 width=100 height=120>

 

결과

 

  width와 height를 이용하여 크기를 바꿀 수 있습니다.

 

예제3)

<img src="http://cfs9.tistory.com/image/29/tistory/2008/05/23/00/00/48358aa7a2baf"  border=0 width=200 align=center>

 

결과

 

  width 만 지정하고 높이 지정을 안하는 경우 높이는 width의 크기에 맞추어 자동으로 변경이 됩니다.

align=center는 그림의 가운데에(세로) 글자가 써지도록 합니다.

 

예제4)

 

만약에 이미지 옆에 여러줄의 글을 쓰기 위해서는 style sheet(css)를 이용하는 방법과 table 태그를 이용하는 방법이 있습니다. style을 이용하는 방법으로 float 을 이용하면 됩니다.

 

<img src="http://cfs9.tistory.com/image/29/tistory/2008/05/23/00/00/48358aa7a2baf"  width=200 style="float:left;">

 

결과

 

 

style="float:left;" 를 적으면.. 이와 같이 이미지의 옆에

여러줄의 글을 입력할 수 있습니다.

 

이미지의 왼쪽에 글을 쓰기 위해서는 이미지를 오른쪽으로 보내면 됩니다.

float:right라고 적어주면 되겠죠!

 

이미지와 글자사이를 띄어주기 위해서는

hspace=10px 과 같이 적어주면됩니다.

아래와 같이요~~

 

<img src="http://cfs9.tistory.com/image/29/tistory/2008/05/23/00/00/48358aa7a2baf"  width=200 style="float:left;" hspace=10>

 

 

 

서비스 링크

X
Login

브라우저를 닫더라도 로그인이 계속 유지될 수 있습니다. 로그인 유지 기능을 사용할 경우 다음 접속부터는 로그인할 필요가 없습니다. 단, 게임방, 학교 등 공공장소에서 이용 시 개인정보가 유출될 수 있으니 꼭 로그아웃을 해주세요.

X