CSS와 관련된 팁이 있는 곳입니다. 좋은 자료 공유해 주세요.
글 수 123
33
조회 수 : 8707 신고 : 0
![title: [ani]깜빡이는 표정](http://web.webmini.net/./files/iconshop/74a37aadbde84c591808859b369e85e0.gif "title : [ani]깜빡이는 표정")
빽짱구| 미리보기 : |
|---|
<head>와 </head> 사이에 아래소스삽입
<style type="text/css">
<!--
A:link {text-decoration:none; color:#000080}
A:visited {text-decoration:none; color:#000080}
A:active {text-decoration:none; color:#000080}
A:hover {text-decoration:none; color:#529CFF}
-->
</style>
하이퍼링크의 속성은 아래의 네 가지로 구분됩니다.
A:link 방문한 적이 없는 평범한 링크의 모양
A:visited 방문한 적이 있는 링크의 모양
A:active 활성화된 링크. 즉, 링크를 클릭했을 때의 모양
A:hover 마우스커서가 올라갔을 때 바뀌는 링크의 모양
text-decoration 은 밑줄에 관련된 부분입니다. underline는 밑줄, overline은 윗줄, none는 줄 없음.
color 는 색에 관련된 부분이구요.
방문한 적이 없는 곳(A:link) 은 밑줄 없는 #000080 색으로,
방문한 적이 있는 곳(A:visited) 은 밑줄 없는 #000080 색으로,
링크를 클릭했을 때 (A:active) 밑줄 없는 #000080 색으로,
링크 걸린 텍스트 위에 마우스커서가 올라가면 (A:hover) 밑줄 없는 #000080 색으로 표시되겠죠.
A:link, A:visited, A:active 이렇게 세 개는 고정된 링크속성이기 때문에 별다르게 수정할 필요없이, 색만 바꾸고 위처럼 사용하시면 무난합니다.
하지만 맨 아래의
A:hover {text-decoration:none; color:#529CFF} 는 마우스커서가 올라갔을 때 반응하는 동적인 속성을 가진 곳이기 때문에, 위 소스 중 A:hove로 시작되는 줄만 아래처럼 취향에 맞게 바꿔 사용하시면 독특한 효과를 표현할 수 있겠죠.
A: hover {text-decoration:underline; color:#529CFF}
여기에 마우스커서가 올라가면 밑줄이 생깁니다
A: hover {text-decoration:underline overline; color:#529CFF}
여기에 마우스커서가 올라가면 아래위로 두 개의 줄이 생깁니다
A: hover {text-decoration:none; color:#000080; background:#D0E0FF; padding:2 2 0}
여기에 마우스커서가 올라가면 링크주변이 배경색으로 채워집니다
A:link, A:visited, A:active 로 시작되는 줄에도 각각 padding 2 2 0 를 추가해주시면 보기 좋습니다. 배경이나 글자가 잘리거나 움직이지 않게 하기 위해 넣은 부분입니다.
A: hover {text-decoration:none; color:#529CFF; font-weight:bold}
여기에 마우스커서가 올라가면 굵은 글씨로 변합니다
A: hover {text-decoration:none; color:#529CFF; font-size:11pt}
여기에 마우스커서가 올라가면 큰 글씨로 변합니다
A: hover {text-decoration:none; color:#529CFF; background:url(dotline.gif) repeat-x bottom}
여기에 마우스커서가 올라가면 점선 이미지가 밑줄로 보여집니다
dotline.gif 는 점선밑줄로 사용할 그림의 경로 및 이름.
이 경우는 점선으로 사용할 그림이 하나 있어야 합니다. 가로3픽셀, 세로1픽셀짜리로 준비하시면 되구요. 투명한 바탕의 가운데 점 하나만 찍어주면 됩니다. ← 확대해보면 이런 모양이 되겠죠. 파란사각형의 양쪽은 투명배경 (배경색이 있는 문서에서 자연스러운 점선을 표현하기 위함)입니다. 물론, 다른모양 다른크기로 만들어도 상관은 없습니다:) 저 그림을 다운 받아서 파란색만 다른 색으로 바꿔 사용하셔도 됩니다^^
A: hover {text-decoration:none; color:#529CFF; border-bottom:1 dotted #0000FF}
여기에 마우스커서가 올라가면 #0000FF색의 점선 밑줄이 생깁니다
이 경우, 밑줄로 쓰일 이미지는 따로 필요하지 않지만, 익스플로러 5.5 이상에서만 보입니다.
A: hover {text-decoration:none; color:#000080; border:1 dotted #0000FF; padding:2 3 0}
여기에 마우스커서가 올라가면 링크주변에 #0000FF색 점선박스가 생깁니다
A:link, A:visited, A:active 로 시작되는 줄에는 각각 padding 2 3 0 을 추가해주시면 보기 좋습니다. 글자가 움직이지 않게 넣어준 여백입니다. 점선박스로 사용할 이미지는 따로 필요하지 않지만, 익스플로러 5.5 이상에서만 보입니다.
A: hover {text-decoration:none; color:#529CFF; border-bottom:3 solid #0000FF}
여기에 마우스커서가 올라가면 두께 3, #0000FF색의 굵은 밑줄이 생깁니다
밑줄로 쓰일 이미지는 따로 필요하지 않지만, 익스플로러 5.5 이상에서만 보입니다.
출처: 신의키스
<style type="text/css">
<!--
A:link {text-decoration:none; color:#000080}
A:visited {text-decoration:none; color:#000080}
A:active {text-decoration:none; color:#000080}
A:hover {text-decoration:none; color:#529CFF}
-->
</style>
하이퍼링크의 속성은 아래의 네 가지로 구분됩니다.
A:link 방문한 적이 없는 평범한 링크의 모양
A:visited 방문한 적이 있는 링크의 모양
A:active 활성화된 링크. 즉, 링크를 클릭했을 때의 모양
A:hover 마우스커서가 올라갔을 때 바뀌는 링크의 모양
text-decoration 은 밑줄에 관련된 부분입니다. underline는 밑줄, overline은 윗줄, none는 줄 없음.
color 는 색에 관련된 부분이구요.
방문한 적이 없는 곳(A:link) 은 밑줄 없는 #000080 색으로,
방문한 적이 있는 곳(A:visited) 은 밑줄 없는 #000080 색으로,
링크를 클릭했을 때 (A:active) 밑줄 없는 #000080 색으로,
링크 걸린 텍스트 위에 마우스커서가 올라가면 (A:hover) 밑줄 없는 #000080 색으로 표시되겠죠.
A:link, A:visited, A:active 이렇게 세 개는 고정된 링크속성이기 때문에 별다르게 수정할 필요없이, 색만 바꾸고 위처럼 사용하시면 무난합니다.
하지만 맨 아래의
A:hover {text-decoration:none; color:#529CFF} 는 마우스커서가 올라갔을 때 반응하는 동적인 속성을 가진 곳이기 때문에, 위 소스 중 A:hove로 시작되는 줄만 아래처럼 취향에 맞게 바꿔 사용하시면 독특한 효과를 표현할 수 있겠죠.
A: hover {text-decoration:underline; color:#529CFF}
여기에 마우스커서가 올라가면 밑줄이 생깁니다
A: hover {text-decoration:underline overline; color:#529CFF}
여기에 마우스커서가 올라가면 아래위로 두 개의 줄이 생깁니다
A: hover {text-decoration:none; color:#000080; background:#D0E0FF; padding:2 2 0}
여기에 마우스커서가 올라가면 링크주변이 배경색으로 채워집니다
A:link, A:visited, A:active 로 시작되는 줄에도 각각 padding 2 2 0 를 추가해주시면 보기 좋습니다. 배경이나 글자가 잘리거나 움직이지 않게 하기 위해 넣은 부분입니다.
A: hover {text-decoration:none; color:#529CFF; font-weight:bold}
여기에 마우스커서가 올라가면 굵은 글씨로 변합니다
A: hover {text-decoration:none; color:#529CFF; font-size:11pt}
여기에 마우스커서가 올라가면 큰 글씨로 변합니다
A: hover {text-decoration:none; color:#529CFF; background:url(dotline.gif) repeat-x bottom}
여기에 마우스커서가 올라가면 점선 이미지가 밑줄로 보여집니다
dotline.gif 는 점선밑줄로 사용할 그림의 경로 및 이름.
이 경우는 점선으로 사용할 그림이 하나 있어야 합니다. 가로3픽셀, 세로1픽셀짜리로 준비하시면 되구요. 투명한 바탕의 가운데 점 하나만 찍어주면 됩니다. ← 확대해보면 이런 모양이 되겠죠. 파란사각형의 양쪽은 투명배경 (배경색이 있는 문서에서 자연스러운 점선을 표현하기 위함)입니다. 물론, 다른모양 다른크기로 만들어도 상관은 없습니다:) 저 그림을 다운 받아서 파란색만 다른 색으로 바꿔 사용하셔도 됩니다^^
A: hover {text-decoration:none; color:#529CFF; border-bottom:1 dotted #0000FF}
여기에 마우스커서가 올라가면 #0000FF색의 점선 밑줄이 생깁니다
이 경우, 밑줄로 쓰일 이미지는 따로 필요하지 않지만, 익스플로러 5.5 이상에서만 보입니다.
A: hover {text-decoration:none; color:#000080; border:1 dotted #0000FF; padding:2 3 0}
여기에 마우스커서가 올라가면 링크주변에 #0000FF색 점선박스가 생깁니다
A:link, A:visited, A:active 로 시작되는 줄에는 각각 padding 2 3 0 을 추가해주시면 보기 좋습니다. 글자가 움직이지 않게 넣어준 여백입니다. 점선박스로 사용할 이미지는 따로 필요하지 않지만, 익스플로러 5.5 이상에서만 보입니다.
A: hover {text-decoration:none; color:#529CFF; border-bottom:3 solid #0000FF}
여기에 마우스커서가 올라가면 두께 3, #0000FF색의 굵은 밑줄이 생깁니다
밑줄로 쓰일 이미지는 따로 필요하지 않지만, 익스플로러 5.5 이상에서만 보입니다.
출처: 신의키스
포토샵과 letter-spacing 자간 비교 
글쓴이 빽짱구
단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
아이콘이 붙게됩니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
아이콘이 붙게됩니다.
첫번째 댓글을 남겨주세요!
- 추천수 50개이상
- 추천수 30개이상
- 추천수 20개이상
- 추천수 10개이상
- 추천수 3개이상
닫기