오늘은 목차의 내용을 클릭하면 해당 내용으로 이동하게 되는 스크롤 이동을 알려드리려고 합니다. 제가 티스토리를 시작하면서 당황했던 첫 번째가 바로 이 목차를 클릭하면 스크롤이 이동하는 것이었습니다. 막상 해보면 어렵지 않은데 html을 아예 몰라서 처음에는 이게 무슨 소리인가 싶어서 당황스럽게 느껴졌거든요. 알고 보면 쉬운 스크롤 이동, 아주 자세히 설명해 드리겠습니다.
일단 완성된 글을 불러오거나 목차를 아무렇게나 적으셔도 됩니다. 물론 그냥 보고 이해만 하셔도 됩니다.
목차를 다 적었으면 기본모드를 눌러주세요. 그러면 html이 나오는데 그걸 누르시면 됩니다. 그러면 배경화면이 어둡게 변하면서 내가 적은 글 말고도 영어로 이것저것 적혀있는 화면이 나옵니다. 변한 화면에 당황하지 마시고 내가 적은 목차를 찾아주시면 됩니다.
저는 주로 제목에 숫자를 적어놔서 찾기가 편합니다. 뭐가 뭔지 영 모르겠다, 구분이 안 간다 싶으시면 숫자 말고도 이모티콘도 눈에 띄고 좋습니다.
아무튼 찾으셨다면 이런 식으로 적혀있을 겁니다. 저기 적혀있는 게 무슨 뜻인지 모르셔도 됩니다. 우리는 스크롤 이동만 적용하면 되니까요.
이 사진은 글을 기본모드에서 HTML로 변경하자마자 보이는 기본 형태입니다. 자 이제 아래 사진을 보시죠.
아까랑 뭐가 조금 달라지지 않았나요? 형광펜으로 밑줄 친 부분을 보면 뭔가 추가가 되어있을 겁니다.
<a href="#"> → 이건 간단히 말하자면 목차 이름 정하기라고 보시면 됩니다. 정확히는 따옴표 안에 있는 #뒤에 이름을 붙여주는 겁니다. 저기에 글이나 숫자를 원하는 대로 적어주면 됩니다.
<a href="#1"> → 1번 목차의 이름
<a href="#2"> → 2번 목차의 이름
<a href="#3"> → 3번 목차의 이름
여기까지 이해를 하셨다면 절반은 성공하신 겁니다. 이해는 못하겠는데 따라는 했어요,라고 하신다면 그것도 축하드립니다. 역시나 절반은 성공하신 겁니다.
자, 이제 나머지 절반을 알려드리겠습니다.
저희가 하려는 게 스크롤 이동이니까 이제 목차를 눌렀을 때 해당 목차의 내용으로 이동해야겠죠?
형광펜으로 칠해놓은 걸 보시면 1번 목차의 내용입니다. 그리고 역시나 기본 형태입니다. 이제 여기에도 뭘 추가를 해줘야겠죠.
아까 위에서 제가 #뒤에 이름으로 1을 붙여서 <a href="#1"> 이렇게 적었던 것 기억하시나요? 밑줄 친 부분에 보이는
id="", → 이걸 넣어줘야 목차를 눌렀을 때 스크롤이 이동하는 겁니다. 역시나 따옴표 안에 각 목차의 이름을 넣어주시면 됩니다.
id="1", → 1번 목차 내용으로 이동
id="2", → 2번 목차 내용으로 이동
id="3", → 3번 목차 내용으로 이동
나머지 목차들도 같은 방식으로 설정을 해주시면 됩니다. 그리고 마지막으로 HTML 모드에서 기본모드로 바꿔주시면
이렇게 처음이랑은 다르게 변해있을 겁니다. 변한 걸 확인하셨다면 글을 발행해 보세요. 눌러보시면 스크롤 이동이 적용될 겁니다.
'알아두면 도움이 되는 정보' 카테고리의 다른 글
| 여름 줄줄 새는 전기세 막는 절약팁 7가지💡 (1) | 2025.06.17 |
|---|
