[HTML #13] 이미지 태그 IMG

반응형

안녕하세요 모빌리티 입니다.

 

홈페이지 상에서 원하는 이미지를

삽입하고 크기 또한 원하는 크기로

조정하기 위한 태그를 아래와 같이

알려드립니다.

 

오늘의 키워드

"IMG"

 

 

 

이 태그의 속성은 6가지로

사용이 가능합니다.

 

"src" / 이미지 파일의 경로를 지정

<IMG src="img.jpg">

 

URL 또는 문서 경로를 속성값

으로 사용이 가능합니다.

 

"alt" / 마우스를 올렸을때

설명을 보여줌

<IMG src="img.jpg" alt="그림설명">

그림설명: 원하는 텍스트를

집어 넣으세요.

 

 

"align"/ 이미지의 정렬 지정

<IMG src="img.jpg" align="left">

left, right, top, middle, bottom

 

"border" / 이미지에 테두리 선을 지정

<IMG src="img.jpg" border="1">

0은 테두리 없음

 

"width/height" / 이미지의 가로 세로 길이지정

<IMG src="img.jpg" width="100" height="100">

 

"hspace /vspace" / 이미지의 좌우/상하 여백지정

<IMG src="img.jpg" hspace="10" vspace="10">

 

기본샘플

 

<HTML>

  <HEAD>
     <TITLE> 이미지 넣기 </TITLE>
  </HEAD>

    <BODY>

      
    </BODY>

</HTML>

 

<HTML>

  <HEAD>
     <TITLE> 이미지 넣기 </TITLE>
  </HEAD>

    <BODY>
       <P align="center">                                                "이미지를 중앙으로"
       <IMG src="img01.gif"><BR>                                    " 첫번째 이미지를 넣기 위해서"
       <IMG src="img02.gif" width="80" height="50"><BR>    " 두번째 이미지 크기가 가로 80에 세로 50으로 설정"
       <IMG src="img03.gif" alt="모빌리티로 오세요">        "세 번째 이미지에 마우스를 올리면 모빌리티로 오세요"
       
    </BODY>

</HTML>

 

<HTML>

  <HEAD>
     <TITLE> 이미지 넣기 </TITLE>
  </HEAD>

    <BODY>
       <P align="center">                                  "이미지를 중앙으로"
       <IMG src="img01.gif"><BR>                      " 첫번째 이미지를 넣기 위해서"
       <IMG src="img02.gif" border="1"><BR>      " 두번째 이미지는 테두리 선이 1 설정"
       <IMG src="img03.gif" border="5">              "세 번째 이미지 테두리선을 5로 설정"
       
    </BODY>

</HTML>

 

 

 

 나눔은 

최고의 기쁨입니다.

이글이 도움이 되셨다면 아래

빈 하트를 채워주세요.

 

이 글을 공유하기

댓글(0)

Designed by JB FACTORY