웹 페이지에서 하단 오른쪽에 고정된 위치에 있는 이미지 클릭시 이동
목차를 클릭하면 원하는 글로 이동합니다.
웹 페이지에서 하단 오른쪽에 고정된 위치에 있는 이미지 클릭시 이동
아래 코드는 특정 웹 페이지에서 사용되는 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="#": 클릭 시 이동할 링크를 현재 페이지로 설정합니다. 즉, 현재 페이지를 새로고침하는 효과를 줍니다.
- style 속성: 링크의 스타일을 정의합니다.
- <img> 태그: 이미지를 표시하는 태그입니다.
- src: 이미지 파일의 경로를 지정합니다.
- border="0": 이미지 주변에 테두리를 없앱니다.
- width="100" height="70": 이미지의 가로 폭과 세로 높이를 지정합니다.
이 코드는 사용자가 이미지를 클릭하면 현재 페이지를 다시 로드하는 효과를 가지고 있습니다.
LIST
'나만의 티스토리' 카테고리의 다른 글
[CSS] a 태그 hover 모음 (0) | 2023.12.23 |
---|---|
티스토리 자동 목차 코드 및 순서 정리 (1) | 2023.12.22 |
티스토리 자동 목차 코드 및 순서 (0) | 2023.12.22 |
페이지 하단 고정된 위치에 "top"으로 이동하는 html코드 (0) | 2023.12.17 |
티스토리 본문 글 사이드에 고정 링크 넣기 (0) | 2023.12.17 |
댓글