Web Programming/HTML

[HTML] 링크와 이미지 <a>, <img>

개발로 먹고살자 2025. 4. 13. 20:07

웹 페이지를 만들다 보면 다른 페이지로 연결하거나 이미지를 표시하는 기능이 꼭 필요합니다.

이럴 때 사용하는 대표적인 태그가 바로 <a> 태그와 <img> 태그입니다.

두 태그는 HTML에서 매우 기본적이면서도 중요한 역할을 합니다.

이번 글에서는 이 두 가지 태그의 기본 사용법부터 자주 쓰이는 속성까지 정리해보겠습니다.

✨ 링크를 만드는 <a> 태그

HTML의 <a> 태그는 "anchor"(앵커)에서 유래한 것입니다.

Anchor는 원래 "닻"이라는 뜻인데요. HTML에서는 이 "닻"을 내리는 지점처럼,

웹 문서 내 특정 위치나 다른 페이지로 연결하는 지점을 만들기 위해 이 용어를 사용했습니다.

<a> 태그는 다른 페이지나 사이트, 또는 같은 페이지 안의 특정 위치로 이동할 수 있는

하이퍼링크를 만들어주는 태그입니다.

<a href="http://www.google.com">구글로 이동</a>
<a href="http://www.google.com" target="_blank">구글 새창으로 이동</a>

위 코드를 사용하면 '구글로 이동'이라는 문구를 클릭했을 때 구글 사이트로 이동하게 됩니다.

🔹 주요 속성 정리

  • href: 연결할 주소(URL)를 지정합니다.
  • title: 마우스를 올렸을 때 나타나는 툴팁
  • download: 클릭 시 링크된 파일을 다운로드
  • target: 링크를 여는 방식 지정
    • _blank: 새 창 또는 새 탭에서 열기
    • _self: 현재 탭(기본값)에서 열기
<a href="sample.pdf" download>PDF 다운로드</a>

🔹 페이지 내부로 이동하는 앵커 링크

같은 페이지 내에서 특정 위치로 이동하고 싶을 때는 아래와 같이 사용합니다.

<a href="#section2">두 번째 섹션으로 이동</a>

<!-- 해당 위치에 id를 설정 -->
<h2 id="section2" style="margin-top: 100vh">두 번째 섹션</h2>

✨ 이미지를 표시하는 <img> 태그

<img> 태그는 웹 페이지에 이미지를 삽입할 때 사용합니다. 이 태그는 닫는 태그 없이 단독으로 사용합니다.

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

위 코드는 cat.jpg라는 이미지를 불러오며, 이미지를 불러올 수 없는 경우 "귀여운 고양이"라는 텍스트가 대체로 표시됩니다.

🔹 주요 속성 정리

  • src: 이미지 경로(필수)
  • alt: 대체 텍스트 (시각장애인용 스크린리더, 이미지 로딩 실패 시 사용)
  • width, height: 이미지 크기 설정 (단위 없이 숫자만 쓰면 px 단위로 처리됨)
  • title: 마우스를 올리면 툴팁 표시
<img src="logo.png" alt="사이트 로고" width="150" height="50">

🔹 외부 이미지 불러오기

웹 상에 있는 이미지 주소도 직접 삽입할 수 있습니다.

<img src="https://placehold.co/600x400" alt="외부 배너" />

✅ 링크와 이미지를 함께 사용하는 방법

이미지를 클릭했을 때 다른 페이지로 이동하게 만들 수도 있습니다. <a> 태그 안에 <img> 태그를 넣으면 됩니다.

<a href="https://www.youtube.com" target="_blank">
  <img
    src="https://placehold.co/600x400"
    alt="유튜브 바로가기"
    width="120"
  />
</a>

이렇게 하면 유튜브 로고를 클릭하면 새 탭에서 유튜브로 이동하게 됩니다.

✅ 마무리

<a> 태그와 <img> 태그는 웹을 구성하는 핵심적인 요소 중 하나입니다.

간단한 문법이지만, 속성의 조합을 어떻게 활용하느냐에 따라 웹 페이지의 편의성과 완성도가 크게 달라집니다.

반응형