a태그 링크 없을때 <a href="#

현재 코드도 동작은 하지만, 웹 접근성 측면에서 javascript:void(0);를 사용하는 것은 권장되지 않아.
스크린 리더가 "링크"라고 인식하지만, 실제로 이동할 곳이 없기 때문이야.

---

✅ 더 나은 코드 (웹 접근성 고려)

1. href="#" + event.preventDefault(); 사용

html

복사편집

<a href="#" onclick="event.preventDefault(); showDtl('#aa')" class="notice-cover" role="button">버튼</a>

🔹 이렇게 하면?
✔ href="#"는 기본적으로 페이지를 이동시키려 하지만, event.preventDefault();가 이를 막아줌.
✔ role="button"을 추가하여 스크린 리더가 "버튼"으로 인식할 수 있도록 함.

---

2. button 태그 사용 (더 좋은 접근성)

html

복사편집

<button type="button" onclick="showDtl('#aa')" class="notice-cover">버튼</button>

🔹 이렇게 하면?
✔ button 태그는 원래 클릭 가능한 요소라서 role="button"이 필요 없음.
✔ href="#" 같은 불필요한 속성이 없어서 더 직관적이고 접근성이 좋음.

---

🚫 javascript:void(0); 비추천 이유

html

복사편집

<a href="javascript:void(0);" onclick="showDtl('#aa')" class="notice-cover" role="button">

• javascript:void(0);는 링크를 클릭해도 아무 동작을 하지 않도록 막아주는 용도이지만,
  웹 접근성 검사에서 "의미 없는 링크"로 감지될 가능성이 있음.
• 스크린 리더가 "링크"라고 인식하지만, 실제로 이동할 곳이 없기 때문에 혼란을 줄 수 있음.

---

📌 결론

✔ button 태그 사용이 가장 좋음.
✔ a 태그를 써야 한다면 href="#" + event.preventDefault();를 적용하는 게 좋음.
✔ javascript:void(0);는 가능하면 사용하지 않는 게 좋음.

이렇게 하면 웹 접근성을 유지하면서도 원하는 기능을 구현할 수 있어! 😊

-----------------------------------------

 

event.preventDefault(); 대신 return false;를 사용할 수도 있지만, 웹 표준과 유지보수성을 고려하면 event.preventDefault();를 사용하는 것이 더 좋음.

---

✅ 차이점 정리

event.preventDefault();return false;

기능	이벤트의 기본 동작(링크 이동 등)만 막음	기본 동작 + 이벤트 전파도 차단 (특정 경우)
웹 표준	최신 표준, 명확한 동작	jQuery에서 기본 동작 차단 용도로 많이 쓰였지만, 최신 표준에서는 권장되지 않음
사용 위치	이벤트 핸들러 내부에서 사용	onclick 속성이나 이벤트 핸들러에서 사용 가능
영향 범위	현재 이벤트에만 적용	특정 브라우저에서 이벤트 전파도 막힐 수 있음 (비권장)

---

✅ 올바른 코드 예제

1. event.preventDefault(); 사용 (추천)

html

복사편집

<a href="#" onclick="event.preventDefault(); showDtl('#aa');" class="notice-cover" role="button">버튼</a>

• 웹 표준 방식이라 유지보수에 좋고 명확함.
• event.preventDefault();는 링크 이동만 막고, 다른 이벤트에는 영향을 주지 않음.

---

2. return false; 사용 (가능하지만 비추천)

html

복사편집

<a href="#" onclick="showDtl('#aa'); return false;" class="notice-cover" role="button">버튼</a>

• 동작은 하지만, 브라우저에 따라 이벤트 전파가 차단될 수도 있어서 예상치 못한 문제를 일으킬 가능성이 있음.
• 특히 jQuery에서는 return false;가 preventDefault(); + stopPropagation();처럼 동작해서, 이벤트가 부모 요소로 전달되지 않을 수도 있음.