-
[HTML] ImageVScode/HTML 2022. 9. 8. 13:24
img
-이미지를 페이지에 표시하는 태그
-끝나는 태그가 없는 단일 태그이며 어떤 그림을 표시할지 추가적으로 src 속성을 통해 기술함
src
-이미지의 경로와 파일 이름
길이
-width: 가로 길이, height: 세로 길이
-이 중 하나만 조정하면 나머지 크기는 비율에 맞춰서 자동조절됨
-동시에 길이 설정하면 비율이 틀어져 화면구현시 이미지가 이상해질 수 있음
인터넷에 게시된 이미지 URL 얻기
-가져올 이미지 위에 마우스를 놓고 오른쪽 버튼을 클릭해 속성창을 열거나 이미지 주소 복사 메뉴를 이용하면 확인할 수 있음
-다만 일부 그림들은 공개하지 않을 목적으로 URL을 분산하여 식별이 어렵거나 이미지 주소 복사를 못하게 함 → 자바스크립트 이용
alt
이미지의 URL이 맞지 않거나 해당 이미지가 이름이 틀리거나 실제 이미지가 존재하지 않아서 이른바 엑박이 나올 때 풍선도움말 형식의 안내문을 표시함
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>06_img.html</title> </head> <body> <!-- 폴더에 저장된 이미지 파일 불러오기 --> <img src="images/daumlogo.png" width="200" /> <br /> <img src="images/facebook.jpg" width="200" /> <br /> <img src="images/nate.png" width="200" /> <br /> <img src="images/naver.png" width="200" height="200" /> <br /> <img src="images/twiter.jpg" width="200" /> <br /> <!-- 인터넷의 이미 게시된 이미지의 URL 을 얻는 방법 --> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" width="200" /><br/> <img src="https://developer.oracle.com/a/devo/images/cb102-java-grey.jpg" width="200"/><br/> <!-- 엑박이 나올때 --> <img alt="그림이 존재하지 않습니다." src="images/abcd.jpg"> </body> </html>'VScode > HTML' 카테고리의 다른 글
[HTML] Table (0) 2022.09.08 [HTML] List (0) 2022.09.08 [HTML] Marquee (0) 2022.09.08 [HTML] Anchor (0) 2022.09.08 [HTML] 생성하기 (0) 2022.09.08