블로그 상하단 이동하기(anchor,앵커)
- 퍼블리셔/html
- 2010. 6. 27. 06:00
블로그에서 상.하단으로 쉽게 이동하는 법은 몇가지 있습니다.
간단하게 떠블클릭으로 가는 방법, 현재 제가 사용하고 있는 자동스크롤하는 방법, 그리고 위로이동 단추를 만드는 방법.....
여러가지 다양한 방법이 있지요.
하지만 이번에는 원하는 위치에 딱딱 떨어지는 앵커를 이용하는 방법을 알려드리겠습니다.
anchor 앵커는 우리가 흔이 알고있는 책갈피의 기능과 비슷합니다.
맨위에 책갈피를 표시해두고 블로그하단에 "위로이동" 이라고 적어놓고 클릭하면 맨위로 올라가는 기능이죠.
앵커는 대략 아래와 같은 형식입니다.
대략 이런식입니다.
더군다나 a 링크에 class나 id 를 지정해서 스타일을 적용합니다.
대략 아래와 같은 모습으로요.
저의경우 top는 해더부분의 로고부분에 표시를 해두었고 아래를 표시하는것(bottom) 은 코멘트창에 해 두었습니다.
그래서 위로이동을 클릭하면 해더의 로고부분으로 이동하고 댓글창으로 이동 또는 아래로이동을 클릭하면 댓글창으로 이동하게끔 했습니다.
또 위로이동버튼은 두개를 만들었습니다. 댓글창에서 위로이동 버튼을 만들고, footer 푸터부분 즉 페이지의 맨 아래부분에도 하나 만들어놓았습니다.
또 이미지를 표시해서 아래로 이동하는지 , 위로 이동하는지 알아보기 쉽게 했습니다.
이런식으로 한번 해보겠습니다.
html 편집창에서 아래의 코드를 찾아보세요. 아마 거의 블로그제목에 해당하는 부분은 아래처럼 되어있을겁니다.
해더 즉 제목부분에 위로이동할수있게끔 표시를 해두었습니다.
이제는 댓글창으로 이동하게끔 댓글창에도 앵커를 하나 표시해둡니다.
댓글창에도 표시를 해두었습니다. 이제는 댓글창으로 이동, 위로이동 단추를 만들어보겠습니다.
저의경우 제목부분에 댓글창으로 이동을 보여주고 , 댓글창에는 위로이동 단추를 보여주는것이 좋아 이렇게 했습니다.
응용해서 여러분들은 좋을대로 하세요.
우선 제목부분에 아래처럼 표시합니다.
이제는 댓글창에서 위로이동버튼을 보여주도록 합니다.
자 html 은 다 됐습니다. 물론 footer 부분에도 하나 추가해서 넣어줘도 됩니다.
이제 css 를 만져보겠습니다. 대략 본문전체가 왼쪽 정렬이 되어있기 때문에 잘 보여줄려면 우측으로 정렬을 해야 됩니다.
여기서 한가지 주의 할점은 float 를 사용하는데 이것은 아래내용까지 영향을 미치므로 float 를 사용한다음에는 그 아래에 오는 id에 float:both 를 추가해주세요.
그래야 레이아웃이 깨지지 않습니다.
css 편집장에 아래의 코드를 넣어주세요.
대략 너비와 높이를 지정해주고 padding로 이미지를 왼쪽으로 두고 글씨는 우측으로 밀었습니다.
padding 와 margin 으로 맞쳐주세요. 제 스킨의 경우 이정도로 해야 정상적으로 보여지기 때문에 이렇게 했습니다.
또 이미지의 경우 원하는 이미지를 업로드하고 상대주소로 변경해주셔도 됩니다.
즉 스킨편집에서 파일업로드하고 , url(./images/이미지파일이름) no-repeat 이런식으로 수정해서 사용해도 됩니다.
주의할점은 위에서도 언급했듯이 float:right 를 적용했기때문에 오른쪽 정렬이 됩니다.
필요없으면 삭제하고 그냥 왼쪽 정렬로 사용하셔도 되고, 만약 이렇게 우측정렬로 했다면 아래의 div id 부분에 clear:both 를 css부분에 추가해줘야 합니다.
혹 모르시는분을 위해 예를들어보겠습니다. 제 스킨의 경우입니다. 대략 비교해보시면 알겁니다.
아래처럼 html부분이 있습니다.
9번째줄에 보시면 댓글창으로 이동버튼 아래부분의 id가 titleWrap 이기때문에 css창에서 .titleWrap 부분을 찾아서 clear:both 라고 한줄을 추가해주어야 합니다.
그래야 아래부분부터 우측정렬이 되지 않습니다.
간단하게 떠블클릭으로 가는 방법, 현재 제가 사용하고 있는 자동스크롤하는 방법, 그리고 위로이동 단추를 만드는 방법.....
여러가지 다양한 방법이 있지요.
하지만 이번에는 원하는 위치에 딱딱 떨어지는 앵커를 이용하는 방법을 알려드리겠습니다.
anchor 앵커는 우리가 흔이 알고있는 책갈피의 기능과 비슷합니다.
맨위에 책갈피를 표시해두고 블로그하단에 "위로이동" 이라고 적어놓고 클릭하면 맨위로 올라가는 기능이죠.
앵커는 대략 아래와 같은 형식입니다.
<a name="top"></a><!-- 표시를 하는곳 -->
<a href="#top">위로이동</a><!-- 이동하는글을 보여주는곳 -->대략 이런식입니다.
더군다나 a 링크에 class나 id 를 지정해서 스타일을 적용합니다.
대략 아래와 같은 모습으로요.
 |  |
