링크와 이미지 — <a>와 <img> 태그 완전 정복

웹의 핵심은 연결이다

웹(Web)이라는 이름은 거미줄(spider web)에서 왔습니다. 수많은 페이지들이 링크로 거미줄처럼 연결되어 있기 때문이죠.

링크가 없었다면 웹은 단순한 문서 모음에 불과했을 겁니다. 링크 덕분에 유튜브 영상 아래 댓글에서 관련 영상으로, 블로그 글에서 참고 자료로 자유롭게 이동할 수 있습니다.

이번 편에서는 링크를 만드는 <a> 태그와 이미지를 넣는 <img> 태그를 배웁니다.

속성(Attribute)이란?

태그를 배우기 전에 속성(attribute) 개념을 먼저 이해해야 합니다.

태그에는 추가 정보를 넣을 수 있습니다. 그게 바로 속성입니다.

<태그이름 속성이름="속성값">내용</태그이름>

예를 들어:

<html lang="ko">

여기서 lang이 속성 이름이고, "ko"가 속성 값입니다.

속성은 여는 태그 안에 쓰고, 여러 개를 동시에 넣을 수도 있습니다.

<태그 속성1="값1" 속성2="값2">내용</태그>

링크 태그 — `<a>`

a는 anchor(닻) 의 줄임말입니다. 링크가 다른 페이지에 "닻을 내리고" 연결한다는 의미입니다.

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

href: Hypertext Reference의 줄임말. 이동할 주소를 씁니다.
태그 사이의 텍스트가 클릭 가능한 링크로 표시됩니다 (기본적으로 파란색 밑줄).

새 탭에서 열기

target="_blank" 속성을 추가하면 링크를 클릭할 때 새 탭에서 열립니다.

<a href="https://www.youtube.com" target="_blank">유튜브 (새 탭)</a>

보안을 위해 외부 링크에는 rel="noopener noreferrer" 도 함께 쓰는 게 좋습니다.

<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">
  유튜브
</a>

같은 폴더의 다른 파일로 이동

웹사이트 안의 다른 페이지로 이동할 때는 파일 이름을 씁니다.

my-web/
├── index.html
├── about.html
└── contact.html

<!-- index.html에서 about.html로 링크 -->
<a href="about.html">소개 페이지</a>
<a href="contact.html">연락처</a>

페이지 안에서 이동 (앵커 링크)

같은 페이지 안의 특정 위치로 이동할 수도 있습니다. 이동할 요소에 id 속성을 주고 링크에 #id이름을 씁니다.

<!-- 링크 -->
<a href="#contact">연락처로 바로 가기</a>

<!-- 이동할 목적지 -->
<h2 id="contact">연락처</h2>
<p>이메일: hello@example.com</p>

이미지 태그 — `<img>`

<img src="고양이.jpg" alt="귀여운 고양이 사진" />

<img> 태그는 닫는 태그가 없는 빈 요소(void element) 입니다.

속성	역할
`src`	이미지 파일 경로 또는 URL
`alt`	이미지를 설명하는 대체 텍스트
`width`	이미지 너비 (px 또는 %)
`height`	이미지 높이 (px)

src — 이미지 경로

로컬 파일 (같은 폴더에 있는 이미지):

<img src="dog.jpg" alt="강아지" />
<img src="images/cat.png" alt="고양이" />

외부 URL (인터넷의 이미지):

<img src="https://picsum.photos/300/200" alt="랜덤 사진" />

alt — 절대 빠뜨리면 안 되는 속성

alt(alternative text)는 이미지를 설명하는 텍스트입니다.

이미지가 로딩되지 않을 때, 또는 시각 장애인이 스크린 리더로 웹을 탐색할 때 이 텍스트를 읽어줍니다. 검색 엔진도 alt 텍스트를 읽어 이미지 내용을 파악합니다.

<!-- 좋은 예 -->
<img src="puppy.jpg" alt="공원에서 뛰어노는 골든 리트리버 강아지" />

<!-- 나쁜 예 -->
<img src="puppy.jpg" alt="이미지" />
<img src="puppy.jpg" alt="" />  <!-- 장식용 이미지가 아닌데 비워두면 안 됨 -->

이미지 크기 설정

<!-- 픽셀로 지정 -->
<img src="photo.jpg" alt="사진" width="300" height="200" />

<!-- 너비만 지정하면 비율 유지 -->
<img src="photo.jpg" alt="사진" width="100%" />

이미지를 링크로 만들기

<a> 태그 안에 <img> 태그를 넣으면 이미지를 클릭하면 이동하는 링크가 됩니다.

<a href="https://www.naver.com">
  <img src="naver-logo.png" alt="네이버 홈페이지로 이동" />
</a>

직접 해보기 ✏️

아래 조건을 모두 충족하는 HTML 파일을 만들어 보세요.

제목: "내가 좋아하는 것들"
좋아하는 유튜브 채널 3개를 링크로 만들기 (새 탭에서 열리도록)
좋아하는 가수나 게임 캐릭터 이미지 1개 넣기 (인터넷 이미지 URL 사용 가능)
이미지에 적절한 alt 텍스트 설정하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>내가 좋아하는 것들</title>
</head>
<body>
  <h1>내가 좋아하는 것들</h1>

  <h2>즐겨보는 유튜브 채널</h2>
  <!-- 여기에 링크 3개 작성 -->

  <h2>좋아하는 캐릭터</h2>
  <!-- 여기에 이미지 작성 -->
</body>
</html>

정리

태그/속성	역할
`<a href="주소">`	링크
`target="_blank"`	새 탭에서 열기
`<img src="경로" alt="설명">`	이미지
`alt`	이미지 대체 텍스트 (항상 써야 함)

다음 편에서는 목록(<ul>, <ol>)과 표(<table>)로 정보를 구조화하는 방법을 배웁니다.