HTML에서 링크와 이미지 넣는 방법

웹페이지를 만들 때 링크와 이미지는 거의 항상 사용됩니다.

다른 페이지로 이동할 때는 a 태그를 사용합니다.
이미지를 화면에 보여줄 때는 img 태그를 사용합니다.

이번 글에서는 HTML에서 링크와 이미지를 넣는 기본 방법을 정리합니다.

이 글에서 다루는 내용

링크 태그 a
href 속성
target 속성
이미지 태그 img
src와 alt 속성

1. 링크 태그: `a`

a 태그는 다른 페이지로 이동할 수 있는 링크를 만들 때 사용합니다.

<a href="https://www.google.com">구글로 이동</a>

화면에는 보통 다음처럼 보입니다.

구글로 이동

사용자가 이 글자를 클릭하면 href에 적힌 주소로 이동합니다.

a 태그는 다음처럼 이해하면 쉽습니다.

부분	의미
`a`	링크를 만드는 태그
`href`	이동할 주소
`구글로 이동`	화면에 보이는 글자

2. `href` 속성

href는 링크가 이동할 주소를 적는 속성입니다.

<a href="https://www.naver.com">네이버</a>

위 코드는 네이버로 이동하는 링크입니다.

내 사이트 안의 다른 페이지로 이동할 수도 있습니다.

<a href="/about">소개 페이지</a>
<a href="/posts/html-basic">HTML 기본 글</a>

정리하면 href는 링크의 목적지입니다.

3. `target` 속성

target 속성은 링크를 어디에서 열지 정할 때 사용합니다.

가장 자주 사용하는 값은 _blank입니다.

<a href="https://www.google.com" target="_blank">구글 새 탭에서 열기</a>

target="_blank"를 사용하면 링크가 새 탭에서 열립니다.

속성	의미
`target="_self"`	현재 탭에서 열기, 기본값
`target="_blank"`	새 탭에서 열기

외부 사이트로 이동할 때는 새 탭으로 열고 싶을 때가 많습니다.
그럴 때 target="_blank"를 사용할 수 있습니다.

<a href="https://developer.mozilla.org" target="_blank">
  MDN 문서 보기
</a>

외부 사이트를 새 탭으로 여는 예시에서는 아래처럼 rel 속성을 함께 적는 경우도 많습니다.

<a
  href="https://developer.mozilla.org"
  target="_blank"
  rel="noopener noreferrer"
>
  MDN 문서 보기
</a>

처음에는 target="_blank"의 의미만 알아도 충분합니다.

다만 외부 링크 예시를 보다 보면 rel="noopener noreferrer"가 같이 붙어 있는 경우가 많다는 점은 알아두면 좋습니다.

4. 이미지 태그: `img`

img 태그는 이미지를 화면에 보여줄 때 사용합니다.

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

img 태그는 닫는 태그가 없습니다.
즉, </img>를 작성하지 않습니다.

img 태그에서 중요한 속성은 src와 alt입니다.

속성	의미
`src`	이미지 파일 위치
`alt`	이미지를 설명하는 대체 텍스트

5. `src` 속성

src는 이미지 파일의 위치를 적는 속성입니다.

<img src="images/profile.png" alt="프로필 이미지">

위 코드는 images 폴더 안에 있는 profile.png 이미지를 화면에 보여줍니다.

외부 이미지 주소를 사용할 수도 있습니다.

<img src="https://example.com/image.jpg" alt="예시 이미지">

정리하면 src는 이미지의 위치입니다.

이미지가 보이지 않는다면 보통 src 경로가 잘못된 경우가 많습니다.

상대 경로와 절대 경로는 어떻게 다를까?

처음에는 이미지 경로가 특히 헷갈리기 쉽습니다.

<img src="images/profile.png" alt="프로필 이미지">

위 예시는 현재 파일 위치를 기준으로 images/profile.png를 찾는 상대 경로입니다.

<img src="/images/profile.png" alt="프로필 이미지">

위 예시는 사이트의 시작 위치를 기준으로 찾는 절대 경로 느낌의 경로입니다.

프로젝트 구조에 따라 어떤 방식이 맞는지는 달라질 수 있습니다.

중요한 것은 "지금 작성한 HTML 파일 기준으로 어디를 찾는가"를 생각하는 것입니다.

6. `alt` 속성

alt는 이미지를 설명하는 대체 텍스트입니다.

<img src="keyboard.jpg" alt="책상 위에 놓인 무선 키보드">

alt는 다음과 같은 상황에서 중요합니다.

이미지가 로딩되지 않았을 때 설명을 보여줌
스크린 리더가 이미지를 설명할 수 있음
검색 엔진이 이미지 내용을 이해하는 데 도움을 줌

