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의 위에 올렸으대 이미지*/}
이외에도 선을 추가한다던지 배경색을 변화시킨다던지 폰트타입을 바꾼다던지 여러가지로 꾸밀 수 있는 것이다.
댓글