2014. 10. 20. 22:07
링크가 설정된 텍스트는 일반 텍스트와 다르다.
기본적으로 색깔이 파란색이며 마우스 커서를 올려 놓으면 커서의 모양이 바뀐다.
html 링크 요소의 기본값과 css를 적용하여 기본값을 바꾸는 방법에 대하여 알아보자.
html 링크 요소의 기본값
1. 링크 텍스트가 → 파란색 + 언더라인
2. 방문한 링크 텍스트는 → 보라색 + 언더라인
3. 링크 텍스트(파란색+언더라인)에 마우스 커서를 올려 놓으면 → 커서가 화살표에서 손가락으로 바뀜
4. 링크 텍스트를 클릭 하면(클릭하고 손가락 떼지 않은 상태) → 빨간색 + 언더라인
CSS로 기본값 바꾸기
이론적으로 이해하는 것 보다 예제를 갖고 직접 코딩해보는 것이 이해가 빠르다.
1. 링크 텍스트의 색깔을 빨간색으로, 언더라인 없애기
: CSS 코딩 시, a:link 선택자 / color, text-decoration 프로퍼티를 사용
2. 방문한 링크 텍스트의 색깔을 녹색으로, 언더라인 없애기
: CSS 코딩 시, a:visited 선택자 / color, text-decoration 프로퍼티를 사용
3. 링크 텍스트에 마우스 커서 올려 놓으면 텍스트 색깔을 오렌지로 바꾸고, 언더라인 넣기
: CSS 코딩 시, a:hover 선택자 / color, text-decoration 프로퍼티를 사용
4. 링크 텍스트 클릭했을 때 텍스트 색깔을 핑크로, 언더라인 없애기
: CSS 코딩 시, a:link 선택자 / color, text-decoration 프로퍼티를 사용
Comments, Trackbacks