HTML 이미지 삽입, 기초지만 센스는 확실하게

콘텐츠 목차

HTML 이미지 삽입, 이것만 알면 됩니다!

웹페이지에 이미지를 넣는 일은 생각보다 단순해 보이지만, 막상 적용하려고 하면 오류가 나거나 예쁘게 정렬되지 않아서 당황할 때가 많습니다. 특히 초보자라면 이미지가 안 뜨거나 텍스트만 보이는 현상을 자주 경험하게 되죠.

하지만 핵심만 잘 잡으면 HTML에서 이미지 삽입은 그리 어렵지 않습니다. 지금부터 HTML 이미지 태그의 기본부터 활용까지, 꼭 알아야 할 5가지 핵심 포인트를 친절한 설명과 함께 정리해드릴게요.

HTML에서 이미지를 불러올 때 <img> 태그를 사용하지만, 가장 자주 발생하는 오류 중 하나는 이미지 경로가 잘못되어 이미지가 아예 보이지 않는 경우입니다.

이럴 땐 대체 텍스트(alt)가 중요한 역할을 하죠. 사용자가 이미지를 볼 수 없을 때 설명 문구가 대신 표시되기 때문에, 시각장애인을 위한 웹 접근성 측면에서도 꼭 필요합니다.

<img src="cat.jpg" alt="귀여운 고양이">

렌더링 결과:

(이미지가 안 뜰 경우 이렇게 텍스트만 표시됩니다)

이제 이미지 경로를 올바르게 지정하면 브라우저에 이미지가 정상 출력됩니다.

정상 출력된 고양이 이미지

title 속성은 마우스를 이미지 위에 올렸을 때 작은 툴팁으로 설명이 뜨도록 해주는 기능입니다. 예를 들어 이미지에 ‘이건 제가 쓰는 키보드예요!’라는 설명이 보이도록 하고 싶다면 아래처럼 작성하면 됩니다.

단, 이 기능은 PC 환경에서만 정상적으로 작동하며, 모바일 기기에서는 툴팁이 표시되지 않습니다. 그렇기 때문에 중요한 정보는 alt나 figcaption 속성으로 사용자에게 노출되도록 해주는 것이 바람직합니다.

<img src="keyboard.jpg" alt="키보드" title="이건 제가 쓰는 키보드예요!">

마우스를 올려보세요. (PC에서만 동작합니다)

단순히 이미지를 삽입하는 데서 끝나는 게 아니라, 그 아래에 설명을 붙이고 싶을 때가 많습니다. 이럴 때 <figure>와 <figcaption> 태그를 함께 쓰면 이미지에 제목 또는 설명을 달 수 있습니다.

이렇게 작성하면 시맨틱 웹 구조를 지키면서도 디자인적으로도 깔끔한 구성을 할 수 있어 SEO 측면에서도 유리하죠.


<figure>
  <img src="coffee.jpg" alt="커피 한 잔">
  <figcaption>아침에 마신 커피 한 잔</figcaption>
</figure>

이미지의 크기를 조절하고 싶을 땐 width나 height 속성을 직접 지정해주면 됩니다. 보통은 비율이 깨지지 않도록 하나의 속성만 지정하는 것이 일반적입니다. 예를 들어 width="200"은 가로 길이를 200픽셀로 고정하겠다는 뜻이죠.

<img src="dog.jpg" alt="귀여운 강아지" width="200">

강아지 이미지가 200px로 표시됩니다.

HTML에서는 <img> 태그 자체로는 정렬 속성이 없습니다. 그래서 이미지를 가운데 정렬하려면 <div style="text-align:center">를 감싸주는 방식으로 우회해야 합니다.

이것은 CSS를 몰라도 HTML 내에서 손쉽게 정렬하는 팁 중 하나로, 초보자에게 매우 유용합니다. 비유하자면 <div>는 작은 무대 같은 공간을 만들어주고, 그 안에 들어간 이미지에게 “중앙에 서 있어!”라고 지시하는 역할을 하는 셈입니다.


<div style="text-align:center">
  <img src="book.jpg" alt="책 이미지">
</div>

지금까지 HTML 이미지 삽입의 핵심 다섯 가지를 예제와 함께 살펴봤습니다. 이미지 하나만 잘 써도 웹 페이지의 인상이 완전히 달라질 수 있어요. 단순한 삽입을 넘어 사용자 친화적인 디자인, 접근성 고려, 다양한 장치 간 호환성을 함께 챙기는 것이 중요하죠.

앞으로 여러분이 블로그나 웹사이트를 만들 때 이미지 삽입에 자신감을 갖게 되길 바랍니다. 그리고 기억하세요. 오늘의 작은 팁 하나가, 내일의 멋진 웹페이지를 만드는 초석이 됩니다. 😉 다음 시간에는 CSS를 활용한 이미지 꾸미기로 이어가볼게요!