HTML5 이미지태그 사용하기

<Marquee> loop 반복!

   스크롤 반복 횟수를 지정

(결과)

<basefont size="5" />

스크롤을 한번만 함.

 

스크롤을 두번함.

 

스크롤을 세번함.

이미지 태그 사용하기

ㅁ 이미지 연결하기

 <형식>

    <img src="경로명/파일명">

    <속성>

    1) src="경로명/파일명"

     - 절대경로 또는 상대경로로 사용 가능.

 src = "C:\pic/dog.jpg"   (절대경로(그림이 있는곳의 경로를 상세하게 적어주는것))

 src = "pic/dog.jpg"  (상대경로(html 파일이 저장되있는곳을 기준으로 간략하게 적어줄수있음))

 

2) align = top or middle or bottom (이미지 옆 텍스트 위치)

   -이미지 옆에 텍스트를 보여줄 때 이미지 오른쪽 상산, 중간, 하단에 보여줌

   align = "top", align = "middle", bottome은 디폴트.

 

 3) align = left or right (텍스트 옆 이미지 위치)

   align = left 지정하면 텍스트 왼쪽에 이미지 위치함

   align = right 지정하면 텍스트 오른쪽에 이미지 위치함

 

 4) border = 숫자(픽셀수)

   - 이미지의 테두리선을 픽셀수로 지정

 

 5) alt="이미지 파일 설명"

   - 커서를 이지미 위에 올리면 말풍선 형식으로 보여줌.

 

Ex)

(결과)

6) vspace="픽셀수", hspace="픽셀수"

  - 이미지와 텍스트 사이에 여백을 줌.

(예)

   <img src="이미지명" vspace=30 hspace=50>

    <br clear=:left" or "right">

   - 이미지와 텍스트를 출력하고 다음 문자를 출력시 앞의 텍스트에 이어서 출력.

     이것을 벗어나기 위해 <br>태그를 여러개 사용 할 수 있으나 <br clear="left> 하면

     한번에 이전 이미지나 객체에서 벗어날 수 있음.

 

(Ex)

(결과)

7) 이미지 크기 조절하는 width, height 속성 

 <형식>

 <img src="이미지 파일명" width="픽셀수" or "숫자%" height="픽셀수" or "숫자%">

(예)

 <img src="피카추.jpg" width=100 height=100>

<img src="피카추.jpg" width=70% height=70%> 원래이미지 크기에 비례해 축소됨.

<img src="피카추.jpg" width=300> width 속성만 지정시 세로 크기는 자동으로 조정되서 보여짐.

 

(Ex)

(결과)