![[웹코딩 가이드] 홈](./_img/sparrow-sqr.svg "[웹코딩 가이드] 홈으로 돌아가기"){kind=small}
- 깊은 앵커링크
- Anchor-JS 플러그인을 사용하기 위해서는; 먼저, CDN 링크 및 초기화 작업이 필요한데, Anchor-JS 플러그인은 딥 링크하려는 요소를 타겟팅하기 위해 Css 선택자를 사용하는 복수의 메서드 또한 제공한다:
<script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
<script>
/* 1. 달리 타겟팅을 설정하지 않는 기본 초기화 설정 */
anchors.add(); // 'h2, h3, h4, h5, h6'의 기본 선택자로 대체된다
/* 2. 혹은, 딥 링크하려는 요소를 타겟팅하기 위해 아래와 같은 방식으로 사용할 수도 있다 */
anchors.add('h1'); // 페이지의 모든 h1 요소에 앵커 추가
anchors.add('.anchored'); // .anchored 클래스가 할당된 요소에 앵커 추가
</script>
➥ 기본 앵커 문자(§)는 언제든 아래와 같은 옵션을 추가하여 다른 유니코드 문자로 변경해줄 수 있다:
var anchors= new AnchorJS() // 앵커의 인스턴스 생성
anchors.options= {
icon: '⇅', // AnchorJS 기본 앵커 문자 변경
}
anchors.add('[data-anchor]') // data-anchor 속성이 주어진 요소에 앵커를 추가한다
- 딥 앵커 옵션 설정
-
1.
Deep Anchor는 각각의 옵션을 통해 앵커 표시 위치를 변경해주거나, 언제 앵커를 보일 것인지 등을 설정해줄 수 있다.
또는,
anchors.options= { .. }로 한번에 설정해줄 수도 있다: - 2. 고정 내비게이션바가 있는 페이지에서는 연결하려는 제목을 가릴 수 있는데, 이를 방지하기 위해 Css의 :: 선택자를 써서 약간의 사용자 지정 스타일을 지정하여 대상 제목에 여백을 추가해줄 수 있다:
-
3.
블로그의 최근 게시물 페이지, 또는 지정된 태그가 있는 모든 게시물의 페이지와 같이 컨텐츠가 변경된 페이지가 있는 것이 일반적이고.. 그러한 페이지에 앵커를 추가하면 컨텐츠가 해당 페이지를 떠날 때 링크가 끊어질수 있으므로 문제가 될 수 있다. 이를 방지하려면; 해당 앵커가 항상 게시물의 영구 링크 URL을 가리키도록 하는
base옵션을 사용할 수 있다: -
4.
AnchorJS에는 (점프 탐색 등)탐색을 동적으로 생성하는 메서드가 포함되어 있지 않다.
그럼에도, AnchorJS는 모든 앵커 요소목록(
anchors.elements)을 노출하며, 이러한 방식으로 외부 코드는 요소를 조회하고 이를 사용하여 탐색을 생성할 수 있게 된다. 또한, 미리 정의된 ID를 가진 정적 내비게이션과 함께 AnchorJS를 사용할 수도 있다. 어떤 경우에는, heading 요소 대신 기존의 섹션 ID에 연결할 수도 있는데, AnchorJS에data-anchor-id=속성을 사용하여 이 작업을 수행하도록 지시할 수 있다: - 5. 한 페이지에 각각 고유한 디자인이 있는 여러 앵커 세트를 가질 수도 있는데, 단지 AnchorJS 객체의 고유한 인스턴스를 만들기만 하면 된다. 또는, 원하는 옵션으로 인스턴스를 사전 설정할 수도 있다:
anchors.options.placement= 'left' // 앵커를 앞쪽에 배치한다 ← 기본값: right
anchors.options.visible= 'always' // 앵커를 항상 보인다 ← 기본값: hover 시
var anchors= new AnchorJS()
anchors.options= { /* 모든 옵션들을 한번에 지정한다 */
icon: '⇅',
titleText: '위로 이동..', /* 옵션을 추가할 때는 ,로 구분해주어야 한다! */
};
anchors.add('article > dl') // article 바로 아래 모든 dl 요소
anchors.options= { // 앵커 추가
visible: 'always', icon: '#'
};
anchors.add('article > dl > dt') // article 바로 아래 모든 dl의 바로 밑 단계 dt 요소
☞ 위 코드는 이 웹문서에 적용한 딥 앵커 설정입니다. 확인해보세요..
/* 1. 의사 요소를 만들어 고정 내비게이션 바의 높이로 만들어줌으로써 링크 위의 위치로 점프하도록해준다 */
:target::before {
content: "";
display: block; height: 80px; width: 1px;
margin-top: -80px;
}
/* 2. 또는, 아래처럼 새로운 scroll-margin-top 속성을 사용할 수도 있다
- 단, 브라우저에 따라서는, 이 방식을 지원하지 않을 수도 있다! */
:target { scroll-margin-top: 80px; }
// Note: you can often get the permalink url from your site's backend
anchors.options.base= "/2019/1/03/my-post";
anchors.add();
// Anchor url before: "#conclusion"
// Anchor url after: "/2019/1/03/my-post#conclusion"
<script>
anchors.add('h3');
</script>
var sidebarAnchors= new AnchorJS();
anchors.add('.main h2'); // The default instance.
sidebarAnchors.add('.sidebar h2'); // The new instance.
var sidebarAnchors= new AnchorJS({
placement: 'left', icon: '¶'
});
sidebarAnchors.add('.sidebar h2');
