링크와 이미지

웹을 웹답게 만드는 핵심은 링크입니다. 그리고 이미지는 콘텐츠를 풍부하게 만들어 줍니다. 이번 강의에서는 a 태그의 다양한 사용법과 img, picture, figure로 이미지를 다루는 방법을 배웁니다.

학습 목표

• a 태그로 페이지, 위치, 메일, 전화 링크를 만든다.
• 절대 경로와 상대 경로의 차이를 이해한다.
• target과 보안 속성을 올바르게 사용한다.
• img의 alt와 picture, figure를 활용한다.

링크 만들기

a 태그의 href 속성에 이동할 주소를 적습니다.

<a href="https://example.com">외부 사이트</a>
<a href="/about">소개 페이지</a>
<a href="#contact">페이지 안 위치로 이동</a>
<a href="mailto:hi@example.com">메일 보내기</a>
<a href="tel:+82212345678">전화 걸기</a>

#contact처럼 #으로 시작하면 같은 페이지 안에서 해당 id를 가진 요소로 이동합니다.

절대 경로와 상대 경로

절대 경로는 https://로 시작하는 전체 주소이거나 /로 시작하는 사이트 루트 기준 경로입니다. 상대 경로는 현재 문서의 위치를 기준으로 합니다.

💡 TIP — 같은 사이트 안의 이동은 루트 기준 절대 경로(/blog)를 쓰면 문서가 어느 폴더에 있어도 동일하게 동작해 관리가 편합니다.

target과 보안

새 탭에서 링크를 열려면 target="_blank"를 사용합니다. 이때 보안과 성능을 위해 rel="noopener noreferrer"를 함께 적는 것이 좋습니다.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  새 탭에서 열기
</a>

⚠️ 주의 — target="_blank"만 쓰고 rel을 생략하면, 열린 페이지가 window.opener로 원래 페이지를 조작할 수 있는 보안 위험이 있습니다.

이미지 넣기

이미지는 img 태그로 넣습니다. src는 이미지 주소, alt는 이미지를 설명하는 대체 텍스트입니다.

<img src="/images/cat.jpg" alt="창가에 앉아 있는 고양이" width="400" height="300" />

alt는 이미지가 보이지 않을 때(로딩 실패, 스크린 리더 사용)를 위한 텍스트입니다. 장식용 이미지라면 alt=""로 비워서 보조 기기가 건너뛰게 합니다.

💡 TIP — width와 height를 명시하면 브라우저가 이미지 영역을 미리 확보해 레이아웃이 갑자기 밀리는 현상(CLS)을 줄일 수 있습니다.

picture로 반응형 이미지

화면 크기나 형식에 따라 다른 이미지를 보여 주려면 picture를 사용합니다.

<picture>
  <source media="(max-width: 600px)" srcset="/images/cat-small.jpg" />
  <source type="image/webp" srcset="/images/cat.webp" />
  <img src="/images/cat.jpg" alt="고양이" />
</picture>

브라우저는 위에서부터 조건에 맞는 source를 고르고, 맞는 것이 없으면 마지막 img를 사용합니다.

figure와 figcaption

이미지에 설명(캡션)을 붙이려면 figure와 figcaption을 사용합니다.

<figure>
  <img src="/images/chart.png" alt="2024년 매출 추이 그래프" />
  <figcaption>그림 1. 2024년 분기별 매출</figcaption>
</figure>

요약

• 링크는 a href로 만들고, #은 페이지 내 위치, mailto:/tel:은 특수 동작입니다.
• 같은 사이트는 루트 기준 절대 경로가 관리하기 편합니다.
• target="_blank"에는 rel="noopener noreferrer"를 함께 씁니다.
• img의 alt는 필수이며, 장식 이미지는 alt=""로 둡니다.
• 반응형은 picture, 캡션은 figure+figcaption을 사용합니다.

연습문제

1. 새 탭에서 열리는 외부 사이트 링크를 보안 속성과 함께 작성하세요.
2. 같은 페이지의 id="top" 요소로 이동하는 링크를 작성하세요.
3. 로고 이미지를 알맞은 alt와 함께 넣으세요.
4. 사진과 캡션을 묶어 표현하세요.

힌트 — #은 페이지 내 이동, figure는 캡션이 필요한 이미지에 사용합니다.