CSS 링크 스타일 기초

CSS 2009.09.06 11:32

CSS 링크 스타일

링크 효과(?) 는 홈페이지를 한번이라도 접해본 분이라면 알거라고 본다. 한창 나모나 기타 고전 유틸리티 쓰던시절에 CSS를 쓰지않았더라도 링크만은 거의 들어갔으니까. 일단 간단한 예제부터 보자

a:link{ text-decoration:none; color:#f33;}/*방문하지 않았을때 */
a:visited{text-decoration:none;color:#f33;}/*방문했을떄*/
a:hover{text-decoration:none;color:#c00;}/*마우스가 위로 올라갔을떄*/
a:active{text-decoration:none;color:#c00;}/*링크가 화성화 즉 클릭했을떄*/

위의 CSS는 한번쯤은 봐왔을 것이다. 정확히 말하면 유사 클래스(:link, :visited, :hover ,:active)를 사용한경우다.

text-decoration에도 여러속성이 있다. 아래를 참조하자

a{ text-decoration:none; }/*일반적으로 밑줄등 아무꾸밈을 주지않는다*/
a{ text-decoration:blink; }/*깜빡인다*/
a{ text-decoration:line-through; }/*텍스트의 가운데선*/
a{ text-decoration:overline; }/*텍스트의 윗줄*/
a{ text-decoration:underline; }/*텍스트의 밑줄*/

 

중요한점은 유사 클래스(:link, :visited, :hover ,:active)의 순서이다. 순서가 바뀌게 되면 적용되지않는다.:hover ,:active :link, :visited, 이럴 경우 :link, :visited의 스타일이 :hover ,:active스타일을 덮어스게되버린다

따라서 유사 클래스(:link, :visited, :hover ,:active)이순서는 반드시기억하자

외우는 TIP:Love:HAte

링크 역시 꾸미기는 마찬가지

다른 CSS꾸미듯이 링크역시 속성,값을 주고 구미기는마찬가지다.예로 아이디 일반링크의 그림 그리고 마우스를 올렸을떄 그림 변화(흔히 말하는 롤오버(이에대해선 다로 포스팅), 색깔변화등 마찬가지다 예제를 보자

예제

예제



#line a{ font-color:#666 ;} /* 아이디 line의 폰트 색깔*/ }
#line a:hover{ font-color:#999 ;} /* 아이디 line의 위에 올렸을떄  폰트 색깔*/ }
#rolling a{backgriund:url(normal.gif) no-repeat 0 0;} /* 아이디 rolling의 평소 이미지*/ }
#rolling a: hover{backgriund:url(effect.gif) no-repeat 0 0;} /* 아이디 rolling의 위에 올렸으대 이미지*/}

이외에도 선을 추가한다던지 배경색을 변화시킨다던지 폰트타입을 바꾼다던지 여러가지로 꾸밀 수 있는 것이다.


설정

트랙백

댓글

  • Favicon of http://landcafe.tistory.com Mr.장 2010.04.22 15:30 ADDR 수정/삭제 답글

    고맙습니다.
    "중요한점은 유사 클래스(:link, :visited, :hover ,:active)의 순서이다"
    이것 때문에 어제부터 고민에 고민을 거듭하고 있었는데...
    순서를 바로 잡으니 제가 의도한 데로 작용을 하네요...
    즐거운 하루 되세요.

  • Favicon of https://siana.tistory.com 샷타이거 2010.04.22 16:45 신고 ADDR 수정/삭제 답글

    LoVe:HAte ^^