최근 데스크탑 웹페이지 작업을 하면서 뒤로가기 버튼을 넣으면 조금 사용자가 편리하지 않을까 생각하고 고려하고, 심오하게 생각하고, 또 생각하고 하다가 넣게 되었습니다. 그런데 뒤로가기는 어떻게? href에다가 뭘 넣어야하지? 엄청 고민하고 있었습니다. href에 인라인 문구만 기입하면 끝나는 부분이어서 간단했지만, 이 과정을 습득하는데에도 또 폭풍 검색을 하고 말았습니다.
1. href에 그대로 코드 작성
<a href="javascript:history.back();" class="back_btn">뒤로가기</a>
일단, 제가 처음에 열심히 찾아본 방법 중에 깔끔하고, 많은 어려움이 없이 이해가 바로 되었던 코드였습니다. "오호.. 히스토리 빽~ (history.back() ) 이방법으로 하면 끝이구나" 하고 말이죠!
이게 맞는지 아닌지 테스트 해봐야되니까, 일단 테스트! 오호! 성공적 이었습니다.
그럼 일단, 코드가 정상적이라는 것이니깐요, 하지만 학원에서 데스크탑 컨펌을 받는 부분에서 위 코드 안 배웠는데, 어떻게 구현하셨어요? 하시면서 코드를 봐주셨는데, 이 방법말고 다른 방법으로 해보시면 어떨지 해주셔서 본의아니게(?) 수정을 하게 되었습니다.
2. href에 말고, OnClick에 작성
<a href="#" class="btn_back" onclick="history.back(); return false">뒤로가기</a>
뭔가 조금 길어졌습니다. 하지만, 현업하시는 분들이 하는 부분을 참고했는데 이렇게 작성도 하셨습니다. 저도 1번 부분에서 조금 찝찝했던 부분이 href에 링크가 아닌, 다른 코드가 들어가서 다른 방법이 없을까 했었는데, 역시 "#"을 쓰고 onclick 방법이 뭔가 나을 것 같아서 말입니다.
그리고 작성한 return false의 경우는 이벤트 전파를 막는 것이라고 배웠는데, 이제 href에 "#"을 기재하면 상단이 아닌 하단에서 누르게 되면 위로 올라가게 되는데, 그런 부분에서도 막을 수 있는데, 이 방법들을 많이 사용하셔서 작성하였습니다.
2번 역시 뒤로가기 기능이 정상적으로 되는 부분을 확인했습니다. 그래도 피드백을 받은 2번 방법으로 작성을 해보려고 합니다.
'JavaScript' 카테고리의 다른 글
함수의 return은? (0) | 2022.12.17 |
---|---|
chart.js를 살짝 익혀봅시다 (0) | 2021.10.28 |
[JavaScript] 대문자 - 소문자 변환 (toLowerCase, toUpperCase) (0) | 2021.02.03 |
[JavaScript] 0~10까지 숫자 카운트 (0) | 2020.12.11 |
카카오지도 API 연결 성공기 (0) | 2020.11.02 |
댓글