<a></a> href 없이 사용하기

기본적인 <a> 태그의 사용은 <a href=""> 의 형식으로 사용하죠.

하지만 때로는 <a> 태그를 사용하는 때에 라우팅 없이 (페이지 이동 없이) 사용하고 싶은 경우가 있다. 이런 경우의 대처 방식을 알아보죠

 

그 부분에 마우스를 올려놓았을 경우 클릭해서 어떠한 함수를 사용하고 싶다면

class 로 뺀 후에 

.payments {
	color: #008fd0;
}
.payments:hover {
	cursor: pointer;
}

의 형식으로 한다면,  hover, 즉 마우스를 가져다 대면 커서를 저렇게 바꿀 수 있습니다.

ex)

<a (click)="details()" class="payments">

<u>

💳 카드 정보 & 결제 정보

</u>

</a>

<a (click)="details()" class="payments"> 
	<u> 💳 카드 정보 & 결제 정보 </u> 
</a>

클릭한다면 details()라는 함수를 실행해라, 해당 text에는 밑줄이 쳐져 있게 한다라는 코드입지다.

 

text 스타일들

애초에 밑줄이 아닌 마우스를 올렸을 때에 바뀌게 하고 싶다면 text-decoration 을 쓰면 됩니다.

 

.payments { 
	color: #008fd0;
 }
 .payments:hover { 
 	cursor: pointer; 
    text-decoration: underline;
 }