본문 바로가기

웹 페이지에서 하단 오른쪽에 고정된 위치에 있는 이미지 클릭시 이동

몽테기 2023. 12. 18.
목차를 클릭하면 원하는 글로 이동합니다.

웹 페이지에서 하단 오른쪽에 고정된 위치에 있는 이미지 클릭시 이동

아래 코드는 특정 웹 페이지에서 사용되는 HTML 코드입니다. 이 코드는 사용자가 웹 페이지에서 하단 오른쪽에 고정된 위치에 있는 이미지를 클릭하면 지정된 링크로 이동하게 됩니다.

 

<!-- 이동 Start --> <a style="display: scroll; position: fixed; bottom: 200px; right: 00px;" href="#" > <img src="./images/poll.png" border="0" width="100" height="70"/> </a> <!-- 이동 END -->

 

해당 코드는 이동 링크를 나타내는 HTML 코드입니다. 아래는 코드의 해석입니다:

  • <a> 태그: 하이퍼링크를 정의하는 태그입니다.
    • style 속성: 링크의 스타일을 정의합니다.
      • display: scroll: 스크롤이 가능하도록 설정합니다.
      • position: fixed: 화면에 고정된 위치에 표시됩니다.
      • bottom: 200px: 하단에서 200픽셀 떨어진 위치에 표시됩니다.
      • right: 00px;: 오른쪽에서 0픽셀 떨어진 위치에 표시됩니다.
    • href="#": 클릭 시 이동할 링크를 현재 페이지로 설정합니다. 즉, 현재 페이지를 새로고침하는 효과를 줍니다.
  • <img> 태그: 이미지를 표시하는 태그입니다.
    • src: 이미지 파일의 경로를 지정합니다.
    • border="0": 이미지 주변에 테두리를 없앱니다.
    • width="100" height="70": 이미지의 가로 폭과 세로 높이를 지정합니다.

이 코드는 사용자가 이미지를 클릭하면 현재 페이지를 다시 로드하는 효과를 가지고 있습니다.

LIST

댓글


Scroll Triggered Advertisement
+