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; }
아래 링크 사이트에서 좀 더 링크 스타일에 대해 연습해볼 수 있습니다.
'잉고래의 티스토리' 카테고리의 다른 글
css list 속성 이해 (0) | 2018.04.10 |
---|---|
블로그에 CSS 아이콘 쓰기 (0) | 2018.01.02 |
티스토리에서 마크다운 글쓰기 (2) | 2017.11.23 |
반응형 스킨과 저품질의 상관성 (0) | 2017.10.12 |
css font 속성 (0) | 2017.09.26 |