HTML A tag : 링크의 글자색(font color on text link)을 지정하는 방법
블로그나 웹페이지에서, <A> 링크 태그 속성은 <head> 영역에서 설정하여, 모든 링크에 일괄 적용되도록 하는 것이 일반적입니다.경우에 따라서는, 특정한 링크에는 특정한 색상으로 표시할 필요가 있을 때가 있습니다. 그럴 때는, 아래와 같이 <A>태그에 색상을 지정해 주면 됩니다.
이 때, 두 가지 경우를 생각해 볼 수 있습니다.
1) 특정한 색상을 적용할 <A> 링크 태그가 하나 또는 두 개 정도라면, 아래 첫 번째 방법처럼, 해당 <A> 링크 태그에 직접 색상을 설정하는 것이 편합니다.
2) 특정한 색상을 적용할 <A> 링크 태그가 여러개인 경우에는, 아래 두 번째 방법처럼 클래스(class)를 사용하는 것이 간편합니다.
0. 색상을 지정하지 않은 예
이 경우는, 특정한 색상 설정을 하지 않았으므로, <head> 영역에서 기본으로 설정한 파랑색으로 표시 됩니다.
[링크의 글자에 색상을 지정하지 않은 예]
<a href="https://ojji.wayful.com">사용법어찌로 가기</a>
[실제 적용한 모습]사용법어찌로 가기
1. <A> 링크 태그에 직접 색상을 설정한 예
이 경우는, <A> 링크 안에 직접 스타일(style)로 색상을 설정한 것입니다.
[링크에 직접 글자 색상을 빨강색(red)으로 지정한 예]
<a href="https://ojji.wayful.com" style="color: red">사용법어찌로 가기</a>
[실제 적용한 모습] 사용법어찌로 가기
2. <A> 링크 태그에 색상을 일괄 설정한 예
이 경우는, <A> 링크에 클래스(class)로 색상을 설정하여, 해당 클래스가 들어 있는 모든 <A> 링크에 동일한 색상이 표시되도록 한 것입니다.
[해당하는 모든 링크에 일괄적으로 빨강색(red)으로 지정한 예]
<style type="text/css">
.glanlink {color: red;}
</style>
<a class="glanlink" href="https://ojji.wayful.com">사용법어찌로 가기</a>
<a class="glanlink" href="https://ojji.wayful.com">사용법어찌 둘러보기</a>
[실제 적용한 모습] .glanlink {color: red;}
</style>
<a class="glanlink" href="https://ojji.wayful.com">사용법어찌로 가기</a>
<a class="glanlink" href="https://ojji.wayful.com">사용법어찌 둘러보기</a>
사용법어찌로 가기
사용법어찌 둘러보기
위에서, .glanlink 는 클래스(class) 이름이고, 클래스 이름은 기억하고 사용하기 편하게 만들면 됩니다. 이 예에서는 "글 안에 있는 링크" 라는 뜻에서 "gl an link" 라고 임의로 붙인 것입니다. 클래스 이름 앞에는 점(.)을 찍습니다.
위에서,
<style type="text/css"> .glanlink {color: red;} </style> 부분은 클래스가 적용된 첫 번째 <A> 태그 보다 위에 두면 됩니다.
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...