나만의 링크버튼 만들기

css의 link 속성을 사용하면 다음 예제와 같이 나만의 링크 버튼을 만들 수 있습니다. 

링크 스타일1 링크 스타일2 링크 스타일3 링크 스타일4

링크는 HTML의 a 태그에 css 속성을 적용해서 커스마이징 할 수 있는데요. a태그에 color, font-family, background 같은 여러가지 css 속성들을 조합하면 됩니다. 

a { background:black; color:white; }

하나씩 조합해 보는게 익숙해 졌다면 좀 더 나아가 링크의 상태에 따른 각각의 스타일을 지정할 수도 있습니다. 예를들어 마우스를 올렸을 때, 클릭을 했을 때 등으로 말이죠.

a:link - 방문하지 않은 링크

a:visited - 방문한 링크

a:hover - 마우스를 올려놓았을 때

a:active - 클릭 한 순간 

예) a:active { color: yellow; } /* selected link */

링크 상태에 따른 속성을 지정할 때 주의할 점은 순서입니다. hover는 link와 visited 뒤에 와야 하고 active는 반드시 hover 다음에 와야 합니다. link -> visited -> hover -> active 순이네요.

끝으로 제가 많이 쓰는 속성은 text-decoration입니다. 링크 밑줄을 지우는 목적이죠. 

a:link { text-decoration:none; }

아래 링크 사이트에서 좀 더 링크 스타일에 대해 연습해볼 수 있습니다.