미디엄에서 글을 쓰시면서 작성한 목록을 클릭하셨을 때, 그 위치로 바로 스크롤되서 내용을 확인할 수 있는 앵커를 거는 방법을 소개합니다.
미디엄에서 앵커를 어찌거나 하면서 아래 뉴럴 링크 관련 글을 보다가 앵커가 걸려있는 것을 보고 잊어 버리기 전에 작업 방법 정리합니다.
⚓ 앵커 이름 찾기
※ 저는 브라우저는 구글 크롬을 사용하지만 테스트용으로 마소 엣지와 네이버 웨일도 같이 쓰기 때문에 각각의 브라우저에서 앵커 이름(Anchor name)을 찾는 방법을 같이 소개합니다.
대개 글목록이 많을 때는 첫 번째 제목에도 걸어 주지만 저는 한 페이지 안에서 바로 보이는 제목은 제외하고 링크를 걸어 줍니다. 그러므로, 두 번째 제목인 아래 링크 걸기 부분의 앵커 이름을 확인하고 링크를 거는 방법을 소개합니다.
아래 스샷과 같이 “링크 걸기” 부분을 드래그 하신 다음,
블럭이 걸린 부분 위에서 마우스 오른쪽 클릭 후에 나오는 팝업 창은 아래와 같습니다.
왼쪽부터 구글 크롬, 마소 엣지, 네이버 웨일에서 뜨는 팝업 창입니다.
셋다 제일 아래에 있는 “검사”를 클릭하시면 지금 보고 계시는 페이지의 HTML 소스 코드를 볼수 있는 창이 뜹니다.
대표로 구글 크롬에서는 아래와 같은 창이 뜹니다.
소스 코드를 보여주는 또는 닫는 단축키는 F12입니다. 한번 누르시면 보이고 아래와 같이 보이는 상태에서 누르시면 닫습니다.
위의 상태에서 HTML 코드 중 아래와 같이 배경이 파란 부분이 지금 선택한 부분입니다. 구글 크롬에서는 내용 부분이 숨겨져 있습니다.
위의 코드에서 아래와 같이 생긴 부분을 클릭하시면 내용이 확인 됩니다.
내용은 아래와 같이 “🔗 링크 걸기”입니다.
마소 엣지에서는 아래와 같으며,
네이버 웨일에서는 아래와 같습니다.
링크 걸기가 포함된 부분에서 제일 앞에 있는
<h3 name=”5d9a” 부분의 name=”5d9a”이 앵커의 이름입니다.
여러분이 쓰신 글에서는 해당되는 부분이 h3으로 시작하지 않을 수도 있습니다.
중요한 부분은 name= 으로 시작되는 부분입니다.
🔗 링크 걸기
이제 링크를 걸어 주실 부분을 드래그해서 선택하시고 링크를 입력하시는 부분에
아래와 같이 맨 앞에 샵 기호를 써주시고 name에 해당하는 5d9a를 쓰시고 엔터키 누르시면 링크가 걸립니다.
#5d9a
그러면 글 목록의 링크 걸기를 클릭했을 때, 아래 내용의 링크 걸기로 스크롤 됩니다.
📌 링크 작동 확인
이 글에서 글 목록과 아래 TOP 부분 클릭하셔서 확인하시면 됩니다.
아래 TOP은 위의 확인 방법으로 글의 제목 부분의 name 정보를 확인한 후, 링크를 걸어 준 것 입니다.
🔼️ TOP
