[html/css] a: link, a: visited, a: active, a: hover 사용법 자세히 알기
어제 문서를 연결시키는 <a>태그를 알아보았는데요
문서를 연결하는 a 태그 (href, title, target 속성)
오늘은 <a>태그와, 링크 자체에 다양한 효과를 주는 방법을 알아보겠습니다.
|
<a>태그에 스타일 적용 방법 |
인라인으로 스타일 적용 예:
<a style="color:red; background-color: pink;"> abc 홈페이지 바로가기 </a>
실제로 이렇게 복잡하게 스타일을 적용하는 분은 없겠지만 연습 삼아 적어 봅니다..
internal이나 external 스타일 적용 예:
a{
color: red; 글자색
background-color:pink; 배경색
font-style: italic; 글씨체
font-weight: bold; 굵기
font-size: 30px; 글자크기
}
실행 화면입니다.
|
의사 클래스를 사용한 스타일 적용 방법 |
아래와 같은 의사 클래스(pseudo-class)를 사용하여 링크에 다양한 스타일을 적용할 수 있습니다.
1. a:link 방문 전 링크 상태
2. a:visited 방문 후 링크 상태
3. a:hover 마우스 오버했을 때 링크 상태
4. a:active 클릭했을 때 링크 상태
스타일 적용 순서는 위 번호 순대로 하는 게 좋습니다. 순서가 바뀌면 스타일에 제대로 적용되지 않습니다~
[html 작성 예]
a link.htm
|
<html> a:link{color: black;} </style> <body> <a href="http://www.abc.com"> ABC 홈페이지 바로가기</a>
<p> 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. </body> |
실행 화면입니다
a로 링크를 연결한 부분은 방문 전엔 검은색
방문 후에는 녹색, 마우스를 링크에 갖다 댔을 때엔 파란색
클릭할 때는 빨간색으로 표시됩니다.
|
링크의 밑줄 없애는 방법 |
text-decoration 속성에 none이란 속성값을 넣어주면 밑줄이 사라집니다.
사용 예:
a
{
text-decoration:none
}
*참고*
|
text-decoration: underline 글자 아래에 밑줄이 그어짐 |
위에서 배운 것처럼, 링크의 색상을 바꾸거나 밑줄 또한 변경 가능하지만,
일반적으로, 방문하지 않은 링크에는 파란색, 방문 후에 보라색 링크에 익숙해져 있으므로...
주의해서 변경해 주셔야 합니다~
CSS란? (HTML과 CSS의 차이, CSS 작성법)
display 속성 (inline, block, none 차이), visibility 속성(visible, hidden, collapse 차이)
'css' 카테고리의 다른 글
| [html/css] table 중앙 정렬하기 (1) | 2014.04.12 |
|---|---|
| [html/css] 이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법) (7) | 2014.04.09 |
| [html/css] display 속성 (inline, block, none, inline-block 차이), visibility 속성(visible, hidden, collapse 차이) (6) | 2014.04.05 |
| [html/css] overflow 속성 (overflow: visible, hidden, scroll, auto 차이) (4) | 2014.04.04 |
| [html/css] z-index 속성으로 배치 순서 결정하기 (5) | 2014.04.03 |
댓글