좋지 않은 예시는 다음과 같습니다.

<img src="keyboard.jpg" alt="이미지">

이렇게 작성하면 어떤 이미지인지 알기 어렵습니다.

좋은 예시는 다음과 같습니다.

<img src="keyboard.jpg" alt="검은색 무선 키보드">

alt에는 이미지를 보지 못해도 내용을 이해할 수 있게 적는 것이 좋습니다.

좋은 `alt`와 아쉬운 `alt` 비교

아래처럼 쓰면 정보가 거의 없습니다.

<img src="study.png" alt="이미지">

반면 아래처럼 쓰면 어떤 장면인지 더 잘 전달됩니다.

<img src="study.png" alt="노트북 화면에 HTML 코드가 보이는 공부 장면">

즉 alt는 "이 이미지를 못 봐도 무슨 내용인지 알 수 있는가?"를 기준으로 쓰는 것이 좋습니다.

7. 링크 안에 이미지 넣기

이미지를 클릭했을 때 다른 페이지로 이동하게 만들 수도 있습니다.

이때는 a 태그 안에 img 태그를 넣으면 됩니다.

<a href="https://www.google.com" target="_blank">
  <img src="google-logo.png" alt="구글 로고">
</a>

위 코드는 이미지를 클릭하면 구글로 이동합니다.

구조를 보면 다음과 같습니다.

a 태그: 이동할 링크
└── img 태그: 클릭할 이미지

즉, a 태그가 링크 역할을 하고, img 태그가 화면에 보이는 이미지 역할을 합니다.

자주 헷갈리는 부분

`href`와 `src`를 섞어 쓰면 안 됩니다

href는 이동할 주소
src는 보여줄 파일 위치

즉 링크는 href, 이미지는 src라고 나눠서 기억하면 됩니다.

`target="_blank"`를 쓰면 새 탭에서 열린다는 점을 알아야 합니다

처음에는 클릭했는데 현재 탭이 아니라 새 탭으로 열려서 헷갈릴 수 있습니다.

이 동작은 실수라기보다 target="_blank"가 의도한 결과입니다.

이미지가 안 보이면 `src` 경로부터 먼저 확인하는 것이 좋습니다

태그 자체보다 파일 위치가 잘못된 경우가 더 많습니다.

특히 폴더 이름, 파일 이름, 상대 경로 기준을 자주 다시 확인하게 됩니다.

8. 전체 예시

아래는 링크와 이미지를 함께 사용한 HTML 예시입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>링크와 이미지 예시</title>
</head>
<body>
  <h1>HTML 링크와 이미지</h1>

  <h2>기본 링크</h2>
  <p>
    <a href="https://www.google.com">구글로 이동</a>
  </p>

  <h2>새 탭에서 열리는 링크</h2>
  <p>
    <a href="https://developer.mozilla.org" target="_blank">
      MDN 문서 보기
    </a>
  </p>

  <h2>이미지 넣기</h2>
  <img src="images/sample.jpg" alt="노트북으로 HTML을 공부하는 모습">

  <h2>이미지 링크</h2>
  <a href="/about">
    <img src="images/profile.png" alt="소개 페이지로 이동하는 프로필 이미지">
  </a>
</body>
</html>

정리

태그 또는 속성	의미	사용 예시
`a`	링크 생성	다른 페이지로 이동
`href`	링크 주소	`href="/about"`
`target`	링크를 여는 방식	새 탭에서 열기
`img`	이미지 표시	이미지를 화면에 출력
`src`	이미지 위치	`src="image.jpg"`
`alt`	이미지 설명	이미지 대체 텍스트

링크를 만들 때는 a 태그와 href 속성을 사용합니다.
이미지를 넣을 때는 img 태그와 src, alt 속성을 사용합니다.

특히 alt는 그냥 생략하지 않는 것이 좋습니다.
이미지를 설명하는 중요한 정보이기 때문입니다.

한 줄 요약

HTML에서 링크는 a 태그와 href로 만들고, 이미지는 img 태그와 src, alt로 화면에 표시합니다.

이미지 외에 영상과 오디오까지 함께 보고 싶다면 HTML에서 이미지, 영상, 오디오 넣기 글을 이어서 읽어보면 좋습니다.

태그와 속성의 차이를 먼저 정리하고 싶다면 HTML 태그, 요소, 속성 차이 쉽게 정리하기 글도 함께 보면 도움이 됩니다.

HTML에서 링크와 이미지 넣는 방법

이 글에서 다루는 내용

1. 링크 태그: a

2. href 속성

3. target 속성

4. 이미지 태그: img

5. src 속성