넷 상의 글을 읽다가 맨 위로 올라가고 싶을 때가 있다.

요즘은 대부분의 사이트에 있는 기능으로

이 전 포스트인 <a> 태그와 태그 스타일 속성의 poisiton:fixed;를 활용하면 충분히 만들 수 있다.


여기서 추가되는 속성은 <a> 태그의 display:scroll 뿐이다.


코드는 다음과 같다.


<div style="position:fixed;right:10px;bottom:10px;">

<a style="display:scroll" href="#">

<img src="./images/up.png" />

</a>

</div>



스타일 속성은 <div> 태그에서 줄 수도 있고 <a>태그에서도 줄 수 있으므로

간단히 작성할 때 다음과 같이 쓸 수 있다.


<a style="position:fixed;right:10px;bottom:10px;display:scroll" href="#">

<img src="./images/up.png" />

</a>





'프로그래밍 > HTML' 카테고리의 다른 글

HTML 맨 위로 이동하기  (0) 2017.12.11
HTML 이미지 위치 고정  (0) 2017.05.17
HTML <a> 태그  (0) 2016.07.15

+ Recent posts

티스토리 툴바