HTML 이미지: src, alt, 크기를 사용하여 삽입 및 스타일링 배우기

소개

이미지는 현대 웹 페이지의 필수적인 부분으로, 콘텐츠를 더욱 흥미롭고 시각적으로 매력적으로 만듭니다. HTML 에서 이미지는 <img> 태그를 사용하여 문서에 포함됩니다. 이 태그는 강력하며 이미지의 소스, 크기 및 접근성을 제어하는 여러 속성을 제공합니다.

이 실습에서는 웹 페이지에 이미지를 표시하는 방법을 배우게 됩니다. 기본적인 이미지를 삽입하는 것부터 시작하여 대체 텍스트 제공, 크기 설정, 툴팁 추가, 그리고 마지막으로 클릭 가능한 링크로 만드는 속성을 점진적으로 추가할 것입니다.

환경은 ~/project 디렉토리에 index.html 파일과 labex.svg라는 이미지 파일로 미리 구성되어 있습니다. 웹 서버도 실행 중이므로 "Web 8080" 탭에서 변경 사항을 실시간으로 미리 볼 수 있습니다.

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

이미지 소스를 위한 src 속성을 가진 img 태그 삽입

이 단계에서는 HTML 페이지에 이미지를 추가하는 방법을 배우게 됩니다. <img> 태그는 이미지를 포함하는 데 사용됩니다. 이 태그는 빈 태그 (empty tag) 로, 닫는 태그가 없습니다. <img> 태그에서 가장 중요한 속성은 src이며, 표시하려는 이미지의 경로를 지정합니다.

먼저, 왼쪽에 있는 파일 탐색기를 사용하여 ~/project 디렉토리에 있는 index.html 파일을 엽니다.

이제 <body> 섹션 내에서  주석 바로 아래에 <img> 태그를 추가합니다. src 속성을 프로젝트 디렉토리에 제공된 이미지 파일인 labex.svg로 설정합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" />
  </body>
</html>

코드를 추가한 후 파일을 저장합니다. 결과를 보려면 실습 환경 상단의 Web 8080 탭으로 전환하세요. 페이지에 LabEx 로고가 표시되는 것을 볼 수 있습니다.

이미지 설명을 위한 alt 속성 추가

이 단계에서는 <img> 태그에 alt 속성을 추가합니다. alt 속성은 이미지에 대한 대체 텍스트를 제공합니다. 이 텍스트는 어떤 이유로든 이미지를 로드할 수 없을 때 표시됩니다. 더 중요하게는, 스크린 리더가 시각 장애가 있는 사용자에게 이미지를 설명하는 데 사용되어 웹사이트의 접근성을 높입니다.

index.html 파일의 <img> 태그를 수정하여 alt 속성을 포함시키세요. 좋은 alt 텍스트는 이미지에 대한 간결한 설명이어야 합니다.

<img src="labex.svg" alt="LabEx Logo" />

이제 완성된 index.html 파일은 다음과 같아야 합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" alt="LabEx Logo" />
  </body>
</html>

파일을 저장하세요. 이미지가 올바르게 로드되고 있으므로 Web 8080 탭에서 시각적인 변화는 없을 것입니다. 하지만 alt 속성을 추가하는 것은 웹 개발에서 매우 중요한 모범 사례입니다.

이미지 크기 지정을 위한 width 및 height 속성 설정

이 단계에서는 width 및 height 속성을 사용하여 이미지 크기를 제어하는 방법을 배우게 됩니다. 기본적으로 브라우저는 이미지를 원본 크기로 표시합니다. width 및 height를 지정하면 이미지를 크기 조절할 수 있으며, 브라우저가 이미지를 로드하기 전에 올바른 공간을 예약하여 페이지 레이아웃이 변경되는 것을 방지하는 데 도움이 됩니다.

이미지 너비를 200 픽셀로, 높이를 50 픽셀로 설정해 보겠습니다. index.html 파일의 <img> 태그에 width 및 height 속성을 추가합니다.

<img src="labex.svg" alt="LabEx Logo" width="200" height="50" />

이제 전체 index.html 파일은 다음과 같습니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" alt="LabEx Logo" width="200" height="50" />
  </body>
</html>

파일을 저장하고 Web 8080 탭으로 전환하세요. 지정한 크기로 이미지가 조절된 것을 확인할 수 있습니다.

이미지 툴팁을 위한 title 속성 사용

이 단계에서는 <img> 태그에 title 속성을 추가합니다. title 속성은 요소에 대한 추가 정보를 제공합니다. 이미지의 경우, 이 정보는 일반적으로 사용자가 이미지 위로 마우스를 가져갔을 때 툴팁으로 표시됩니다.

사용자에게 클릭 시 어떤 일이 발생할지에 대한 힌트를 주기 위해 이미지에 제목을 추가해 보겠습니다 (다음 단계에서 구현할 예정입니다). index.html 파일의 <img> 태그에 title 속성을 추가합니다.

<img
  src="labex.svg"
  alt="LabEx Logo"
  width="200"
  height="50"
  title="Go to LabEx Homepage"
/>

이제 index.html 파일은 다음 코드를 포함해야 합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img
      src="labex.svg"
      alt="LabEx Logo"
      width="200"
      height="50"
      title="Go to LabEx Homepage"
    />
  </body>
</html>

파일을 저장하고 Web 8080 탭을 새로고침하세요. 이제 이미지 위로 마우스 커서를 이동하면 "Go to LabEx Homepage"라는 텍스트가 포함된 작은 상자가 나타날 것입니다.

클릭 가능한 이미지 링크를 위해 img 를 a 태그로 감싸기

마지막 단계에서는 이미지를 클릭 가능한 링크로 만들 것입니다. 이를 위해 <img> 태그를 앵커 태그 <a>로 감싸야 합니다. <a> 태그는 하이퍼링크를 정의하며, href 속성은 링크가 이동할 페이지의 URL 을 지정합니다.

기존 <img> 태그를 <a> 태그로 감싸세요. <a> 태그의 href 속성을 https://labex.io로 설정합니다.

<a href="https://labex.io">
  <img
    src="labex.svg"
    alt="LabEx Logo"
    width="200"
    height="50"
    title="Go to LabEx Homepage"
  />
</a>

최종 index.html 파일은 다음과 같이 보일 것입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <a href="https://labex.io">
      <img
        src="labex.svg"
        alt="LabEx Logo"
        width="200"
        height="50"
        title="Go to LabEx Homepage"
      />
    </a>
  </body>
</html>

파일을 저장하고 Web 8080 탭으로 이동하세요. 이미지 위로 마우스를 가져가면 마우스 커서가 포인터로 변경되어 링크임을 나타내는 것을 볼 수 있습니다. 이미지를 클릭하면 LabEx 홈페이지로 이동을 시도합니다.

요약

실습을 완료하신 것을 축하드립니다! HTML 에서 이미지를 다루는 방법을 성공적으로 배우셨습니다.

이번 실습에서는 다음의 핵심 개념들을 다루었습니다.

<img> 태그를 사용하여 이미지 삽입하기.
src 속성으로 이미지 소스 지정하기.
alt 속성으로 접근성을 위한 대체 텍스트 제공하기.
width 및 height 속성으로 이미지 크기 제어하기.
title 속성으로 툴팁 추가하기.
<a> 태그로 이미지를 감싸 클릭 가능한 링크로 만들기.

이러한 기술들은 풍부하고 상호작용적인 웹 페이지를 만드는 데 필수적입니다. 이제 앞으로의 HTML 프로젝트에서 이미지를 자신 있게 추가하고 관리할 수 있습니다.