망스 블로그

'css link 속성'에 해당되는 글 1건

2013.01.08 CSS 링크 스타일

CSS 링크 스타일

CSS 2013. 1. 8. 02:46

728x90

링크를 꾸미는 기본적인 코드는 아래와 같습니다.

코딩 전 스타일시티에 우선적으로 선언해 주는 것이 편리합니다.

a:link {color:#blue; text-decoration:none;} /* 방문하지 않은 링크는 파란색 */
a:visited {color:#green; text-decoration:none;} /* 방문했던 링크는 녹색 */

a:hover {color:#red; text-decoration:underline;} /* 마우스오버시 빨간색 + 언더라인 */
a:active {color:#black; text-decoration:none;} /* 마우스클릭시 검은색*/

* :link와 :visited 스타일이 :hover와 :active 스타일을 덮어쓰게 되니 링크 스타일 순서를 지켜 적용하는게 좋습니다.

a:link, a:visited, a:hover, a:active

버튼과 롤오버 효과 만들기

a {
display :block;
width:8em;
padding: 0.2em;
line-height:1.4;
background-color:#94b8e9;
border:1px solid black;
color:#000;
text-decoration:none;
text-align:center;
}

a:hover {
background-color:#369;
color:#fff;
}

이미지를 사용한 롤오버 효과

(button.gif)
(button_over.gif)

a {
display :block;
width:125px;
height:35px;
line-height:35px;
color:#000;
text-decoration:none;
background-image:url(button.gif);
text-indent:10px;
}

a:hover {
background-image:url(button_over.gif);
color:#fff;
}

픽시 방법을 이용한 롤오버 효과

픽시 방법은 이미지 하나를 위치 조정을 통해 불러오는 방법으로 서버 요청을 줄이고 버튼을 한곳에 모아둘수 있다는 장점이 있습니다.

(pixy-rollover.gif)

a {
display :block;
width:125px;
height:35px;
line-height:35px;
color:#000;
text-decoration:none;
background-image:url(pixy_rollover.gif);
background-position:left;
background-repeat:no-repeat;
text-indent:10px;
}

a:hover {
background-image:url(pixy_rollover.gif);
background-position:right;
background-repeat:no-repeat;
color:#fff;
}

출처: 네이버 블로그

주소: http://baraem2005.blog.me/20169490375

728x90

저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

CSS 레이아웃-중간 정렬하기 (0)	2013.01.08
CSS로만 만드는 툴팁 (0)	2013.01.08
CSS 핵과 필터 (0)	2013.01.08
CSS 포지션(position) 정리 (0)	2013.01.08
CSS 박스 모델 정리 (0)	2013.01.08