[HTML] 하이퍼링크(a href) 꾸미기

프로젝트를 작업할때 하이퍼링크를 걸어주는 [a href] 는 많이 사용할 것이다.

그런데 기본적으로는 늘 파란글씨에 밑줄이 그어져 있어

별로 안예뻐보인다 (제일중요)

 

그래서 우선 기본적으로 해 두어야 할 것은 보통 글씨 밑에 줄을 

삭제하는 것을 우선으로 한다.

 

See the Pen a href by lsj5634 (@zinisang) on CodePen.

위와같이

text-decoration-line 이라는 속성을 통해 밑줄을 없앨수도 있고,

밑줄의 위치를 바꿀 수도 있다.

 

 

---

 

하이퍼링크를 동작에 따라

글자색이나 형식을 변경하는 방법도 있다.

 

See the Pen a href2 by lsj5634 (@zinisang) on CodePen.

 

a:link { color :~~; text-decoration: ~~; } : 아직 방문하지 않은 링크

a:visited { color : ~~; text-decoration: ~~; } : 방문한 적이 있는 링크

a:hover { color : ~~; text-decoration: ~~; } : 마우스를 링크에 올렸을 때

a:active { color :~~; text-decoration: ~~; } : 링크를 클릭하고 뗄 때

 

이렇게가 보통 쓰이는 a 태그를 위한 꾸밈방식이다.

 

주의해야할 점 으로는,

 

a:hover는 a:link, a:visited 뒤에 와야 하고, a:active는 a:hover 뒤에 와야 한다.

즉,

a:link, a:visited, a:hover, a:active 순서대로 사용해야 한다.