자바스크립트 기본 alert 창에서 하이퍼링크는 불가능합니다
결론부터 말씀드리면, 자바스크립트의 기본 alert() 함수로 생성되는 경고창(alert box)에는 하이퍼링크를 표시할 수 없습니다. 브라우저가 제공하는 기본 alert 창은 일반 텍스트만 출력하도록 설계되어 있기 때문에, HTML 태그나 링크 요소를 삽입해도 그대로 문자열로만 보여지게 됩니다.
해결 방법: 커스텀 알림창(다이얼로그) 사용하기
알림창 안에 클릭 가능한 링크를 넣고 싶다면, 기본 alert 대신 커스텀 다이얼로그 위젯을 사용해야 합니다. 직접 만든 다이얼로그는 HTML과 CSS로 자유롭게 구성할 수 있으므로, 버튼뿐 아니라 하이퍼링크, 이미지 등 다양한 요소를 포함시킬 수 있습니다.
아래는 다이얼로그 알림 위젯을 활용했을 때의 예시 화면입니다.
구현 시 참고 사항
- HTML의
<div>와 CSS로 알림창 형태를 디자인합니다. - JavaScript로 열기/닫기 동작을 제어하고, 배경 오버레이를 추가하면 기본 alert와 비슷한 UX를 구현할 수 있습니다.
- 부트스트랩(Bootstrap) 모달이나 jQuery UI Dialog 같은 라이브러리를 활용하면 더욱 간편하게 만들 수 있습니다.
구체적인 구현 방법이 궁금하시다면 Dialog Alert Widget의 소스 코드를 참고해 보시기 바랍니다. 실제 동작하는 코드를 분석하면 커스텀 알림창에 링크를 추가하는 과정을 쉽게 이해할 수 있습니다.