📄 HTML # 링크 예제 설명
1. 문서 구조
<h2 id="section1">
섹션 제목
<a href="#section1" style="text-decoration: none;">🔗</a>
</h2>
<p>본문 내용...</p>
<h2>: 제목 태그id="section1": 이 제목의 고유 식별자<a href="#section1">🔗</a>: 클릭 시 주소창에#section1이 붙고 해당 위치로 이동하는 앵커 링크
2. 특징
주소창 해시(#) 표시
- 링크를 클릭하면 URL 뒤에
#section1또는#section2가 자동으로 붙음 - 페이지 공유 시, 같은 섹션으로 바로 이동 가능
- 링크를 클릭하면 URL 뒤에
간단한 구현
- CSS 스타일 최소화 (
text-decoration: none) - JavaScript 없이 HTML만으로 기능 구현 가능
- CSS 스타일 최소화 (
사용자 경험
- 제목 옆 🔗 아이콘 클릭 → 페이지 해당 섹션으로 이동
- GitHub README 스타일의 링크 앵커와 동일한 UX
3. 예제 전체 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>간단 # 링크 예제</title>
</head>
<body>
<h2 id="section1">
섹션 제목
<a href="#section1" style="text-decoration: none;">🔗</a>
</h2>
<p>본문 내용...</p>
<h2 id="section2">
다른 섹션
<a href="#section2" style="text-decoration: none;">🔗</a>
</h2>
<p>다른 본문 내용...</p>
</body>
</html>
4. 활용 방법
- 문서 내 목차용 링크 생성
- 블로그, README, 문서 페이지에서 특정 섹션 공유
- CSS/JS 없이 최소한의 코드로 # 링크 지원 가능
