같은 페이지에서 특정섹션별로 다른 링크(앵커 링크) 설정 <section>태그

 

 

 

이 기능은 주로 목차를 만들때 이용하는 기능입니다   링크(앵커 링크)를 설정하려면 HTML의 ID 속성을 사용하여 각 섹션을 구분하고, URL의 #섹션ID를 활용하여 이동할 수 있습니다.

 

 

방법 1: HTML에서 섹션별 ID 설정

 

HTML 페이지 내부에서 각 섹션에 고유한 ID를 부여합니다.

 

 

section 1, section 2, section 3  이렇게 각각 섹션을 부여해서 한페이지를 세부분으로 나누어 줍니다 

 

 

방법 2: 각 섹션으로 이동하는 링크 만들기

HTML에서 만든 ID를 활용하여 각 섹션으로 이동하는 앵커 링크를 추가합니다.

 

 

클릭 시 해당 페이지 내 특정 섹션으로 자동 스크롤됩니다.

 

 

JavaScript로 부드러운 스크롤 적용으로 이동

 

 

 

방법 3: 새 페이지에서 특정 섹션으로 이동

• 위의 링크를 블로그나 외부 사이트에서 사용할 경우, 방문자가 클릭하면 해당 섹션으로 바로 이동합니다.
• 예를 들어, 화담숲 예약 페이지의 특정 섹션으로 이동하려면:

 

 

 

 

[야놀자 단독] 2025 화담숲 봄시즌 입장권

 

https://board.yanolja.com/event/1080/index.html#section2

 

위 링크주소를  <a>코드에  삽입하면 됩니다

 

<a href=" https://board.yanolja.com/event/1080/index.html#section2">화담숲입장권구매</a>

 

 

화담숲봄시즌입장권구매

 

 

 

 

 

 

 

---

 

추가 기능: 부드러운 스크롤 효과 적용 (CSS & JavaScript)

만약 부드럽게 이동하는 스크롤 효과를 추가하고 싶다면, CSS와 JavaScript를 활용할 수 있습니다.

✅ 1. CSS로 스크롤 부드럽게 만들기 CSS에 아래코드 삽입한다

 

ㅁㅁㅁ

✅ 2. JavaScript로 부드러운 스크롤 적용

 

효과: 사용자가 특정 링크를 클릭하면 해당 섹션으로 부드럽게 스크롤 이동됩니다.