소개
이미지는 현대 웹 페이지의 핵심 요소로, 콘텐츠를 더욱 매력적이고 시각적으로 돋보이게 만듭니다. HTML에서는 <img> 태그를 사용하여 문서에 이미지를 삽입합니다. 이 태그는 매우 강력하며 이미지의 소스, 크기, 접근성을 제어할 수 있는 여러 속성을 제공합니다.
이번 실습에서는 웹 페이지에 이미지를 표시하는 방법을 배웁니다. 기본적인 이미지를 삽입하는 것부터 시작하여, 대체 텍스트 제공, 크기 설정, 툴팁 추가, 그리고 마지막으로 이미지를 클릭 가능한 링크로 만드는 과정까지 단계별로 진행합니다.
실습 환경에는 ~/project 디렉토리에 index.html 파일과 labex.svg라는 이미지 파일이 미리 구성되어 있습니다. 웹 서버가 실행 중이므로 "Web 8080" 탭에서 변경 사항을 실시간으로 확인할 수 있습니다.
src 속성을 사용하여 img 태그 삽입하기
이 단계에서는 HTML 페이지에 이미지를 추가하는 방법을 배웁니다. <img> 태그는 이미지를 삽입하는 데 사용됩니다. 이 태그는 닫는 태그가 없는 빈(empty) 태그입니다. <img> 태그에서 가장 중요한 속성은 src이며, 이는 표시하려는 이미지의 경로를 지정합니다.
먼저 왼쪽의 파일 탐색기를 사용하여 ~/project 디렉토리에 있는 index.html 파일을 엽니다.
이제 <body> 섹션 내부, <!-- Image will be added here --> 주석 바로 아래에 <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 프로젝트에서 자신 있게 이미지를 추가하고 관리할 수 있습니다.
