앵커버튼 만들기 : 티스토리 편

앵커버튼은 무엇인가? 앵커버튼은 내가 생성한 버튼 형태의 이미지를 클릭했을 때, 페이지 내에서 해당 섹션으로 이동하는 것을 말한다. 방문자가 해당 컨텐츠를 쉽게 찾을 수 있어 잘 사용하면 유용하다. 결과적으로는 내 사이트에서 내가 컨텐츠 보기 편하게 하기 위해서 자주 만들고 사용하기는 하는데, 일종의 간편한 순간이동 장치라고 생각하면 좋다.

만드는 방법은 아주, 아주아주 간단하다. 이동할 이미지를 만들고, 이동할 이미지의 주소를 해당 섹션 값의 이름을 작성한다. 즉, 쉽게 이야기하면 이동할 위치를 지정해놓는 것이다.

이렇게 지정한 위치를 내가 인식하기 위해서는 해당 위치에 이름을 만들어줘야한다. 예를 들어, 우리 집 앞에 슈퍼를 '앞마당슈퍼'라고 이름을 지어주고 앵커버튼을 만들고 싶다면 <a name="앞마당슈퍼">가 될 것이다.

즉, 앵커 속성을 활용해서 해당 위치에 이름을 지어주고, 그 위치로 이동하는 해당 링크 주소를 부여해주면 클릭할 때 바로 이동을 할 수 있게 된다. 말로해도 쉬운데, 직접 적용해보면 더욱 쉽다.

적용 및 테스트

재미삼아 위의 버튼처럼 활용할 수 있는 작은 이미지^[각주:1]가 있다. 이 이미지를 클릭해서 같은 페이지 내에 내가 원하는 위치로 이동하게끔 하고자 한다. 그럼 먼저, 내가 가고자 하는 위치의 이름을 알거나 별도의 이름이 없을 경우, 이름을 부여해줘야 한다. 이동하고자 하는 목표가 모두 다르기 때문에, 나의 경우에는 썸네일 리스트로 이동하고 싶다면 썸네일 리스트 바로 위로 이동하게끔 하고자 한다.

이때 이동하고자 하는 곳이 썸네일 리스트라고 할 때, 썸네일 리스트 소스 영역 바로 위나 사이부분에 이름을 지어줄 것이다.

<a name="클릭하면 썸네일 리스트로 이동할게!"> 물론 이렇게 작성하면 정상적으로 이동되진 않는다. 추가적인 속성을 부여해줘야한다. 별도로 해당 속성이 드러나도록 크기의 값을 부여해준다. 위의 경우에는 단순히 이해를 돕기위한 예시고, 실제 적용된 코드값은 아래와 같다.

같은 페이지 내에 있다고 가정할 때, 버튼으로 활용할 작은 이미지에는 아래와 같은 방식으로 블럭을 생성해준다.

위와 같은 방식으로 티스토리 내에서 쉽게 앵커버튼을 만들 수 있다. 약간의 이해를 필요로 하지만, 평소에 CSS를 조금 다뤄봤다면 딱 보고 바로 이해할 수 있는 수준이다. 쉽게 앵커버튼을 만들어서 방문자가 찾고자 하는 컨텐츠에 쉽게 도달하도록 도움이 될 수 있다.

1. 프린세스 커넥트 리다이브 리틀 리리커 멤버 쿄우카(キョウカ) [본문으로]