이미지와 미디어

🎯 학습 목표

이 강을 마치면 여러분은 웹 페이지에 그림(이미지)을 넣고, 동영상과 소리까지 삽입할 수 있게 됩니다. 지금까지는 글자만 다뤘지만, 이번 강에서 시각·청각 요소를 더하면 페이지가 훨씬 풍부하고 생생해집니다. 특히 이미지를 다루면서 '파일 경로'라는 중요한 개념도 함께 익힙니다.

구체적으로는 세 가지를 배웁니다. 첫째, 그림을 넣는 img 태그와 그 핵심 속성 src·alt를 익힙니다. 둘째, 이미지 파일을 찾아가는 경로 지정법을 이해합니다. 셋째, video와 audio 태그로 미디어를 넣는 기본을 살펴봅니다.

🖼️ 이미지 넣기 — img 태그와 src

이 섹션에서는 그림을 화면에 띄우는 img 태그를 살펴보겠습니다.

웹 페이지에 사진이나 그림을 넣을 때는 <img> 태그를 씁니다. img는 'image(이미지)'의 줄임말입니다. 그런데 여기서 중요한 점이 있습니다. <img> 태그는 이미지 자체를 담고 있지 않습니다. 대신 '어떤 이미지 파일을 여기에 보여 줘'라고 가리키는 역할만 합니다. 그 '어떤 파일인지'를 알려 주는 것이 바로 src 속성입니다. src는 'source(원본)'의 줄임말로, 이미지 파일의 위치를 담습니다.

<img src="cat.jpg" alt="고양이 사진">

이 코드는 같은 폴더에 있는 cat.jpg라는 이미지 파일을 화면에 보여 줍니다. 한 가지 눈여겨볼 점은, <img>가 지난 강에서 배운 <br>처럼 닫는 태그가 없는 빈 요소라는 것입니다. 감쌀 내용 없이 그 자리에 이미지를 표시하는 역할만 하기 때문입니다. 그래서 <img ...> 하나로 끝나며, </img>는 쓰지 않습니다.

♿ 대체 텍스트 — alt 속성의 중요성

이 섹션에서는 위 코드에 함께 등장한 alt 속성을 살펴보겠습니다. 초보자가 자주 빠뜨리지만 매우 중요한 속성입니다.

alt는 'alternative text(대체 텍스트)'의 줄임말로, 이미지를 대신할 설명 글을 담습니다. 이 alt는 두 가지 중요한 역할을 합니다. 첫째, 어떤 이유로 이미지가 화면에 뜨지 않을 때(파일이 없거나 인터넷이 느릴 때) 그림 대신 이 설명 글이 표시됩니다. 둘째, 그리고 더 중요하게, 눈이 불편한 사람이 쓰는 화면 낭독기가 이 alt를 소리 내어 읽어 줍니다. 즉 alt는 이미지를 볼 수 없는 사람에게 그 내용을 전달하는 다리입니다.

그래서 alt에는 이미지의 내용을 구체적으로 적어야 합니다. 위 예시처럼 '고양이 사진'이라고 쓰면, 그림이 안 떠도 무엇을 담은 이미지인지 알 수 있습니다. 이렇게 모든 사람이 콘텐츠에 접근할 수 있도록 배려하는 것을 웹 접근성이라 하며, alt는 그 기본입니다. 이미지를 넣을 때는 습관처럼 alt를 함께 적는 것이 좋은 개발자의 자세입니다.

🗂️ 파일 경로 이해하기

이 섹션에서는 이미지를 다룰 때 반드시 알아야 할 파일 경로를 살펴보겠습니다. 이미지가 안 뜨는 문제의 대부분이 경로 때문입니다.

경로(path)란 파일이 어디에 있는지를 나타내는 주소입니다. src에 이 경로를 정확히 적어야 브라우저가 이미지를 찾을 수 있습니다. 경로는 크게 세 가지 경우가 있습니다.

첫째, 이미지가 HTML 파일과 같은 폴더에 있다면, 파일 이름만 적습니다. 예: src="cat.jpg". 둘째, 이미지가 하위 폴더에 있다면, 폴더 이름을 앞에 붙입니다. 예를 들어 images라는 폴더 안에 있다면 이렇게 적습니다.

<img src="images/cat.jpg" alt="고양이 사진">

