[HTML] href 설정, ="javascript://" 와 ="void(0)"

<a href="#"> 하게 되면, 페이지의 상단으로 이동해 버립니다.

그래서 <a href="javascript://" onClick="실제 액션">  하는 경우가 있다.

하지만 ... 좀 더 나은 방법이 있다고 한다.

a href="javascript://" 와 a href="void(0)" 는 같은 건가?

 

a href="javascript://"와 a href="void(0)"는 비슷하지만 약간 다릅니다. 둘 다 링크를 클릭했을 때 페이지 이동을 방지하기 위한 목적으로 사용되지만, 구현 방식과 의미가 다릅니다.

a href="javascript://"

• 의미: javascript:// 스키마를 사용하여 JavaScript 코드를 실행합니다.
• 사용 예시:

<a href="javascript://">Click me</a>

• 특징:
  • 이 코드는 특정 동작을 수행하지 않기 때문에 실제로는 아무 일도 일어나지 않습니다.
  • 때로는 브라우저가 이 링크를 클릭했을 때 페이지 상단으로 스크롤을 이동시킬 수 있습니다.
  • 현대적인 코드에서는 거의 사용되지 않습니다.

a href="void(0)"

• 의미: void(0)는 JavaScript 표현식으로, 아무 일도 일어나지 않게 합니다.
• 사용 예시:

<a href="javascript:void(0)">Click me</a>

• 특징:
  • 링크를 클릭했을 때 아무 일도 일어나지 않도록 합니다.
  • void(0)는 JavaScript에서 아무런 값도 반환하지 않음을 의미합니다.
  • 페이지를 이동시키지 않고 클릭 이벤트를 처리할 때 자주 사용됩니다.

결론

• 두 방법 모두 페이지 이동을 방지하기 위해 사용되지만, javascript:void(0)가 더 명확하고 의도한 대로 동작할 가능성이 높습니다.

따라서 페이지 이동을 막고 JavaScript 이벤트 핸들러를 사용하려는 경우 javascript:void(0)를 사용하는 것이 더 바람직합니다.