링크와 이미지

웹이 '웹'인 이유는 페이지들이 서로 연결되어 있기 때문이다. 그 연결을 만드는 태그가 <a>고, 텍스트 외에 시각적인 콘텐츠를 넣는 태그가 <img>다. 이 둘은 거의 모든 웹 페이지에서 빠지지 않는다.

---

링크 — a

<a> 태그는 다른 페이지나 위치로 이동하는 하이퍼링크를 만든다.

<a href="https://example.com">외부 사이트로 이동</a>
<a href="about.html">같은 폴더의 다른 페이지</a>
<a href="../index.html">상위 폴더의 파일</a>

• href — 이동할 주소 (HyperText REFerence)
• https://로 시작하면 외부 URL, 그냥 파일명이면 상대 경로

target 속성

<!-- 현재 탭에서 열기 (기본값) -->
<a href="https://example.com">링크</a>

<!-- 새 탭에서 열기 -->
<a href="https://example.com" target="_blank">새 탭으로 열기</a>

target="_blank"를 쓸 때는 보안상 rel="noopener noreferrer"를 함께 쓰는 것이 권장된다.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">안전한 새 탭 링크</a>

페이지 내부 이동

같은 페이지 안의 특정 위치로 이동할 수 있다. 이동할 목적지에 id를 붙이고, href에 #id명을 쓴다.

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

...

<h2 id="section2">2번 섹션</h2>

이메일, 전화 링크

<a href="mailto:hello@example.com">이메일 보내기</a>
<a href="tel:010-1234-5678">전화 걸기</a>

---

이미지 — img

<img>는 이미지를 삽입하는 빈 요소다. 닫는 태그가 없다.

<img src="photo.jpg" alt="강아지 사진">

• src — 이미지 파일 경로 (source)
• alt — 이미지를 불러오지 못했을 때 표시할 대체 텍스트 (alternative text)

alt는 접근성을 위해 반드시 작성해야 한다. 시각 장애인이 쓰는 스크린 리더가 alt 텍스트를 읽어준다. 이미지가 단순 장식이라면 alt=""로 비워두는 것이 맞다.

크기 설정

<img src="photo.jpg" alt="사진" width="400" height="300">

HTML 속성으로 크기를 지정할 수 있지만, 실제로는 CSS로 조절하는 경우가 더 많다.

경로 작성법

<!-- 같은 폴더 -->
<img src="photo.jpg" alt="사진">

<!-- 하위 폴더 -->
<img src="images/photo.jpg" alt="사진">

<!-- 상위 폴더 -->
<img src="../photo.jpg" alt="사진">

<!-- 외부 URL -->
<img src="https://example.com/photo.jpg" alt="사진">

---

이미지에 링크 걸기

<a> 안에 <img>를 넣으면 이미지를 클릭했을 때 링크로 이동한다.

<a href="https://example.com">
  <img src="banner.jpg" alt="배너 이미지">
</a>

---

링크는 페이지를 연결하고, 이미지는 내용을 시각적으로 전달한다. 이 두 태그만으로도 웹의 기본적인 탐색 구조를 만들 수 있다.