(HTML) img 태그 정리

1.src

src는 그림을 올릴때 사용하는 속성이죠

ex)<img src="그림파일.jpg">

근데 여기서 주의하실점이,

저 그림파일이 htm파일과 같은곳에 저장되있어야

인터넷으로 켯을때 이미지가 안깨지고 제대로 나옵니다.

아니면 저장을할때 그 폴더 까지 써주시면되는데요.

 

예를들어서,

<img src="내 그림/그림파일.jpg">

이렇게 앞에 내 그림은 폴더 이름이죠.

저건 내그림 폴더안에 그림파일.jpg 그림을 불러오는거예요.

 

2.width

width는 가로크기를 변경해주는 속성입니다.

ex) <img src="그림파일.jpg" width=100>

이렇게 쓰면 저 그림파일의 가로크기를 100픽셀로 설정 한것입니다.

 

3.height

height는 세로크기를 변경해주는 속성입니다.

ex) <img src="그림파일.jpg" height=200>

이렇게 쓰면 그림파일의 세로크기를 100픽셀로 설정 한것입니다.

 

4.border

border는 그림 테두리를 표시하는겁니다.

ex)<img src="그림파일.jpg" border=2>

이렇게 쓰면 그림파일의 테두리가 2만큼 되는데요.

만약 테두리를 표시하지 않으려면 border를 0으로 주면되고

크게하려면 숫자를 점점 올리면 됩니다.

 

5.alt

alt는 그림에다가 마우스를 대면 설명글이 나오게하는 거예요.

ex)<img src="그림파일.jpg" alt="히히하하">

이렇게하면 그림에다 마우스를 갖다대면 히히하하 라고 뜨게됩니다.

 

6.align

align은 다 아시죠?

그림을 특정위치로 정렬 해주는 거예요.

왼쪽,가운데,오른쪽 만 있는게 아니고

위,아래등등의 옵션도 있어요.

ex)<img src="그림파일.jpg" align=right>

=그림 오른쪽 정렬

<img src="그림파일.jpg" align=bottom>

=그림 하단에 맞춰 정렬

 

7.hspace

hspace는 그림 좌우에 여백을 설정하는 거예요.

ex)<img src="그림파일.jpg" hspace=20>

이건 그림 좌우에 20픽셀의 여백을 설정 하는 것입니다.

 

8.vspace

vspace는 그림 상하에 여백을 설정하는 거예요.

ex)<img src="그림파일.jpg" vspace=20>

이건 그림 상하에 20픽셀의 여백을 설정 하는 것입니다.