🔗
EPISODE 03
a · img · figure · 절대/상대 경로
링크와 이미지
웹 페이지를 연결하는 a 태그와 이미지를 삽입하는 img 태그, 그리고 figure/figcaption으로 의미 있는 미디어 묶음을 만드는 법을 익힙니다.
HTML링크이미지경로
소요 시간
⏱ 30~60분
난이도
📊 초보
선수 조건
🎯 html-02
결과물
내·외부 링크와 이미지를 자유롭게 배치한 페이지
이 강의에서 배우는 것
- 1a 태그와 href, target, rel 속성을 적절히 사용한다
- 2img 태그의 src, alt, width 속성을 다룬다
- 3절대경로와 상대경로를 구분한다
- 4figure/figcaption으로 이미지에 캡션을 단다
1. 링크 태그 (a)
기본 사용법
html
<a href="이동할 주소">링크 텍스트</a>href 속성
html
<a href="https://www.naver.com">외부 사이트</a>
<a href="about.html">같은 폴더 다른 파일</a>
<a href="../index.html">상위 폴더 파일</a>
<a href="#section2">페이지 내 앵커</a>
<a href="mailto:hong@example.com">이메일</a>
<a href="tel:010-1234-5678">전화 (모바일)</a>target 속성
html
<a href="https://www.google.com" target="_self">현재 탭 (기본)</a>
<a href="https://www.google.com" target="_blank">새 탭</a>rel 속성 — 보안
html
<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
안전한 새 탭 열기
</a>⚠️
target="_blank"를 쓸 때는 반드시 rel="noopener noreferrer"를 함께. 빠뜨리면 열린 페이지가 원래 페이지를 조작하는 보안 취약점이 발생할 수 있습니다.
2. 이미지 태그 (img)
html
<img src="photo.jpg" alt="서울 남산타워 사진">
<img src="logo.png" alt="회사 로고" width="200" height="100">
<img src="banner.jpg" alt="배너" width="800">src(필수), alt(필수), width/height. 가로만 지정하면 세로는 자동 비율 유지됩니다.
3. alt 속성이 중요한 이유
- 이미지 로딩 실패 시 alt 텍스트가 대신 표시됨
- 스크린리더가 시각장애인을 위해 alt 텍스트를 읽어줌
- 검색 엔진이 이미지의 내용을 alt로 파악 (SEO)
html
<!-- 순수 장식용은 alt를 비움 -->
<img src="decoration.png" alt="">
<!-- 의미 있는 이미지는 구체적으로 -->
<img src="chart.png" alt="2026년 1분기 매출 증가 그래프">4. 절대경로 vs 상대경로
절대경로
html
<img src="https://www.example.com/images/photo.jpg" alt="외부">
<img src="/images/logo.png" alt="서버 루트 기준">상대경로
text
프로젝트/
├── index.html ← 현재 파일
├── images/
│ └── logo.png
└── pages/
└── contact.htmlhtml
<!-- index.html 기준 -->
<img src="images/logo.png" alt="로고">
<a href="pages/contact.html">연락처</a>
<!-- pages/contact.html 기준 -->
<img src="../images/logo.png" alt="로고"> <!-- ../는 상위 폴더 -->5. figure와 figcaption
html
<figure>
<img src="https://picsum.photos/400/300" alt="랜덤 풍경 사진">
<figcaption>사진 1: 자연의 아름다운 풍경</figcaption>
</figure>이미지·코드 등 미디어와 캡션을 의미 있게 묶을 때 사용합니다.
6. 이미지 링크
html
<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
<img src="google-logo.png" alt="구글 홈페이지로 이동">
</a>