[CSS] 기본 속성 - 링크

CSS 링크

- color, font-family, background, ... 등 다양한 속성 적용 가능

- text-decoration : none 으로 밑줄 제거 가능

a {
	background-color: #FFFFE0;
	color: darkslategray;
	font-size: 1.3em;
	text-decoration: none;
}

 

 

링크(link)의 상태

1. link : 링크의 기본 상태, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태
2. visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태
3. hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태
4. active : 사용자가 마우스로 링크를 클릭하고 있는 상태
5. focus : 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태

a:link { color: olive; }
a:visited { color: brown; }
a:hover { color: coral; }
a:active { color: khaki; }

 

 

링크를 활용한 버튼(Button)

- 링크를 버튼처럼 사용

a:link, a:visited {
	background-color: #FFA500;
	color: maroon;
	padding: 15px 25px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
}
a:hover, a:active { background-color: #FF4500; }

 

 

 

 

 

http://tcpschool.com/css/css_basic_links

코딩교육 티씨피스쿨