HTML에서 특정 위치로 이동하는 방법 (# 앵커 링크 사용법)

홈 > 지식 > 프로그래밍 | 개발 지식과 코딩 학습 정보 >

목차

1. 이동할 요소에 id 부여

<div id="target-section">여기가 목표 섹션입니다.</div>

2. 해당 위치로 이동하는 링크 만들기

<a href="#target-section">목표 섹션으로 이동</a>

href="#target-section"
→ 같은 페이지 안에서 id="target-section" 위치로 스크롤 이동합니다.

1. 문서 구조

<h2 id="section1">
  섹션 제목
  <a href="#section1" style="text-decoration: none;">🔗</a>
</h2>

<p>본문 내용...</p>

2. 특징

  1. 주소창 해시(#) 표시

    • 링크를 클릭하면 URL 뒤에 #section1 또는 #section2가 자동으로 붙음
    • 페이지 공유 시, 같은 섹션으로 바로 이동 가능

  2. 간단한 구현

    • CSS 스타일 최소화 (text-decoration: none)
    • JavaScript 없이 HTML만으로 기능 구현 가능

  3. 사용자 경험

    • 제목 옆 🔗 아이콘 클릭 → 페이지 해당 섹션으로 이동
    • 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. 활용 방법

📚 프로그래밍 | 개발 지식과 코딩 학습 정보 지식 글 목록
💬