티스토리 뷰

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
나만의 링크버튼 만들기  (0) 2018.02.02
블로그에 CSS 아이콘 쓰기  (0) 2018.01.02
티스토리에서 마크다운 글쓰기  (2) 2017.11.23
반응형 스킨과 저품질의 상관성  (0) 2017.10.12
css font 속성  (0) 2017.09.26
공유하기 링크
TAG
,
댓글
댓글쓰기 폼