[HTML] 화살표 클릭시 화면 최상단으로 이동하는 기능 구현

아래 영상 17~20초 사이,

오른쪽 하단 화살표 클릭 시 화면 최상단으로 이동하는 기능 구현

코드는 상당히 간단합니다. 화살표 이미지에 링크를 걸어주는 방식입니다.

코드는 아래와 같으며 태그 요소들을 하나씩 짚어보겠습니다.

<a style="position:fixed;bottom:15px;right:15px;" href="#" title="맨 위로"><img src="/image/up.png" width="40" style="opacity: 0.5"></a>

<img> 태그는 HTML 문서에 이미지 링크를 거는 태그입니다.

이미지를 불러오기 위해 이미지 경로를 반드시 지정해주어야 하므로 "src = " 는 필수 값입니다.

src	이미지 source의 경로
width	이미지의 너비

* style 속성은 <img> 태그에 css를 적용하는 것으로 "opacity: 0.5"를 통해 투명도를 50%로 조정한 것입니다.

<img> 태그의 더 많은 속성들은 다음 링크를 참고해주세요 (http://www.tcpschool.com/html-tags/img)

<a> 태그는 링크를 생성하여 거는 태그입니다.

* style 속성은 위와 마찬가지로 <a> 태그에 css를 적용하는 것으로

- "position: fixed"는 화면을 위아래로 스크롤해도 해당 위치에 계속 고정되어 나타나게 합니다.

- "bottom: 15px"는 화면 하단에서 15px 위쪽에 위치

- "right: 20px"는 화면 우측에서 20px 떨어진 곳에 위치

* href에 링크가 가리킬 URL, 즉 이동하고자 하는 위치의 주소를 적어줍니다.

- "#"를 적으면 화면의 최상단으로 이동

* title은 해당 링크에 마우스 커서를 올렸을 때 띄울 문구로, 링크를 설명할 때 활용합니다.

GINA'S IT STORY