[HTML 태그들] #4 이미지 태그 image

오늘은 image 태그에 대해 알아보겠습니다.

image태그는 말 그대로 이미지를 넣는 태그입니다. image태그는 br태그(줄 바꿈)와 같이 닫히는 태그가 없습니다.

 

1. src 속성

src 속성 안에는 가져올 파일의 경로를 지정할 수 있습니다.

 

<image src="파일 경로/test.jpg">

 

** 따옴표를 빼먹지 않게 주의하세요.

 

2. 이미지의 폭과 높이

이미지의 폭과 높이를 정하기 위해서 우리는 width와 height를 사용할 수 있습니다.(단위:px)

 

<img src="파일경로/test.jpg" width="460" height="400">

 

위의 예제의 경우 test.jpg를 폭(넓이)은 460px, 높이는 400px로 설정한다는 뜻입니다. 

만약 폭이나 높이중 하나의 크기만 설정할 경우 설정한 크기에 맞춰 1:1 비율로 바뀌게 됩니다.

 

3. alt 속성

alt 속성은 alternative(대안)에서 나왔으며 대체 문구를 설정하는 속성입니다.

 

alt 속성을 사용할 경우 이미지가 어떠한 이유로 로드되지 못될 때 대체 문구를 보여주게 됩니다.

alt 속성이 사용되는 대표적인 경우에는 "브라우저에서 파일을 가져오지 못했을 때", "네트워크 연결이 느릴 때", "속성의 오류", "스크린 리더를 사용할 때" 등이 있습니다.

 

<img src="파일경로/test.jpg" alt="테스트용 이미지">

 

4. title 속성

title 속성을 사용할 시 이미지에 마우스를 올려 놓았을 때 마우스 옆에 title 속성에 입력한 값이 나오게 됩니다.

 

<img src="파일경로/test.jpg" title="테스트용 이미지">

5. 이미지에 링크 걸기

이미지에 링크를 걸고 싶으면 이미지태그 바깥에 a 태그를 덮어주시면 됩니다.

 

<a href="http://google.com"><img src="파일경로/test.jpg"></a>

구글로 이동