[HTML]이미지 삽입하기 : <img>태그

SolChan Kim·2024년 3월 25일

`<img>태그`

웹 페이지에서 이미지를 삽입할 때 사용하는 태그
기본문법

<img src="이미지 파일 경로" alt="대체할 텍스트">

src속성 : 이미지 파일의 경로를 지정하여 웹 브라우저에 알려 준다.(필수)
alt속성 : 이미지를 표시할 수 없거나, 인식할 수 없을때 텍스트를 제공한다.

사용예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>이미지와 대체용 텍스트 삽입</title>
</head>
<body>
  <!--상대경로-->
  <img src="../img/Shark.PNG" alt="상어">
  <h1>상어(Sharrk)</h1>
</body>
</html>

`<img>태그`에서 주로 사용하는 태그

src : 삽입되는 이미지 파일명(경로 포함)설정
widgth : 이미지 너비(가로)크기 조절
height : 이미지 높이(세로)크기 조절
title : 이미지에 마우스 커서를 갖다 대면 표시되는 제목 설정
alt : 이미지를 불러 올 수 없을때 대채하는 텍스트

src속성

이미지, 음악 동영상 파일 등을 웹 문서에 삽입할 때는 경로를 주의해야 한다.

경로란 현재 HTML문서에서 해당 파일이 있는 곳까지
어떻게 찾아가는지 알려 주는 것을 말한다.

삽입할 파일이 HTML문서와 같은 폴더에 있다면 다음과 같이 작성한다.

<!--같은 폴더에 있는 Shark.PNG파일 삽입-->
<img src="Shark.PNG">

HTML문서가 있는 폴더에 하위 폴더가 있고, 그 안에
삽입할 이미지 파일이 있다면 다음과 같이 작성한다.

<!--HTML문서가 있는 폴더의 하위폴더인 images폴더 안에 있는 Shark.PNG파일 삽입-->
<img src="images/Shark.PNG">

이미지 크기 조절 : width, height속성

웹 브라우저 창에서 보이는 이미지 크기만 조절하고 싶을 경우,
width(너비)와 height(높이)속성을 사용할 수 있다.

둘 다 사용할 수도 있고, 하나만 사용할 수 있다.(나머지는 자동 조정)

사용할 수 있는 단위 : 픽셀(px), 퍼센트(%)

픽셀(px) : 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시한다.
- width = "150"
퍼센트(%) : 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 정한다.
- widrh = "40%"

사용예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>img</title>
</head>
<body>
  <h4>width="50%", height="50%"로 지정한 이미지</h4>
  <img src="../img/Shark.PNG" width="50%" height="50%">
  <h4>width="150px"로 지정한 이미지</h4>
  <img src="../img/Shark.PNG" width="150px">
</body>
</html>