버튼의 범위 넓히는 법

🚨btn과 a 태그를 혼합하여 해당 링크로 이동하는 버튼을 생성하였다.
하지만 클릭이 적용될 때도 있고 적용되지 않을 때도 있어 링크가 잘 안먹히나..? 생각했는데 자세히 보니 마우스 커서 이동 시 hover이 적용되는 부분이 약간 이상한 것을 발견하였고, 클릭 시 클릭이 되는(?!) 범위가 다르다는 것을 발견했다.

- 원래 코드
<button type="button"><a href="~">text</a></button>

- 수정 코드
<a href="~"><button type="button">text</button></a>

📍태그를 감싸는 부분이 button인지 a태그인지에 따라 범위가 달라지는 점!

수정한 코드로 적용하면 background-color가 적용된 큰 범위의 버튼이 활성화된다!