[HTML] 07. 링크(a)와 이미지(img) 완전 정리

[HTML] 07. 링크(a)와 이미지(img) 완전 정리

웹(Web)의 본질은 연결입니다.
그 연결을 담당하는 태그가 바로 a 태그입니다.

그리고 시각적인 정보를 전달하는 핵심 요소가 img 태그입니다.

---

1. a 태그 (Anchor)

a는 anchor(닻)라는 의미입니다.
현재 문서를 다른 문서와 연결하는 역할을 합니다.

기본 구조

<a href="이동할주소">링크텍스트</a>

예제

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

Output

구글로 이동

---

2. href 속성의 의미

href는 Hypertext Reference의 약자입니다.

• 절대경로 → https://example.com
• 상대경로 → /about.html
• 같은 페이지 내부 이동 → #section1

내부 이동 예제

<a href="#bottom">맨 아래로 이동</a>

<div id="bottom">여기가 맨 아래</div>

---

3. target 속성

링크를 새 창에서 열고 싶다면 target 속성을 사용합니다.

<a href="https://google.com" target="_blank">
  새 창에서 열기
</a>

• _self → 현재 창 (기본값)
• _blank → 새 창

실무에서는 보안상 rel="noopener noreferrer"를 함께 사용합니다.

---

4. img 태그

img는 이미지를 삽입하는 태그입니다.
빈 요소(Empty Element)입니다.

기본 구조

<img src="이미지경로" alt="이미지설명">

• src → 이미지 파일 경로
• alt → 이미지 설명 (매우 중요)

---

5. alt 속성이 중요한 이유

alt는 단순 설명이 아닙니다.

• 이미지가 로딩 실패 시 대체 텍스트 표시
• 시각 장애인용 스크린 리더 지원
• 검색 엔진이 이미지 이해

즉, alt는 접근성과 SEO에 매우 중요합니다.

---

6. 이미지 크기 지정

<img src="image.jpg" width="200" height="150">

실무에서는 보통 CSS로 크기를 조정합니다.

---

7. 링크 안에 이미지 넣기

이미지를 클릭하면 이동하게 만들 수 있습니다.

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

이 구조는 로고 클릭 시 홈으로 이동하는 기능에서 자주 사용됩니다.

---

8. 실무에서 자주 하는 실수

• alt 속성 생략
• 빈 링크 (<a href="#">)
• 이미지 경로 오류
• target="_blank"에 rel 미작성

---

9. 핵심 정리

• a 태그는 웹의 연결을 담당한다
• href는 이동 주소
• img는 빈 요소이다
• alt는 반드시 작성
• 링크 + 이미지 조합은 매우 자주 사용된다

이제 웹의 기본 기능은 모두 이해한 상태입니다.