inflearn logo
강의

Course

Instructor

Learn fullPage + animation + SVG Animation portfolio with JavaScript

Setting up navigation 3

anchor 작동 원리

Resolved

769

hg2241421017

5 asked

1

fullpage.js github 설명서에는

슬라이드로 가는 링크를 만들 때

data-anchor 속성을 사용하는 방법으로 나와있는데

강의에서 사용하신 방법은

a태그의 href와 js의 anchors 이름을 맞춰주는 걸로 나왔는데

어떻게 작동되는건지 좀더 자세하게 알려주실 수 있을까요?

 

개발자도구로 보니까

강의에서 알려주신 방법으로 했더니 

각각 section에 자동으로 js의 anchors에서 지정한 이름이 data-anchor 속성으로 들어가있더라구요

어떻게 section을 알아서 찾아서 data-anchor 속성값으로 들어간건지 알고싶습니다

강의에서 사용하신 방법의 작동 원리를 구체적으로 알고싶습니다!

인터랙티브-웹 javascript

Answer 1

0

lizb

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>
.................

요런식으로 걸어주면 되겠습니다! 답변이 되셨길 바라며 오늘도 열공하시구요 감사합니다^^

 

강의할때 문서? 텍스트 있는거 어디서 받아요?

0

16

1

Part2 수강 방법

0

38

1

20강 4분 30초 코드와 6분 30초 코드 관련 질문

0

34

1

영상에서 소개되는 코드와 강의 노트 코드가 달라요

0

43

1

오디오 문제

0

54

2

TTL 산정 기준

0

46

1

10월 15일 삭제예정 강의 문의

0

61

1

강의제목에 10/15일 삭제라고 나와있는데,

0

65

1

스크립트 영상 미일치

0

103

3

감정일기장 다이어리 필터 적용할때 컨텍스트를 Home에서 가져오는 특별한 이유가 궁금합니다.

0

70

2

강의 설명 중에 헷갈리는 것이 있네요

0

80

2

수업자료 관련 문의

0

92

3

1강 동영상 재생 오류

1

80

2

Composition단계에서 `Layer`는 누가 만드는지

0

54

1

Strict Mode 예시 질문!

0

73

2

수업이 안보여요

0

77

1

저자 블로그에 있는 강의는 어떤 강의인가요?

1

74

1

[해결됨]윈도우즈 환경에서 타입 스크립트 파일이 실행이 안됩니다.

1

102

5

4강 카드뉴스 자동화 자료가 안보입니다!!

0

121

2

윈도우즈 환경에서 진행중입니다.

0

75

2

4강 카드뉴스 자동화 자료

6

135

1

스크롤링

1

390

1

질문드립니다.

1

274

1

안녕하세요 강사님 여기서 막혀서 질문드립니다!

1

278

1