HTML A tag : 페이지의 특정 위치나 맨 아래로 가기(Go to Bottom) 둥근 버튼 만드는 방법
페이지가 길 때는 페이지의 맨 위로 또는 특정한 위치나 맨 아래로 가기 버튼이 있으면 편할 경우가 많다. 맨 위로가기 버튼을 만드는 방법은 앞서 설명하였고, 이번에는 특정한 위치나 페이지 맨아래로 가기 버튼을 만드는 방법이다. (맨 위로가기 버튼 만드는 방법은 링크 페이지 참조)
버튼을 눌렀을 때 스크롤이 되는 위치를 지정하는 일과 버튼을 만들어 원하는 위치에 붙이는 일 두 가지로 나누어 설명한다.
1. 스크롤 위치 지정
=> 버튼을 누르면 어느 위치로 스크롤이 되게 하려는 지를 정한다.
=> 블로그나 웹페이지의 HTML 편집창에서 원하는 위치에 아래의 코드를 추가하고 저장한다.
ㅇ 버튼을 누르면, 브라우저는 id가 'gotobottom'인 곳까지 스크롤다운 또는 스크롤업을 하게 된다.
아래의 그림은 구글블로그의 HTML편집창을 예로 든 것이며, 페이지의 맨 아래까지 스크롤 되도록 하고자 </body>태그 바로 위에 위치지정 코드를 넣었다.
2. 버튼 만들어 넣기
=> 아래에서 보는 것처럼, 버튼으로 쓸 그림을 다루는 <IMG> 태그와 링크를 걸 <A> 태그를 묶어서 만든다.
=> 만든 버튼 코드를 페이지나 블로그의 원하는 위치에 붙인다.
구글블로그에서는, 블로그의 HTML가젯으로 추가하면 되고, HTML가젯의 위치는 어디에 두든 상관이 없다. 다만, 다른 가젯 보다 위에 놓으면 다른 가젯보다 시간적으로 먼저 표시된다.
[지정한 위치로 스크롤되게 하는 코드]
<A>태그
ㅇ href="여기에 위에서 만든 id의 이름을 적는다" id의 이름 앞에 샾(#) 기호를 붙인다.
ㅇ title="~" 부분은 알기 쉽게 적어도 되고, 없어도 된다
ㅇ style=" ~" 에서, bottom과 right의 숫자를 페이지에 어울는 위치로 조정하면 된다. bottom은 브라우저의 맨 아래선으로부터 위쪽으로의 거리이고, right는 브라우저의 맨 오른쪽으로부터의 거리이다.
fixed는 위치를 고정시켜서, 페이지가 스크롤되어도 버튼은 같이 스크롤되지 않고 항상 그자리에 있게 하는 속성이다. 경우에 따라서는 같이 스크롤되도록 할 필요가 있을 수 있다. 그럴 때는 absolute나 relative 속성을 쓰면 된다. 이에 대한 자세한 설명은 링크 페이지에 자세히 설명되어 있다.
ㅇ rel="~" 부분은 없어도 되고 적어 주어도 된다. 검색엔진에게 이 링크는 따라가지 말라고 알려 주는 속성이다
ㅇ onfocus="this.blur()'은 버튼을 눌렀을 때, 버튼 둘레에 점선이 나타나지 않도록 한 속성이다. 없어도 되지만, 테두리 점선이 표시되면 다소 번잡하다면 넣어 주면 된다
<IMG> 태그
ㅇ src="여기에 버튼으로 쓸 그림 이미지의 URL주소를 적는다"
ㅇ style="~"에서 width는 그림의 가로길이, height는 그림의 세로길이를 말하고, border-radius는 테두리를 둥글게 하는 속성이다. 숫자를 조정하면서 잘 어울리도록 맞추면 된다
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...
버튼을 눌렀을 때 스크롤이 되는 위치를 지정하는 일과 버튼을 만들어 원하는 위치에 붙이는 일 두 가지로 나누어 설명한다.
1. 스크롤 위치 지정
=> 버튼을 누르면 어느 위치로 스크롤이 되게 하려는 지를 정한다.
=> 블로그나 웹페이지의 HTML 편집창에서 원하는 위치에 아래의 코드를 추가하고 저장한다.
<div id='gotobottom' />
ㅇ id 이름 (위 예에서는 gotobottom) 은 기억하기 쉬운 것으로 하면 된다. 다만, 다른 곳에서 이미 지정한 이름과 중복되면 안된다.ㅇ 버튼을 누르면, 브라우저는 id가 'gotobottom'인 곳까지 스크롤다운 또는 스크롤업을 하게 된다.
아래의 그림은 구글블로그의 HTML편집창을 예로 든 것이며, 페이지의 맨 아래까지 스크롤 되도록 하고자 </body>태그 바로 위에 위치지정 코드를 넣었다.
2. 버튼 만들어 넣기
=> 아래에서 보는 것처럼, 버튼으로 쓸 그림을 다루는 <IMG> 태그와 링크를 걸 <A> 태그를 묶어서 만든다.
=> 만든 버튼 코드를 페이지나 블로그의 원하는 위치에 붙인다.
구글블로그에서는, 블로그의 HTML가젯으로 추가하면 되고, HTML가젯의 위치는 어디에 두든 상관이 없다. 다만, 다른 가젯 보다 위에 놓으면 다른 가젯보다 시간적으로 먼저 표시된다.
[지정한 위치로 스크롤되게 하는 코드]
<a
href="#gotobottom"
title="Go to Bottom"
style="display: scroll; position: fixed; bottom: 30px; right: 5px;"
rel="nofollow"
onfocus='this.blur()'
>
<img
src="그림 이미지 주소(URL)"
style="width: 25px; height: 25px; border-radius: 15px;"
/>
</a>
href="#gotobottom"
title="Go to Bottom"
style="display: scroll; position: fixed; bottom: 30px; right: 5px;"
rel="nofollow"
onfocus='this.blur()'
>
<img
src="그림 이미지 주소(URL)"
style="width: 25px; height: 25px; border-radius: 15px;"
/>
</a>
<A>태그
ㅇ href="여기에 위에서 만든 id의 이름을 적는다" id의 이름 앞에 샾(#) 기호를 붙인다.
ㅇ title="~" 부분은 알기 쉽게 적어도 되고, 없어도 된다
ㅇ style=" ~" 에서, bottom과 right의 숫자를 페이지에 어울는 위치로 조정하면 된다. bottom은 브라우저의 맨 아래선으로부터 위쪽으로의 거리이고, right는 브라우저의 맨 오른쪽으로부터의 거리이다.
fixed는 위치를 고정시켜서, 페이지가 스크롤되어도 버튼은 같이 스크롤되지 않고 항상 그자리에 있게 하는 속성이다. 경우에 따라서는 같이 스크롤되도록 할 필요가 있을 수 있다. 그럴 때는 absolute나 relative 속성을 쓰면 된다. 이에 대한 자세한 설명은 링크 페이지에 자세히 설명되어 있다.
ㅇ rel="~" 부분은 없어도 되고 적어 주어도 된다. 검색엔진에게 이 링크는 따라가지 말라고 알려 주는 속성이다
ㅇ onfocus="this.blur()'은 버튼을 눌렀을 때, 버튼 둘레에 점선이 나타나지 않도록 한 속성이다. 없어도 되지만, 테두리 점선이 표시되면 다소 번잡하다면 넣어 주면 된다
<IMG> 태그
ㅇ src="여기에 버튼으로 쓸 그림 이미지의 URL주소를 적는다"
ㅇ style="~"에서 width는 그림의 가로길이, height는 그림의 세로길이를 말하고, border-radius는 테두리를 둥글게 하는 속성이다. 숫자를 조정하면서 잘 어울리도록 맞추면 된다
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...