<img>태그

별초롱언니 2025. 3. 5. 17:31

▣ <img>태그

· 웹 문서에 이미지 삽입 시 사용

  <img src="pic.jpg" alt="image text" width="100" height="150">
  <img src="pic.jpg" alt="image text" style="width: 100px;" height="150px">
  <img src="pic.jpg" alt="image text" title="이미지 설명" style="float: right;">

▣ <img> 태그 속성

· src : 이미지 파일이 저장도니 경로 지정

·alt : 이미지를 웹 브라우저에서 표시하지 못했을 경우 표시되는 대체 텍스트 지정

· width/height : 이미지의 가로, 세로 길이를 픽셀 단위로 지정(% 단위를 사용하면 웹 브라우저의 크기에 따라 이미지 크기가 조절되도록 지정할 수 있음)

· style : 이미지의 스타일(크기, 위치 등)을 픽셀 단위로 지정

· border : 이미지 경계선의 두께를 픽셀 단위로 지정

♧ 이미지 삽입하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>이미지 기본 표현</title>
</head>
<body>

  <h3>이미지 기본 표현</h3>
  <img src="../ch03/dog.jpg" alt="이미지가 표시되지 않습니다.">

  <h3>이미지에 설명 추가 & 오른쪽 정렬</h3>
  <img src="../ch03/dog.jpg" title="너모 귀엽짜냐아ㅏ" style="float: right;">

  <h3>이미지의 크기를 픽셀 단위로 조정</h3>
  <img src="./dog2.jpg" style="width: 250px; height: 280px;">
  
  <h3>이미지의 크기를 % 단위로 조정</h3>
  <img src="../dog1.jpg" width="50%" height="40%">

</body>
</html>

title작성하면 마우스 커서를 이미지에 올리면 title 내용 확인가능

♧ 이미지에 링크 걸기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>이미지에 링크 걸기</title>
</head>
<body>

  <h3>이미지를 클릭하세요.</h3>

  <a href="http://www.w3.org" target="_blank">
    <img src="dog2.jpg" alt="강아지 사진" title="사랑스런 강아지" border="2" style="width: 100px; height: 110px;">
  </a>

  <a href="http://cafe.naver.com/go2web" target="_blank">
    <img src="../ch03/dog.jpg" alt="저자 홈페이지로 이동" border="2" style="width: 100px; height: 110px;">
  </a>

  <a href="http://en.wikipedia.org/wiki/lsaac_Newton" target="_blank">
    <img src="../dog1.jpg" alt="newton site" title="뉴턴 홈페이지로 이동" border="2" style="width: 100px; height: 110px;">
  </a>

</body>
</html>

♧ 이미지에 제목 붙이기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>이미지에 제목 붙이기</title>
</head>
<body>
  <h3>이미지에 제목 추가하기</h3>
  <figure>
    <img src="dog2.jpg" alt="강아지 사진1" title="사랑스러운 강아지">
    <figcaption>[그림1]하늘리본 강아지</figcaption>
  </figure>
  <figure>
    <figcaption>[그림2]빨강리본 강아지</figcaption>
    <img src="../ch03/dog.jpg" alt="강아지 사진2" title="이쁜 강아지">
  </figure>
</body>
</html>