인프런 커뮤니티 질문&답변
작성한 질문수
anchor 작동 원리
해결된 질문
작성
·
595
1
fullpage.js github 설명서에는
슬라이드로 가는 링크를 만들 때
data-anchor 속성을 사용하는 방법으로 나와있는데
강의에서 사용하신 방법은
a태그의 href와 js의 anchors 이름을 맞춰주는 걸로 나왔는데
어떻게 작동되는건지 좀더 자세하게 알려주실 수 있을까요?
개발자도구로 보니까
강의에서 알려주신 방법으로 했더니
각각 section에 자동으로 js의 anchors에서 지정한 이름이 data-anchor 속성으로 들어가있더라구요
어떻게 section을 알아서 찾아서 data-anchor 속성값으로 들어간건지 알고싶습니다
강의에서 사용하신 방법의 작동 원리를 구체적으로 알고싶습니다!
답변 1
0
LIZ.B
지식공유자
github의 링크를 보셨나봐요~! 일단 열공해 주셔서 감사드려요!
일단 fullpage의 anchors속성에 들어가는 array는 각 메인 section에 사용하는 것이라고 생각하시면 됩니다.
new fullpage('#fullpage',{
autoScrolling:true,
scrollHorizontally:true,
// licenseKey: '',
navigation: true,
anchors:['num0', 'Num1','Num2','Num3','Num4'],
})
그렇기에 section에 data-anchors속성으로 개발도구로 검색하면 나오는 것이구요!
만약 section 내부의 fullpage slide를 사용한다면.
<section id="sec2" class="section">
<div class="slide" data-anchor="slide1"> Slide 1 </div>
<div class="slide" data-anchor="slide2"> Slide 2 </div>
<div class="slide" data-anchor="slide3"> Slide 3 </div>
<div class="slide" data-anchor="slide4"> Slide 4 </div>
</section>
위 내용처럼 data-anchor속성을 사용하여, 링크를 걸 수 있는데요, 이 값은 main section의 id 값과 중복되면 안되겠죠~ 당연한 얘기입니다. 그럼 링크를 어디로 갈지 혼돈이 올거예요!
만약 slide로 링크를 걸어야 한다면.
...............
<li><a href="#Num2/slide3">slide3</a></li>
.................
요런식으로 걸어주면 되겠습니다! 답변이 되셨길 바라며 오늘도 열공하시구요 감사합니다^^