a태그를 통해 링크이동 작업을 하던 도중, 버튼태그 disabled 가 아닌 a태그의 링크이동을 막는 코드를 기록해보면 좋을 것 같아서 작성해본다.
CSS로 비활성화된 링크를 시각적으로 표시하기
우선, 비활성화된 링크가 사용자에게 명확히 보이도록 CSS에서 스타일을 설정했다.
pointer-events: none; 속성을 추가하면 클릭이 완전히 막히고, 회색으로 스타일링하면서
시각적으로 비활성화 상태임을 사용자에게 알려준다.
<html>
<a href="https://<?=$site?>/view?seq=<?=$val['to_seq']?>" class="<?= $seq == $val['to_seq'] ? 'disabled' : '' ?>">
</html>
<style>
.disabled {
pointer-events: none; /* 클릭을 막음 */
color: gray; /* 비활성화 상태 시각화 */
cursor: default; /* 마우스 커서 기본 상태 */
text-decoration: none; /* 밑줄 제거 */
}
</style>나는 seq에 따라 현재 열려있는 페이지의 경우 비활성화가 필요하여 삼항연산자를 두었다.
.disabled 해당 코드를 통해 시각적으로 비활성화된 링크임을 알 수 있게 된다.
사용자들이 실수로 클릭하는 일도 줄어들 것!
