2021-02-26 TIL(at work)

HTML

1. <i>

• 기본서에서 HTML의 태그에 관해 공부했을 때는, <i>는 텍스트를 강조하는 태그라고 적혀있었다.
• 최근 업무를 진행하면서 작은 이미지를 넣고, 그 이미지에 마우스 오버를 하면 텍스트 박스가 노출되도록 해 달라는 요청을 받았다. 회사에서 서비스하고 있는 사이트를 둘러보면서 비슷한 기능이 있는지 찾아보았는데, <i> 태그를 이용하여 이와 비슷한 기능을 구현하고 있는 코드를 발견했다.

<i class="icon" title="마우스를 오버하면 텍스트 박스가 노출됩니다."></i>

• 이 방식은 ‘fontawesome’에서도 아이콘을 넣을 때 사용하는 방법이었는데, css를 이용하여 미리 아이콘 이미지를 지정해두고 이를 HTML에서 활용하고 있는 방법이었다. (https://fontawesome.com/icons)

.icon{width:20px; height:20px; background-image:url(../../img/icon.png);}

2. javascript=void(0)

• html 소스를 살펴보다 보면, 종종 아래와 같은 코드를 발견할 수 있었다. 특히 내가 보게된 소스에서는 javascript:void(0)은 <a> 태그와 함께 쓰이고 있었다.

<a href="javascript:void(0)">클릭</a>

• 자바스크립트에서 void(0)은 평가 결과가 undefined이다. 따라서 해당 링크를 클릭하더라도 아무 일도 일어나지 않게 하기 위해 사용한다고 한다. void(0)자리에는 undefined를 리턴하는 코드가 오기만 하면 위와 같은 기능을 하는데, 더 간결하게 표현하면 javascript:;와 같이 작성할 수도 있다.
• 이와 비슷한 방식으로, #를 사용하기도 한다. 하지만, #를 사용한 경우에는, 링크를 클릭했을 때 해당 페이지의 최상단으로 이동한다는 차이점이 있다.

<a href="#">클릭</a>

• 출처 : https://stackoverflow.com/questions/134845/which-href-value-should-i-use-for-javascript-links-or-javascriptvoid0