-
HTML - img태그HTML/HTML 2020. 2. 29. 23:19
오늘은 img 태그에 대해서 알아보자!
화면이 이미지를 표시할 때, <img>라는 태그를 쓴다.
그렇다면 img 태그는 무엇일까?
→ 화면이 이미지를 표시할 때, <img>라는 태그를 쓰며, 태그는 닫을 필요는 없다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <img src="img.jpg" height="300" alt="HTML 태그 이미지" title="HTML 태그 이미지"> </body> </html>그리고 src라는 속성을 사용해서 img.jpg라는 파일 이름을 적는다.
그러면 웹 브라우저는 img태그를 보고 "아! 여기는 이미지가 오겠구나!"라고 인식한다.
그리고 src라는 것을 통해서 "아! 여기에는 이미지를 표시해주면 되겠구나!"라고 브라우저가 인식한다.
만약 이미지의 크기를 변경하고 싶다면, width 속성을 이용하고,
만약 높이를 지정하고 싶다면, height 속성을 이용한다.
여기서 높이만 지정하게 되었을 때, 이미지가 왜곡되는 현상이 없어진다.
그에 맞는 적절한 폭의 길이를 웹 브라우저가 자동으로 계산해주기 때문이다.
만약, 웹페이지에 이미지가 깨졌을 때, 설명해줄 수 있는 alt(alternative text의 약자)라는 속성을 추가해주는 것이 좋다.
→ alt="이미지 내용"
그러면 이미지가 깨졌다는 표시와 함께 alt의 속성의 값이 화면에 표시된다.
특히, 시각장애인과 같은 분들은 이미지를 볼 수 없기 때문에 alt를 이용해서 그 자리에 어떤 정보가 위치하는지를 적어주면, 큰 도움을 받을 수 있기 때문에 alt와 같은 태그를 쓰는 것이 좋다.
title이라는 속성을 통해서 이미지에 마우스를 가져다 놓으면 해당 정보를 알 수 있다.'HTML > HTML' 카테고리의 다른 글
HTML - <form> 태그 (0) 2020.03.04 HTML - <table>태그 (0) 2020.03.02 HTML - <p>태그 / <br>태그 (0) 2020.02.26 HTML - <ul> 태그 / <ol>태그 (0) 2020.02.25 HTML - <a>태그와 속성 (0) 2020.02.24