1. img 태그
• 이미지를 표시할 떄 사용하는 태그이다
• 단일 태그로써, 닫는 태그를 필요로 하지 않는다
• 콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해주어야 한다
기본형태) <img src="표시할 이미지 주소" alt="오류가 있을 때 대신 나오는 것" />
→ src 속성은 표시할 이미지의 위치정보와 파일명을 입력받는 속성이다
즉, 이미지의 url을 입력받는다
→ alt는 alternative의 약자로 대체 텍스트 역할을 한다
이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신 대체 텍스트가 표시
크기조절) <img src="이미지 주소" alt="이미지설명" width="너비값" height="높이값"/>
→ width와 height를 이용해 너비와 높이를 각각 지정할 수 있다.
2. 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>이미지를 표시해보자</title>
</head>
<body>
<h1>이미지를 표시해볼게요!</h1>
<img src="images/study.jpg" alt="강아지 사진" width="800" height="800"/>
<p>이미지 표시에는 img 태그</p>
</body>
</html>
블로그 이전했습니다 -> https://young-code.tistory.com