HTML A tag: 맨위로가기(Go to the Top) 둥근 이미지 버튼 만들기
*
페이지가 긴 경우에는 맨위로 올라가는(Go to the Top) 버튼이나 텍스트 링크가 있으면 편하다.
옆의 그림에서 보이는 맨위로 가기 버튼에 주어진 속성은 크게 두 가지다.
1) 페이지가 스크롤 되어도 브라우저 창의 특정한 위치에 고정되어 있다
2) 이미지의 크기를 적당히 줄이고, 둥글게 한다
단, 그림에서 보듯이, 둥글게 하는 속성은 크롬과 파이어폭스에서는 제대로 작동하지만 익스플로러에서는 작동하지 않는다.
그림과 같은 버튼은 이미지를 다루는 <img>태그와 링크를 거는 <a>태그 두 가지로 이루어져 있다.
곧, <img>태그로 이미지 크기와 둥근 모양을 만들고, <a>태그로 맨위로 가는 기능을 주고 브라우저의 특정위치에 고정되게 한다.
1. <img> 태그
1) src="이미지 주소(URL)" : 이미지가 저장되어 있는 주소, 곧 이미지를 불러올 수 있는 주소(URL)를 지정한다
2) style 속성에서
a) 이미지의 가로(width) 및 세로(height) 크기를 지정한다
b) border-radius 로 이미지를 둥글게 만든다. 수자를 적당히 조절하여 모양이 예쁘게 되도록 하면 된다.
2. <a> 태그
1) href 에 링크의 목적지를 "#"으로 지정하여, 링크가 클릭되면 현재 페이지의 맨 위로 이동하도록 한다
2) title은 링크의 이름을 지정하는 것이므로, 쓰지 않아도 되고 쓰도 된다
3) style 속성에서
a) display: scroll을 추가하여 링크가 클릭되면 목적지 ("#")로 스크롤 되게 한다
b) position을 fixed로 지정하여 페이지가 스크롤 되더라도 링크는 스크롤되지 않고 고정되어 있도록 한다
bottom은 브라우저의 맨 아래 선으로 부터의 거리이고, right는 브라우저의 맨 오른쪽 선에서 부터의 거리이다. 링크를 브라우저 창의 왼쪽에 두려면 left로 지정하면 된다
이 예에서는 링크의 위치를 브라우저의 맨 아래선에서 위쪽으로 30픽셀 지점과 브라우저의 오른쪽 선에서 왼쪽으로 5픽셀이 만나는 지점으로 지정한 것이다. 실제 적용했을 때의 위치는 위의 그림에서 보는 것과 같다
c) onfocus에 'this.blur()'를 주어, 링크가 클릭되었을 때,테두리 점선이 나타나지 않도록 한다. 이 속성은 주지 않아도 되지만 테두리 점선이 나타나면, 보기에 따라 다르겠지만, 좀 어수선한 느낌이 들어 추가한 것이다
3. <img> 태그를 <a>태그로 둘러 싸기
위에서 만든 <img ~~ /> 태그를 <a> </a>태그로 싼다.
완성된 태그를 적용하면, 맨위 그림에서와 같은 위치에 맨위로가기 버튼이 만들어 진다.
참고로, 다이나믹뷰 템플릿에서는 제대로 작동되지 않는다.
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...
페이지가 긴 경우에는 맨위로 올라가는(Go to the Top) 버튼이나 텍스트 링크가 있으면 편하다.
옆의 그림에서 보이는 맨위로 가기 버튼에 주어진 속성은 크게 두 가지다.
1) 페이지가 스크롤 되어도 브라우저 창의 특정한 위치에 고정되어 있다
2) 이미지의 크기를 적당히 줄이고, 둥글게 한다
단, 그림에서 보듯이, 둥글게 하는 속성은 크롬과 파이어폭스에서는 제대로 작동하지만 익스플로러에서는 작동하지 않는다.
그림과 같은 버튼은 이미지를 다루는 <img>태그와 링크를 거는 <a>태그 두 가지로 이루어져 있다.
곧, <img>태그로 이미지 크기와 둥근 모양을 만들고, <a>태그로 맨위로 가는 기능을 주고 브라우저의 특정위치에 고정되게 한다.
1. <img> 태그
<img
src="~~이미지.주소"
style="width:25px; height:25px; border-radius: 15px;"
/>
src="~~이미지.주소"
style="width:25px; height:25px; border-radius: 15px;"
/>
1) src="이미지 주소(URL)" : 이미지가 저장되어 있는 주소, 곧 이미지를 불러올 수 있는 주소(URL)를 지정한다
2) style 속성에서
a) 이미지의 가로(width) 및 세로(height) 크기를 지정한다
b) border-radius 로 이미지를 둥글게 만든다. 수자를 적당히 조절하여 모양이 예쁘게 되도록 하면 된다.
2. <a> 태그
<a
href="#"
title="Back to Top"
style="display: scroll; position: fixed; bottom: 30px; right: 5px;"
onfocus='this.blur()'>
</a>
href="#"
title="Back to Top"
style="display: scroll; position: fixed; bottom: 30px; right: 5px;"
onfocus='this.blur()'>
</a>
1) href 에 링크의 목적지를 "#"으로 지정하여, 링크가 클릭되면 현재 페이지의 맨 위로 이동하도록 한다
2) title은 링크의 이름을 지정하는 것이므로, 쓰지 않아도 되고 쓰도 된다
3) style 속성에서
a) display: scroll을 추가하여 링크가 클릭되면 목적지 ("#")로 스크롤 되게 한다
b) position을 fixed로 지정하여 페이지가 스크롤 되더라도 링크는 스크롤되지 않고 고정되어 있도록 한다
bottom은 브라우저의 맨 아래 선으로 부터의 거리이고, right는 브라우저의 맨 오른쪽 선에서 부터의 거리이다. 링크를 브라우저 창의 왼쪽에 두려면 left로 지정하면 된다
이 예에서는 링크의 위치를 브라우저의 맨 아래선에서 위쪽으로 30픽셀 지점과 브라우저의 오른쪽 선에서 왼쪽으로 5픽셀이 만나는 지점으로 지정한 것이다. 실제 적용했을 때의 위치는 위의 그림에서 보는 것과 같다
c) onfocus에 'this.blur()'를 주어, 링크가 클릭되었을 때,테두리 점선이 나타나지 않도록 한다. 이 속성은 주지 않아도 되지만 테두리 점선이 나타나면, 보기에 따라 다르겠지만, 좀 어수선한 느낌이 들어 추가한 것이다
3. <img> 태그를 <a>태그로 둘러 싸기
위에서 만든 <img ~~ /> 태그를 <a> </a>태그로 싼다.
완성된 태그를 적용하면, 맨위 그림에서와 같은 위치에 맨위로가기 버튼이 만들어 진다.
<a
href="#"
title="Back to Top"
style="display:scroll;position:fixed;bottom:30px;right:5px;"
onfocus='this.blur()'>
<img
src="http:~~이미지.주소"
style="width:25px; height:25px; border-radius: 15px;"
/>
</a>
href="#"
title="Back to Top"
style="display:scroll;position:fixed;bottom:30px;right:5px;"
onfocus='this.blur()'>
<img
src="http:~~이미지.주소"
style="width:25px; height:25px; border-radius: 15px;"
/>
</a>
참고로, 다이나믹뷰 템플릿에서는 제대로 작동되지 않는다.
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...