이미지 태그(HTML)

웹에서는 이미지 파일이 크기가 크지 않아야하고 화질도 좋아야한다. 그래서 몇 가지 파일 형식만 사용가능하다.

- GIF

- JPG/JPEG

- PNG

위의 이미지 파일들을 화면에 나타낼때 <img> 태그가 필요하다

 

<img> 태그

- src 속성에 이미지 파일이 있는 경로를 넣어야 화면에 이미지가 나타난다. 경로는 웹 문서 파일의 위치를 기준으로정해진다. 만약 이미지 파일이 웹 문서와 같은 경로에 있다면 이미지 파일 이름만 넣어주면 된다. 만약 웹 문서와 같이 있는곳에 images라는 하위폴더에 picture.png 이미지 파일이 있으면 /images/picture.png 경로를 src에 넣어면 된다. 

- alt 속성은 이미지를 설명하는 대체 텍스트로 넣을 때 사용한다. 화면 낭독기에서 대체 텍스트를 읽어 주기 때문에 장애이늘에게 정보를 전달할 수 있다. 또한 연결 속도가 느리거나 이미지를 나타낼 수 없는 경우 alt에 넣은 값이 화면에 나타난다.

- 이미지의 너비와 높이 속성은 width와 height에 넣으면 된다. 

<img height = "200px" width= "200px" src="잘못된 src닷" alt="alt닷~~">
<br>
<br>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQPTguhV2D25pM3yUQrsa_kDKt6U8llBLWLGg&usqp=CAU">

 

<figure>,<figcaption> 태그

<figure> 태그 안에 이미지 태그와 이미지에 대한 설명을 <figurecaption>으로 넣어줄 수 있다. 

<figure>
	<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQPTguhV2D25pM3yUQrsa_kDKt6U8llBLWLGg&usqp=CAU">
    <figcaption>이 사진은 좋은사진이군</figcaption>
</figure>

이 사진은 좋은사진이군