게시글에서 글을 보다가 마우스로 움직이는 것이 순간 너무 귀찮아져서 단축키 기능을 만들면 좋을 것 같다는 생각이 들었다.
게시글 내부에서 바로 home으로 갈 수 있는 단축키는 1, 맨 아래로 스크롤을 내리는 키는 u, 맨 위로 스크롤을 올리는 것은 o로 설정을 했다.
코드는 아래와 같이 구현을 했다.
function goHome() {
window.location.href = '/book'; // 홈 화면 URL (예: '/')
}
function scrollToBottom() {
window.scrollTo(0, document.body.scrollHeight); // 페이지 가장 아래로 스크롤
}
function scrollToTop() {
window.scrollTo(0, 0); // 페이지 가장 위로 스크롤
}
document.addEventListener('keydown', function(event) {
if (event.key === '1') {
goHome(); // '1' 키를 누르면 홈으로 이동
} else if (event.key === 'u') {
scrollToBottom(); // 'u' 키를 누르면 페이지 가장 아래로 스크롤
} else if (event.key === 'o') {
scrollToTop(); // 'o' 키를 누르면 페이지 가장 위로 스크롤
}// '1' 키를 누르면 홈으로 이동
});
이 단축키의 정보를 알려주는 설명서를 만들어야 한다.
처음에 헤더 내부에
<div class="navbar">
<a href="{% url 'index' %}"style="font-family: 'Gugi' ;">책 이야기</a>
<div class="shortcut-box">
<p>단축키 정보</p>
<p><span class="shortcut">1</span> >> HOME</p>
<p><span class="shortcut">u</span> >> 맨 아래로</p>
<p><span class="shortcut">o</span> >> 맨 위로</p>
</div>
</div>
배치를 시켰다. 하지만 디자인이 너무 별로여서 <body> 외부에 단축키설명서를 배치하고 싶었다.
.shortcut-box {
position: absolute;
top: 20px; /* 상단에서 20px 떨어진 위치 */
right: 20px; /* 우측에서 20px 떨어진 위치 */
background: white;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin: 20px; /* 마진 추가 */
}
그래서 absolute라는 것을 사용해서 강제적인 위치를 설정을 해줘서 해결할 수 있었다.
'장고' 카테고리의 다른 글
| 개발 일지 36 - 게시글에 이미지 추가하기..2 (2) | 2024.09.19 |
|---|---|
| 개발일지 35 - 게시글에 이미지 추가하기 - 1 (0) | 2024.09.18 |
| 개발 일지 32 - 댓글 프로필 이미지 마무리 (0) | 2024.09.15 |
| 개발 일지 31 - 댓글 프로필 이미지 추가..3 (0) | 2024.09.14 |
| 개발 일지 30 - 댓글 프로필 이미지 추가 ..2 (2) | 2024.09.13 |