IT 공부/개인정리
[HTML] 하이퍼링크(a href) 꾸미기
Zinisang
2021. 7. 21. 22:43
프로젝트를 작업할때 하이퍼링크를 걸어주는 [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 순서대로 사용해야 한다.