HTML A tag: A 링크 태그에 직접 스타일 속성 지정하는 방법 - 색상 글꼴 밑줄 배경 온마우스

블로그나 웹페이지에서, <A> 링크 태그의 속성은 헤드(head)에서 설정하여 일괄적으로 적용되는 것이 일반적이지만, 특정한 링크에만 다른 속성을 줄 필요가 있을 때는 아래와 같이 해당 링크에 직접 속성을 줄 수 있습니다.


[<A> 링크에 직접 스타일 속성 주기]

<a href="ojji.wayful.com" style="속성 지정">사용법어찌</a>

스타일 속성에는 여러가지가 있고, 원하는 속성을 지정하면 됩니다.
예)
글자 색상 속성 =>  color: red; 
글자 꾸밈 속성 =>  text-decoration: none;
글자 크기 속성 =>  font-size: 1.5em;
글자 굵기 속성 =>  font-weight: bold;
배경색상 속성 =>   background: #eee;


[<A> 링크에 직접 스타일 속성을 준 태그 모양]

<a
href="ojji.wayful.com"  
style="
color: orange;
font-size: 2.0em;
font-weight: bold;
background: #efefef;
"
>사용법어찌</a>

[위와 같이 <A> 링크에 직접 스타일 속성을 준 실제 모습]

사용법어찌

[참고: 개별적으로 속성을 주지 않고,  <A> 링크에 기본 속성이 적용된 모습]

사용법어찌

[특정 페이지 안에서 여러 개의 링크에 같은 속성을 주는 방법]

특정한 하나의 페이지 안에, 여러 개의 <a>링크가 있고, 해당 페이지 안의 여러 개의 링크에 일괄적으로 같은 속성을 줄 필요가 있을 때는, 페이지 맨 위에 CSS로 클래스(class)를 설정하여 적용하면 편합니다.

아래에서, 빨강색으로 표시된 soksung 은 클래스 이름이고, 이름은 다른 클래스나 아이디(ID) 이름과 중복되지 않게 임으로 붙이면 됩니다. 클래스 이름 앞에는 점(.)을 찍어 줍니다.

[CSS로 같은 속성을 준 <A> 태그 모양]

<style type="text/css">
.soksung {
color: #ffffff;
background: #3379FE;
font-size: 1.2em;
padding: 0.3em 0.5em;
margin-right: 0.1em;
}
</style>

<a href="ojji.wayful.com" class="soksung">블로그</a>
<a href="ojji.wayful.com" class="soksung">브라우저</a>
<a href="ojji.wayful.com" class="soksung">인터넷</a>
<a href="ojji.wayful.com" class="soksung">메타트레이더</a>
<a href="ojji.wayful.com" class="soksung">드라이브</a>
<a href="ojji.wayful.com" class="soksung">애드센스</a>

[위와 같이 CSS로 같은 속성을 준 실제 모습]

블로그 브라우저 인터넷 메타트레이더 드라이브 애드센스

위에서,
<style type="text/css">
.....
</style>
부분은 해당 페이지 맨 위에 두고,

각각의 <A> 태그는 원하는 위치에 놓으면 됩니다.  그러면, 지정한 속성이  class="soksung" 가 포함되어 있는 <A>링크 태그에는 모두 적용이 됩니다.