반응형
HTML에서 <a> 태그는 기본적으로 링크 이동을 위한 요소지만, JavaScript 함수를 실행하는 용도로도 사용될 수 있다.
그러나 사용 방식에 따라 스크롤 이동, URL 관리, 페이지 로딩 등의 동작이 달라질 수 있으므로 각각의 차이점을 정확히 인지하고 사용할 수 있도록 하자.

 

 

◆ 예제코드

 

<body>
	<a onclick="callMethod('onclick 속성 방식');">onclick 속성 방식</a><br>
	<a href="" onclick="callMethod('빈 href 방식');">빈 href 방식</a><br>
	<a href="#" onclick="callMethod('해시(#) href 방식');">해시(#) href 방식</a><br>
	<a href="javascript:void(0)" onclick="callMethod('javascript:void(0) 방식');">javascript:void(0) 방식</a><br>
	<a href="javascript:callMethod('javascript 직접 호출 방식');">javascript 직접 호출 방식</a>

	<script>
		function callMethod(param) {
			alert(param);
		}
	</script>
</body>

 

 

◆ onclick 속성 방식

<a onclick="callMethod('onclick 속성 방식');">


< 장점 >

  1. 클릭해도 화면이 이동하지 않는다. (스크롤 이동 없음)
  2. href가 없으므로 브라우저 주소창이 변하지 않는다. (URL에 영향 없음)
  3. 페이지가 리로드되지 않는다. (새로고침 없음)

< 단점 >

  1. 브라우저는 이 요소를 일반 텍스트처럼 처리하기 때문에 커서가 기본값(텍스트 선택 커서)으로 표시된다.
  2. 마찬가지로 위의 이유로 a 태그의 기본적인 링크 스타일(파란색 & 밑줄)이 적용되지 않는다. (cursor: pointer; 스타일을 추가해야 함)

 

 

◆ 빈 href 방식

 <a href="" onclick="callMethod('빈 href 방식');">

 

< 장점 >

  1. a 태그의 기본 스타일(파란색 & 밑줄)이 유지된다.

< 단점 >

  1. 일부 브라우저에서 의도하지 않은 새로고침이 발생할 수 있다.
    href=""는 현재 페이지 URL을 의미하는데 브라우저가 href=""을 처리하는 방식에 따라, 클릭 시 페이지가 새로고침 되면서 화면 위로 스크롤되는 것처럼 보일 수 있다.

 

 

◆ 해시(#) href 방식 

<a href="#" onclick="callMethod('해시(#) href 방식');">

 

< 장점 >

  1. a 태그의 기본 스타일(파란색 & 밑줄)이 유지된다.
  2. 페이지가 리로드되지 않는다. (새로고침 없음)

< 단점 >

  1. 클릭 시 페이지 맨 위로 스크롤될 수 있다.
  2. URL 뒷부분에 #이 추가된다.

 

 

◆ javascript:void(0) 방식

<a href="javascript:void(0)" onclick="callMethod('javascript:void(0) 방식');">

 

< 장점 >

  1. 클릭해도 화면이 움직이지 않는다. (스크롤 이동 없음)
  2. void(0)을 사용해 브라우저가 페이지 이동을 시도하지 않는다. (URL 변경 없음)
  3. 새로고침이 발생하지 않는다.

< 단점 >

  1. javascript: 스키마를 사용해야 하기 때문에 코드가 깔끔하지 않을 수 있다.

 

 

◆ javascript 직접 호출 방식

<a href="javascript:callMethod('javascript 직접 호출 방식');">

 

< 장점 >

  1. a 태그의 기본 스타일(파란색 & 밑줄)이 유지된다.
  2. JavaScript를 직접 실행할 수 있다.

< 단점 >

  1. 코드를 동적으로 생성하거나 외부 입력을 받는 경우, XSS(교차 사이트 스크립팅) 공격의 위험이 있을 수 있다.
    예를 들어 <a href="javascript:callMethod(" + userInput + '')"> 처럼 사용자가 입력한 값이 href에 포함될 때,
    입력한 값에 악성 스크립트가 포함되면 JavaScript 코드가 실행될 때 보안 이슈가 발생할 수 있다.
    보안과 유지보수를 고려할 때 href="javascript:..." 방식은 피하는 것이 좋다.

 

 

◆ 정리

< 방식별 비교 (스크롤 이동, URL 관리, 페이지 로딩) >

방식 스크롤 이동 URL 관리 페이지 로딩
onclick 속성 방식
<a onclick="...">		 이동 없음 URL에 영향 없음 새로고침 없음
빈 href 방식 
<a href="">		 최상단으로 이동 가능 (일부 브라우저에서) href=""는 현재 페이지 URL을 의미 일부 브라우저에서 새로고침될 가능성 있음
해시(#) href 방식
<a href="#">		 최상단으로 이동 URL에 #이 추가됨 새로고침 없음
javascript:void(0) 방식
<a href="javascript:void(0)">		 이동 없음 URL에 영향 없음 새로고침 없음
javascript 직접 호출 방식
<a href="javascript:callMethod('...');">		 이동 없음 URL에 영향 없음 새로고침 없음

 

 

< a 태그에서 JavaScript를 실행할 때 고려할 점 >

  1. 페이지 이동을 원하지 않는다면 event.preventDefault();를 사용한다.
  2. 불필요한 URL 변경을 피하기 위해 javascript:void(0) 또는 onclick 방식을 고려하는 편이 좋다.
    단,  onclick 방식을 사용할 때는 href="#" 을 사용하면 페이지 상단으로 이동하면서 URL이 변경되기 때문에 event.preventDefault()를 추가하도록 한다.

 

글 내용 중 잘못된 부분이 있거나, 첨부하실 내용이 있으시면 댓글로 남겨주세요. 공부하는데 많은 도움이 됩니다.
-- 기억의 유효기간은 생각보다 짧다. --

 

 

반응형

'▹ 마크업 언어 > HTML (HyperText Markup Language)' 카테고리의 다른 글

iPhone(아이폰)에서 video가 전체화면 모드에서 재생되는 문제  (0) 2025.01.08
[HTML] input태그 date타입에 placeholder 지정하기  (0) 2024.08.08
[HTML] input태그 date타입 년도 6자리 (YYYYYY-MM-DD)입력 해결방법  (0) 2024.02.12

티스토리툴바