HTML 책갈피 링크, a태그와 name을 이용한 링크 - 블로그 꾸미기

HTML 책갈피 링크, a태그와 name을 이용한 링크 - 블로그 꾸미기

요약 : HTML 책갈피 링크 (블로그 꾸미기)

테스트 환경 : 통합 웹 브라우저
제작 : http://hackerc.com
작성자 : 해커 C
주의 : 실제와 다른 내용이 포함 될 수도 있음

안녕하세요? 해커 C 입니다.

html 책갈피 링크를 이용하여 블로그를 꾸며 보는 하루 보내세요 ~ ^^

이번에 소개해 드릴 내용은 HTML 태그를 이용하여 책갈피 기능을 구현하는 방법입니다.

올댓튜브 님께서 질문 주셨던 책갈피 기능을 포스팅으로 답변 드리게 되었네요. ㅎㅎ;;

a태그와 name을 이용하여 쉽게 이용할 수 있는 내용입니다.

포스팅 내용이 아주 허술하긴 하지만,

좀 더 쉽게 말씀드리기 위해 댓글에 답글이 아닌 포스팅으로 대처합니다.

HTML 책갈피 링크 (블로그 꾸미기) 시작합니다.

HTML 책갈피 링크 (블로그 꾸미기) - 책갈피 링크란

HTML 책갈피 링크 (블로그 꾸미기) - 책갈피 링크란

사실 책갈피 링크는 아주 간단하게 이뤄져 있습니다.

위에 사진이 많이 허술하지만... 그래도 쉽게 이해하실 수 있을 거에요.

"해커 C" 에 a링크를 걸어 두고 "책갈피 링크" 부분에 name을 걸어둔 상태입니다.

이렇게 된다면 "해커 C" 를 클릭하면 "책갈피 링크"부분으로 이동하게 됩니다.


HTML 책갈피 링크 (블로그 꾸미기) - html소스

HTML 책갈피 링크 (블로그 꾸미기) - html소스

소스 또한 아주 간단하게 이뤄져 있습니다.

a태그 (앵커태그) 보통 링크를 걸 때 많이 사용하게 되죠 'href' 부분에는 url를 입력하고요.

하지만 책갈피 링크에서는 'href' 부분에 책갈피 이름 'name'을 #과 함께 적어 주시면 됩니다.

그리고 링크를 클릭 시 도착하게 될 부분의 태그 또한 'a태그' 를 이용하여

'name' 이름만 똑같이 적어 주시면 됩니다.


hackerc_책갈피 링크.html

hackerc_책갈피 링크.txt

한번 확인 해보실 수 있게 간단한 html과 txt 파일 올려 드립니다. ^^


HTML 책갈피 링크 (블로그 꾸미기) - 다른 페이지로 책갈피 하기

HTML 책갈피 링크 (블로그 꾸미기) - 다른 페이지로 책갈피 하기

지금까지 방법은 동일한 페이지 안에서 책갈피를 이용하여 이동하는 것 이였고요.

다른 페이지로 책갈피 기능을 하는 방법은 링크(href) 부분에 url과 함께 '#name'을

[ 테스트 ] = ( http://hackerc.com#hackerc1 )

해주시면 됩니다. 타켓은 원하시는 대로 설정하시면 됩니다. ㅎㅎ

타켓을 입력하지 않거나 target="_self" 를 이용하여 현재 페이지에서 보여지게 하거나

target="_blank" 를 이용하여 새창 에서 보이게 하시면 됩니다.

HTML 책갈피 링크 (블로그 꾸미기).. 책갈피 링크는 일반적인 경우 활용성이 많이 떨어지는 기능입니다.

하지만 본문내용이 아주 길거나, 복잡하게 이뤄져 있다면

방문자 분들께 빠른 키워드와 핵심을 찾으실 수 있게 책갈피 링크를 이용한다면 효과를 볼 수 있습니다.

보통의 경우 메인(헤더) 부분의 높이가 높고 본문이 한 참 밑에서 시작하게 될 때

스킵(skip) 기능으로써 이용해도 괜찮을 거 같습니다.

기본적인 'name'을 이용하여 동일 페이지 내에서 이동을 할 수도 있으며

다른 페이지(url) 내의 'name' 으로도 책갈피 링크를 걸 수 있습니다.

단, 'name'을 다 다르게 해야 하는 번거로움은 있습니다. ^^;;

블로그나 웹페이지를 좀 더 재밌고 화려하게 꾸미고자 할 때 활용해보시면 괜찮을 거 같습니다.

올댓튜브 님 활용 잘하시고요. 포스팅 하나 발행할 수 있는 건수 만들어 주셔서 감사합니다.