요즘은 누구나 다양한 목적으로 링크를 만들고 공유하며, 링크는 이미 일상생활의 필수적인 부분이 되었습니다. 하지만 분량이 긴 문서로 연결되는 링크를 공유하면, 받는 사람이 원하는 정보를 찾느라 불편을 겪게 됩니다. 그래서 페이지의 특정 위치로 바로 이동시켜 주는 "특정 링크(Specific Link)"를 만들어 사용하는 것이 좋습니다.
이 글에서는 사이트 종류에 따라 페이지의 특정 부분에 링크를 거는 방법을 소개합니다. 오류 없이 진행하려면 아래 단계를 순서대로 따라 해 보세요.
페이지의 특정 부분에 링크하는 방법
수많은 사용자들의 요청에 따라, 인기 있는 플랫폼별로 페이지의 특정 위치에 링크를 거는 별도의 가이드를 준비했습니다.
워드프레스(WordPress)에서 링크 만들기
- 플러스(+) 아이콘을 클릭해 새 "블록(Block)"을 추가합니다.
- 블록 유형에서 "제목(Heading)"을 선택하고 제목 텍스트를 입력합니다.
- "고급(Advanced)" 드롭다운을 열고 "HTML 앵커(HTML Anchor)" 옵션을 선택합니다.
- 클릭 시 해당 위치로 이동될 수 있도록 앵커 이름을 입력합니다.
참고: 반드시 띄어쓰기 없이 입력하고, 단어 사이는 "-"로 구분해야 합니다. - 이제 페이지 이동을 시작할 텍스트를 입력하거나, 이미지 또는 버튼을 추가합니다.
- 해당 텍스트, 이미지 또는 버튼을 드래그해 선택한 뒤, 블록 툴바의 "링크(Link)" 버튼을 클릭합니다.
- "#(4단계에서 만든 HTML 앵커)"를 입력하고 Enter 키를 누르면 페이지의 특정 부분으로 연결되는 링크가 생성됩니다.
- 이후 사용자가 이 링크를 클릭하면 2단계에서 지정한 제목 위치로 바로 이동합니다.
직접 편집할 수 없는 다른 사이트의 경우
사이트를 직접 수정할 권한이 없고, 해당 사이트에서 자체적으로 페이지 점프 기능을 제공하지 않더라도 링크를 특정 위치로 연결할 방법이 하나 남아 있습니다. 예를 들어 포럼 게시글의 특정 답변으로 이동하는 링크를 만든다고 가정해 보겠습니다.
- 포럼의 특정 답변으로 이동하는 링크를 만들고 싶다고 가정합니다.
- 아래로 스크롤하여 원하는 답변을 마우스로 드래그해 선택합니다.
- 선택한 답변 위에서 마우스 오른쪽 버튼을 클릭하고 "검사(Inspect)"를 선택합니다.
- 검사 도구가 선택한 영역에 해당하는 HTML 요소들을 표시합니다.
- 여러 개의 작은 "<div…" 태그로 갈라져 나오는 특정 "<div>" 태그를 찾습니다.
- 그 "<div>" 태그 안에서 "id=answer-(번호)" 형태의 코드를 확인할 수 있습니다.
- "id=" 뒤 따옴표 안의 값 전체를 선택한 후, 마우스 오른쪽 버튼을 클릭하고 "복사(Copy)"를 선택합니다.
- 복사한 값을 메모해 두었다가, 사이트 주소 맨 끝에 "#"와 함께 붙여넣습니다.
예를 들어, 원래 URL이 다음과 같다면:
https://stackoverflow.com/questions/1465381/catching-the-dreaded-blue-screen-of-death
다음과 같이 변경됩니다:
https://stackoverflow.com/questions/1465381/catching-the-dreaded-blue-screen-of-death#answer-1465388
이렇게 완성된 URL을 사용하면 페이지의 특정 부분으로 바로 연결되는 링크를 자유롭게 공유할 수 있습니다.