HTML 이미지 삽입 마스터하기 - 웹 페이지에 이미지 추가 방법

소개

HTML <img> 태그는 웹 페이지에 이미지를 삽입하는 데 사용됩니다. 이는 닫는 태그가 없는 빈 태그입니다. src 속성은 필수이며 이미지의 경로 또는 URL 을 지정합니다. 다른 선택적 속성으로는 alt, title, height, width 등이 있습니다. 이 랩에서는 HTML <img> 태그를 사용하여 웹 페이지에 이미지를 삽입하는 방법을 배우게 됩니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스는 포트 8080 에서 실행되며, 오른쪽 하단의 'Go Live'를 클릭하세요. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

프로젝트 설정

첫 번째 단계는 "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> 태그를 사용하여 웹 페이지에 이미지를 추가하는 방법을 성공적으로 배웠습니다. 또한 이미지의 크기와 모양을 제어하기 위해 몇 가지 일반적인 속성을 사용하는 방법, 이미지 맵을 만들고 이미지를 배경으로 사용하는 방법도 배웠습니다.