페이지 하단 고정된 위치에 "top"으로 이동하는 html코드
목차를 클릭하면 원하는 글로 이동합니다.
페이지 하단 고정된 위치에 "top"으로 이동하는 html코드
이 코드는 페이지 하단에 고정된 위치에 "Top"으로 이동하는 링크를 생성하는 HTML 코드입니다. 아래는 코드의 각 부분에 대한 설명입니다.
<a style="display:scroll;position:fixed;bottom:100px;right:10px;" href="#" title=Top> <img src=./images/top.png border="0"/></a>
- <a>: 링크를 나타내는 HTML 앵커(anchor) 요소입니다.
- style="display:scroll;position:fixed;bottom:100px;right:10px;": 스타일 속성으로, 다음과 같은 속성이 설정되어 있습니다:
- display:scroll;: 스크롤이 가능한 상태일 때 스크롤 바를 표시합니다.
- position:fixed;: 요소를 화면에 고정시킵니다. 스크롤이 발생해도 요소가 움직이지 않습니다.
- bottom:100px;: 화면 하단으로부터 100픽셀 떨어진 위치에 요소를 배치합니다.
- right:10px;: 화면 오른쪽으로부터 10픽셀 떨어진 위치에 요소를 배치합니다.
- href="#": 링크가 클릭되었을 때 이동할 대상을 나타내는 속성입니다. 여기서는 #을 사용하여 현재 페이지의 맨 위로 이동하도록 설정되어 있습니다.
- title=Top: 링크에 마우스를 올렸을 때 나타나는 툴팁(설명글)을 설정하는 속성입니다. 여기서는 "Top"으로 설정되어 있습니다.
- <img src=./images/top.png border="0"/>: 이미지를 표시하는 <img> 요소로, 다음과 같은 속성이 설정되어 있습니다:
- src=./images/top.png: 이미지 파일의 경로를 지정합니다. 여기서는 "./images/top.png"로 설정되어 있습니다.
- border="0": 이미지 주변의 테두리(border)를 없애는 속성입니다.
따라서 이 코드는 페이지 우측 하단에 고정된 위치에 "Top"으로 이동하는 링크를 나타냅니다. 해당 링크는 이미지로 구성되어 있으며, 스크롤이 가능한 경우 스크롤 바를 표시하며 항상 화면에 고정됩니다.
응용해 보기
이 코드는 페이지 하단 우측에 고정된 "Top"으로 이동하는 링크를 생성하는데 사용될 수 있습니다. 이를 다양한 응용 예시로 활용하는 몇 가지 아이디어는 다음과 같습니다
1. 다른 링크로 이동하기:
- <a> 태그의 href 속성에 다른 페이지 또는 웹사이트의 주소를 설정하여 해당 위치로 이동할 수 있습니다.
htmlCopy code
<a style="display:scroll;position:fixed;bottom:100px;right:10px;" href="https://example.com" title="Go to Example"> <img src="./images/top.png" border="0" alt="Top"> </a>
2. 다른 이미지 사용하기:
- <img> 태그의 src 속성에 다른 이미지 파일의 경로를 지정하여 다른 디자인의 이미지를 사용할 수 있습니다.
htmlCopy code
<a style="display:scroll;position:fixed;bottom:100px;right:10px;" href="#" title="Back to Top"> <img src="./images/arrow-up.png" border="0" alt="Back to Top"> </a>
3. 다양한 효과 추가하기:
- CSS 애니메이션을 사용하여 링크에 호버 효과를 추가하거나, 다른 스타일을 지정하여 더 동적으로 만들 수 있습니다.
htmlCopy code
<style> a:hover { transform: scale(1.1); transition: transform 0.3s ease-in-out; } </style> <a style="display:scroll;position:fixed;bottom:100px;right:10px;" href="#" title="Back to Top"> <img src="./images/arrow-up.png" border="0" alt="Back to Top"> </a>
4. 페이지 내 특정 섹션으로 스크롤:
- href 속성에 페이지 내 특정 섹션의 ID를 지정하여 해당 섹션으로 스크롤할 수 있습니다.
htmlCopy code
<a style="display:scroll;position:fixed;bottom:100px;right:10px;" href="#section2" title="Go to Section 2"> <img src="./images/top.png" border="0" alt="Top"> </a> <div id="section2"> <!-- 섹션 2의 내용 --> </div>
응용 예시들은 코드를 다양하게 변형하여 사용할 수 있는 아이디어를 제공합니다. 이를 참고하여 프로젝트나 웹페이지의 디자인에 맞게 수정하여 활용할 수 있습니다.
반응형
'정보저장소' 카테고리의 다른 글
티빙 12월 라인업 [마에스트라, 환승연애2, 이재 곧 죽습니다.] (1) | 2023.12.18 |
---|---|
웹 페이지에서 하단 오른쪽에 고정된 위치에 있는 이미지 클릭시 이동 (0) | 2023.12.18 |
티스토리 본문 글 사이드에 고정 링크 넣기 (0) | 2023.12.17 |
앱스토어 폭로! '인앱결제 강제' 파문의 시작 (0) | 2023.12.15 |
어도비 포토샵 2022 크랙 무료 다운로드 Photoshop 2022 download (0) | 2023.12.14 |
댓글