<img>태그는 웹페이지에 이미지를 삽일할 수 있는 태그입니다. 다른 설명은 딱히 필요없겠죠?
<img src="이미지 경로">이 태그에 함께 쓰이는 요소들도 알아보도록 하겠습니다.
- src : 이미지의 경로
- alt : 이미지의 경로가 잘못되었거나 찾을 수 없을 때 출력될 내용
<body>
<img src="images/Test.png" alt="이미지 경로가 잘못되었습니다">
<img src="images/Testssss.png" alt="이미지 경로가 잘못되었습니다">
</body>
- width : 이미지의 가로 크기
- height : 이미지의 세로 크기
<body>
<img src="images/Test.png" alt="이미지 경로가 잘못되었습니다">
<img src="images/Test.png" alt="이미지 경로가 잘못되었습니다" width="100">
<img src="images/Test.png" alt="이미지 경로가 잘못되었습니다" width="200" height="100">
</body>
- loading : 이미지의 로딩 방식
loading의 경우 기본적으로 eager방식으로 문서에 포함되어 있는 모든 이미지를 불러옵니다. 반면 lazy방식의 경우 접속 시 모든 이미지를 불러오는 것이 아니라 화면 영역에 따라 이미지를 불러오는 방식입니다. 우리가 마우스를 드래그하여 아래로 화면을 이동하면 일정거리안에 있는 이미지들을 불러옵니다. 이는 필요에 따라 이미지를 불러옴으로써 웹 페이지의 속도를 올릴 수 있습니다.
'프로그래밍 > HTML' 카테고리의 다른 글
| HTML_Tag 8 : <pre></pre> (0) | 2021.11.17 |
|---|---|
| HTML_Tag 7 : <p></p> 문단 태그 (0) | 2021.11.16 |
| HTML_Tag 5 : <h1>~<h6> (0) | 2021.11.14 |
| HTML_Tag 4 : <a> 하이퍼 링크 (0) | 2021.11.13 |
| HTML_Tag 3 : <br> (0) | 2021.11.12 |
댓글