섹션 ID를 사용해 특정 섹션으로 이동시키기 I

  아임웹 연구소 소장 해준  |  2017 . 09 . 10

시작에 앞서
섹션 ID란, 각 섹션이 가진 고유의 ID를 말합니다. 이 섹션 ID를 링크시킬 주소(URL) 대신 삽입하면, 특정 섹션으로 화면을 이동시킬 수 있습니다. '섹션 링크'는 흔히 원페이지(1-Page) 사이트에서 많이 쓰이며, 필요한 경우 다른 메뉴의 특정 섹션으로 이동시키는 것도 가능합니다.

이번 꿀팁에서는 같은 페이지에 존재하는 섹션으로 이동시키는 방법에 대해 알아보겠습니다.



기능 미리보기
1) https://pageshow.imweb.me 에 접속하여, 페이지 상단에 <하단으로 이동> 버튼을 눌러보세요.
2) 그럼 같은 페이지 하단에 위치한 [지도 섹션]으로 이동하는 걸 확인하실 수 있습니다.





제작방법
1단계, 이동하고자 하는 섹션의 설정 창 켜기
1) 아래 그림처럼 이동하고자 하는 섹션에 마우스 커서를 놓고, 마우스 오른쪽 버튼을 클릭해주세요.
2) 보조 메뉴가 나타나면, [섹션 설정]을 클릭합니다.




2단계, 섹션 ID 복사하기
설정 창 우측 중간쯤 위치한, 섹션 ID를 #을 포함해, 마우스로 드래그합니다.
다음으로 키보드에서 CTRL + C를 눌러 섹션 ID를 복사합니다.




3단계, 링크 걸 위젯의 설정 메뉴 열고, 링크 걸기
1) 링크를 걸 [위젯]의 설정 창을 엽니다. 아래 그림은 [하단으로 이동] 버튼 위젯의 [설정] 창을 켠 화면입니다.
2) 작동 방법을 [링크]로 선택하고, 주소란에 먼저 mypage 라고 입력합니다. 다음으로 복사했던 [섹션 ID]를 붙여 넣습니다. #을 포함해, 띄어쓰기 없이 붙여넣기 해주세요.
예시 : mypage#s201704285902c9827e1a6



해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹 연구소' 소장
jin@haejoon.com

아임웹 공식제휴사

아임웹은 페이팔, 네이버 페이, KCP 공식파트너입니다.