저의경우 top는 해더부분의 로고부분에 표시를 해두었고 아래를 표시하는것(bottom) 은 코멘트창에 해 두었습니다.
그래서 위로이동을 클릭하면 해더의 로고부분으로 이동하고 댓글창으로 이동 또는 아래로이동을 클릭하면 댓글창으로 이동하게끔 했습니다.
또 위로이동버튼은 두개를 만들었습니다. 댓글창에서 위로이동 버튼을 만들고, footer 푸터부분 즉 페이지의 맨 아래부분에도 하나 만들어놓았습니다.
또 이미지를 표시해서 아래로 이동하는지 , 위로 이동하는지 알아보기 쉽게 했습니다.
이런식으로 한번 해보겠습니다.
html 편집창에서 아래의 코드를 찾아보세요. 아마 거의 블로그제목에 해당하는 부분은 아래처럼 되어있을겁니다.
<h1><a href="[#\#_blog_link_##]" title="처음으로">[#\#_title_##]</a></h1>
<a name="top"></a>해더 즉 제목부분에 위로이동할수있게끔 표시를 해두었습니다.
이제는 댓글창으로 이동하게끔 댓글창에도 앵커를 하나 표시해둡니다.
<textarea name="[#\#_rp_input_comment_##]" class="textarea" onfocus="this.className='textarea_on'" cols="68" rows="10" onblur="this.className='textarea'"></textarea>
<a name="commentBot"></a>댓글창에도 표시를 해두었습니다. 이제는 댓글창으로 이동, 위로이동 단추를 만들어보겠습니다.
저의경우 제목부분에 댓글창으로 이동을 보여주고 , 댓글창에는 위로이동 단추를 보여주는것이 좋아 이렇게 했습니다.
응용해서 여러분들은 좋을대로 하세요.
우선 제목부분에 아래처럼 표시합니다.
<h2><a href="[#\#_article_rep_link_##]">[#\#_article_rep_title_##]</a></h2><!-- 포스트제목 -->
<a href="#commentBot" class="articleBot">댓글창으로</a>이제는 댓글창에서 위로이동버튼을 보여주도록 합니다.
<h3>댓글창을 클릭해보세요.</h3>
<a href="#top" class="commentTop">위로이동</a>
<div class="cwLeft">
<s_rp_member>
<s_rp_guest>
<p>
<input name="[#\#_rp_input_name_##]" value="[#\#_guest_name_##]" class="input" onfocus="this.className='input_on'" onblur="this.className='input'" type="text">
<label for="name">: 이름 (Name)</label>
</p>
</s_rp_guest>
</s_rp_member>
</div>
<!-- 여기까지 입니다. -->
<!--
[#\#_rp_input_name_##] 를 찾아서 2번줄처럼 넣어주면 됩니다.
주석과 필요없는부분은 지워주시구요. 2번줄만 삽입하면됩니다.
-->자 html 은 다 됐습니다. 물론 footer 부분에도 하나 추가해서 넣어줘도 됩니다.
이제 css 를 만져보겠습니다. 대략 본문전체가 왼쪽 정렬이 되어있기 때문에 잘 보여줄려면 우측으로 정렬을 해야 됩니다.
여기서 한가지 주의 할점은 float 를 사용하는데 이것은 아래내용까지 영향을 미치므로 float 를 사용한다음에는 그 아래에 오는 id에 float:both 를 추가해주세요.
그래야 레이아웃이 깨지지 않습니다.
css 편집장에 아래의 코드를 넣어주세요.
/* anchor 앵커 */
.articleBot{
float:right;
background:url(http://cfs.tistory.com/custom/blog/5/53533/skin/images/arrows_dn.gif) no-repeat;
display:block;
height:20px;
padding:5px 20px 5px 30px;
margin:0;
}
.commentTop{
float:right;
background:url(http://cfs.tistory.com/custom/blog/5/53533/skin/images/arrows_up.gif) no-repeat;
display:block;
height:20px;
padding:5px 20px 5px 30px;
margin-top:-40px;
}대략 너비와 높이를 지정해주고 padding로 이미지를 왼쪽으로 두고 글씨는 우측으로 밀었습니다.
padding 와 margin 으로 맞쳐주세요. 제 스킨의 경우 이정도로 해야 정상적으로 보여지기 때문에 이렇게 했습니다.
또 이미지의 경우 원하는 이미지를 업로드하고 상대주소로 변경해주셔도 됩니다.
즉 스킨편집에서 파일업로드하고 , url(./images/이미지파일이름) no-repeat 이런식으로 수정해서 사용해도 됩니다.
주의할점은 위에서도 언급했듯이 float:right 를 적용했기때문에 오른쪽 정렬이 됩니다.
필요없으면 삭제하고 그냥 왼쪽 정렬로 사용하셔도 되고, 만약 이렇게 우측정렬로 했다면 아래의 div id 부분에 clear:both 를 css부분에 추가해줘야 합니다.
혹 모르시는분을 위해 예를들어보겠습니다. 제 스킨의 경우입니다. 대략 비교해보시면 알겁니다.
아래처럼 html부분이 있습니다.
<div id="articleWrap" class="box">
<h2><a href="[#\#_article_rep_link_##]">블로그 상하단 이동하기(anchor,앵커)</a></h2><!-- 포스트제목 -->
<a href="#rp" onclick="" class="atComment">
<s_rp_count>
<span class="cnt">[#\#_article_rep_rp_cnt_##]</span>
</s_rp_count>
</a><!-- 댓글 갯수 -->
<a href="#commentBot" class="articleBot">댓글창으로</a>
<div class="titleWrap">
<span class="info">Posted at
<span class="date">[#\#_article_rep_date_##]</span> //in
<span class="infocategory"></span></span>
<a href="[#\#_article_rep_category_link_##]">[#\#_article_rep_category_##]</a> //by
<span class="author">[#\#_article_rep_author_##]</span>
</div>
</div>9번째줄에 보시면 댓글창으로 이동버튼 아래부분의 id가 titleWrap 이기때문에 css창에서 .titleWrap 부분을 찾아서 clear:both 라고 한줄을 추가해주어야 합니다.
그래야 아래부분부터 우측정렬이 되지 않습니다.