[HTML] a 태그 커서 모양 변경 방법 (pointer 속성 활용)

---

💡 HTML에서 a 태그 커서가 손가락(포인터) 모양으로 안 바뀐다면?

웹페이지에서 <a> 태그(링크)를 만들었는데, 마우스를 올려도 커서가 손가락 모양(포인터)으로 바뀌지 않아 당황한 적 있나요?
이럴 때는 CSS의 cursor 속성을 사용하면 쉽게 해결할 수 있습니다.
이 글에서는 a 태그 커서 변경 방법과 실무에서 자주 쓰는 커서 속성을 정리해드립니다.

---

🛠️ 커서 모양 변경: 코드 예제와 설명

✅ 기본 예제 (인라인 스타일 사용)

<a href="#" style="cursor: pointer;">Click me</a>

위 코드처럼 style="cursor: pointer;" 속성을 넣으면
마우스를 올렸을 때 커서가 손가락 모양으로 바뀝니다.

---

🎯 커서 스타일을 CSS 클래스로 설정하기 (추천 방식)

<style>
  .custom-link {
    cursor: pointer;
  }
</style>

<a href="#" class="custom-link">Click here</a>

✔️ 코드 분리로 유지보수에 더 유리합니다.
✔️ 여러 링크에 반복 사용 가능!

---

🧩 다른 커서 모양 종류 (CSS cursor 속성)

커서 값	모양 설명
default	기본 화살표
pointer	손가락 (링크, 버튼 등)
text	텍스트 선택 (I자 커서)
move	이동 커서
not-allowed	금지 (🚫 느낌)
help	도움말 (❓ 느낌)

더 다양한 커서 옵션이 궁금하다면 👉
🔗 MDN cursor 공식 문서 바로가기

---

📌 꼭 기억하세요!

• cursor: pointer;는 꼭 <a> 태그가 아니어도 사용 가능해요.
  👉 div, span, button 등 클릭 가능한 모든 요소에 적용 가능
• 클릭 가능한 UI 요소에는 포인터 커서를 사용하면 사용자 경험(UX)이 좋아집니다.

---

🏁 마무리 요약

문제 상황	해결 방법
a 태그에 커서가 안 바뀜	cursor: pointer; 추가
유지보수 쉽게 하고 싶을 때	CSS 클래스 사용
커서 스타일을 다양하게 쓰고 싶을 때	cursor 속성 활용

---

👉 다음 글 예고

[HTML] input 박스 placeholder 색상 바꾸는 법
이어서 알아볼게요! 놓치지 않으려면 "좋아요" 눌러주시고 "구독" 해주세요 😊