HTML에서 링크 색상을 변경하려면 CSS의 color 속성을 사용합니다. 이 속성은 style 속성과 함께 사용할 수 있으며, style 속성은 개별 요소에 인라인(inline) 스타일을 직접 지정하는 역할을 합니다.
링크 색상 변경 방법
style 속성에 CSS color 속성을 조합하면 원하는 링크의 색상을 간단하게 바꿀 수 있습니다.
다만 한 가지 주의할 점이 있습니다. style 속성으로 지정한 인라인 스타일은 전역(global)으로 설정된 모든 스타일보다 우선 적용됩니다. 즉, HTML <style> 태그나 외부 스타일시트에서 이미 정의한 스타일이 있더라도 인라인 스타일이 이를 덮어쓰기(override) 때문입니다.
예제
아래 코드를 실행하면 HTML에서 링크 색상이 변경되는 결과를 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Link Color</title> </head> <body> <h2>About</h2> <p> Our <a href="/about/about_team.htm" style="color: red">Team</a> comprises of programmers, writers, and analysts. </p> </body> </html>
추가 팁: 마우스 오버 효과 활용하기
인라인 스타일로는 마우스 오버(hover) 상태를 제어할 수 없습니다. 링크에 마우스를 올렸을 때 색상이 변하도록 하려면 <style> 태그나 외부 스타일시트에서 :hover 가상 클래스(pseudo-class)를 사용하는 것이 좋습니다.
a {
color: red;
}
a:hover {
color: darkred;
}이처럼 기본 색상은 인라인 스타일로 빠르게 지정하고, 인터랙티브한 효과가 필요하다면 스타일시트를 활용하면 더욱 유연하고 관리하기 쉬운 코드를 작성할 수 있습니다.