소개
HTML <img> 태그는 웹 페이지에 이미지를 삽입하는 데 사용됩니다. 이는 닫는 태그가 없는 빈 태그입니다. src 속성은 필수이며 이미지의 경로 또는 URL 을 지정합니다. 다른 선택적 속성으로는 alt, title, height, width 등이 있습니다. 이 랩에서는 HTML <img> 태그를 사용하여 웹 페이지에 이미지를 삽입하는 방법을 배우게 됩니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스는 포트 8080 에서 실행되며, 오른쪽 하단의 'Go Live'를 클릭하세요. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
프로젝트 설정
첫 번째 단계는 "html-img-tag-lab"이라는 새 디렉토리를 만들고, 그 안에 "index.html"이라는 파일을 만드는 것입니다. 코드 편집기에서 파일을 열고 다음 코드를 <head> 섹션에 추가합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Img Tag Lab</title>
</head>
<body></body>
</html>
웹 페이지에 이미지 추가하기
웹 페이지에 이미지를 추가하려면 이미지 파일이 필요합니다. 이 예제에서는 루트 디렉토리에 "images"라는 폴더 안에 "logo.png"라는 이미지가 있다고 가정해 보겠습니다. <img> 태그를 사용하여 이 이미지를 웹 페이지에 추가하려면 다음 코드를 <body> 섹션에 추가합니다.
<img src="images/logo.png" alt="Logo" />
이 코드에서 src 속성은 이미지 파일의 경로를 지정합니다. alt 속성은 어떤 이유로든 이미지를 로드할 수 없는 경우 표시되는 대체 텍스트를 제공합니다.
이미지에 추가 속성 추가하기
이미지의 모양과 동작을 제어하기 위해 여러 추가 속성을 추가할 수 있습니다. 다음은 가장 일반적인 속성 중 일부를 사용하는 방법을 보여주는 예입니다.
<img
src="images/logo.png"
alt="Logo"
width="200"
height="100"
title="My Website Logo"
/>
이 코드에서 width 및 height 속성은 이미지의 크기를 제어합니다. title 속성은 사용자가 이미지 위에 마우스를 올리면 툴팁을 제공합니다.
이미지 맵 사용하기
이미지 맵은 서로 다른 대상으로 연결되는 클릭 가능한 영역, 즉 "핫스팟"이 정의된 이미지입니다. 이미지 맵을 만들려면 각 핫스팟의 좌표와 연결할 URL 을 정의해야 합니다. 다음은 이미지 맵의 예입니다.
<img src="images/worldmap.gif" alt="World map" usemap="#worldmap" />
<map name="worldmap">
<area
shape="rect"
coords="0,0,100,100"
href="https://www.northamerica.com"
alt="North America"
/>
<area
shape="rect"
coords="100,0,200,100"
href="https://www.southamerica.com"
alt="South America"
/>
<area
shape="rect"
coords="200,0,300,100"
href="https://www.europa.com"
alt="Europe"
/>
<area
shape="rect"
coords="300,0,400,100"
href="https://www.asia.com"
alt="Asia"
/>
<area
shape="rect"
coords="400,0,500,100"
href="https://www.africa.com"
alt="Africa"
/>
</map>
이 코드에서 usemap 속성은 <map> 태그를 사용하여 정의된 맵의 이름을 지정합니다. 각 <area> 태그는 모양 (예: 사각형의 경우 "rect"), 좌표 및 연결할 URL 을 지정하여 핫스팟을 정의합니다.
이미지를 배경으로 추가하기
웹 페이지의 body 와 같은 HTML 요소의 배경으로 이미지를 사용할 수도 있습니다. 다음은 예시입니다.
<style>
body {
background-image: url("images/background.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
이 코드에서 background-image 속성은 이미지 파일의 경로를 지정하고, background-repeat 속성은 반복하지 않도록 설정합니다. background-size 속성은 전체 배경을 덮도록 이미지를 크기 조정합니다.
요약
축하합니다! HTML <img> 태그를 사용하여 웹 페이지에 이미지를 추가하는 방법을 성공적으로 배웠습니다. 또한 이미지의 크기와 모양을 제어하기 위해 몇 가지 일반적인 속성을 사용하는 방법, 이미지 맵을 만들고 이미지를 배경으로 사용하는 방법도 배웠습니다.