이렇게 폴더를 /(슬래시)로 구분해 안으로 들어갑니다. 셋째, 인터넷의 다른 사이트에 있는 이미지를 가져올 수도 있습니다. 이때는 https://로 시작하는 전체 주소를 src에 적습니다. 실무에서는 보통 자기 폴더 안의 이미지를 쓰므로, 첫째와 둘째 경우를 잘 익혀 두는 것이 중요합니다.

참고로, 이미지의 크기는 width와 height 속성으로 지정할 수 있습니다. 예를 들어 width="300"이라고 하면 너비가 300픽셀이 됩니다. 다만 크기와 모양을 세밀하게 다루는 것은 나중에 배울 CSS가 더 잘하므로, 지금은 '이런 속성도 있다' 정도로만 알아 두면 됩니다.

🎬 동영상과 소리 — video와 audio

이 섹션에서는 그림을 넘어 동영상과 소리를 넣는 태그를 살펴보겠습니다.

동영상은 <video> 태그로 넣습니다. 이미지와 달리 동영상은 재생·정지 같은 조작이 필요하므로, controls라는 속성을 넣어 재생 버튼 등의 조작 막대를 표시합니다.

<video src="movie.mp4" controls width="400">
  동영상을 지원하지 않는 브라우저입니다.
</video>

여기서 controls는 값 없이 이름만 쓰는 속성으로, 이것이 있으면 재생·일시정지·음량 조절 막대가 나타납니다. 태그 사이에 적은 글자('동영상을 지원하지 않는...')는 혹시 브라우저가 동영상을 못 틀 때 대신 보여 줄 안내 문구입니다.

소리(음악·오디오)는 <audio> 태그로 넣으며, 사용법은 video와 거의 같습니다.

<audio src="song.mp3" controls></audio>

이렇게 하면 재생 버튼이 있는 작은 오디오 플레이어가 나타납니다. video와 audio 모두 src로 파일을 지정하고 controls로 조작 막대를 켜는 방식이 같으니, 하나를 익히면 다른 하나도 쉽게 쓸 수 있습니다. 미디어 파일의 경로 역시 이미지와 똑같은 규칙을 따릅니다.

⚠️ 자주 하는 실수

이 섹션에서는 이미지·미디어를 다룰 때 흔한 실수를 정리하겠습니다.

첫 번째, 경로 오류로 이미지가 안 뜨는 것입니다. 이미지가 깨진 아이콘으로 나온다면 십중팔구 src 경로가 틀린 것입니다. 파일 이름의 철자와 대소문자, 확장자(.jpg인지 .png인지), 폴더 이름이 정확한지 확인하세요. 경로는 매우 예민해서 한 글자만 틀려도 이미지를 못 찾습니다.

두 번째, alt를 빠뜨리는 것입니다. alt 없는 이미지는 접근성이 떨어지고, 이미지가 안 뜰 때 아무 정보도 주지 못합니다. 사소해 보여도 반드시 넣는 습관을 들이세요.

세 번째, img에 닫는 태그를 붙이는 것입니다. <img>는 빈 요소이므로 </img>가 필요 없습니다. 지난 강의 br·hr과 마찬가지라는 점을 떠올리면 됩니다.

📝 핵심 요약

이번 강에서는 이미지와 미디어를 배웠습니다.

• img와 src — 이미지는 img 태그로 넣고, 보여 줄 파일의 위치는 src 속성이 가리킵니다. img는 닫는 태그가 없는 빈 요소입니다.
• alt — 이미지의 대체 설명으로, 이미지가 안 뜰 때 표시되고 화면 낭독기가 읽어 줍니다. 접근성을 위해 꼭 적습니다.
• 경로 — 같은 폴더는 파일 이름, 하위 폴더는 '폴더명/파일명', 외부는 전체 주소로 지정합니다. 경로 오류가 이미지 문제의 주원인입니다.
• video와 audio — 동영상·소리를 넣는 태그로, src로 파일을 지정하고 controls로 재생 조작 막대를 표시합니다.

이제 페이지에 글과 목록, 링크, 그리고 이미지·미디어까지 넣을 수 있게 되었습니다. 다음 강에서는 데이터를 행과 열로 정리해 보여 주는 표를 만들어 보겠습니다. 다음 강 「표 만들기」에서 이어가겠습니다.

📚 참고 자료

• <img> 이미지 요소(src·alt) — MDN Web Docs
• <video> 동영상 요소 — MDN Web Docs
• <audio> 오디오 요소 — MDN Web Docs