🎨 링크 박스 꾸미기 (a 태그를 버튼처럼 !)

...

CSS 링크 박스 꾸미기

링크(link)에는 color, font-family, background 속성 등 CSS의 다양한 속성들을 적용할 수 있다. 또한, text-decoration 속성값을 none으로 설정하여, 링크가 연결된 텍스트의 밑줄을 제거할 수도 있다.

링크 밑줄 제거

/* 링크 밑줄 제거 */
<style>
  a {
  	  text-decoration: none;
  }
</style>

<a href="/index.php" target="_blank">홈으로 가기!</a>

링크 상태 표현

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

a:link { color: olive; } // 기본 상태
a:visited { color: brown; } // 사용자가 이미 링크 방문한 상태라면 갈색으로
a:hover { color: coral; } // 마우스 올려져 있을때 coral색으로
a:active { color: khaki; } // 마우스로 클릭할떄 khaki색으로 변경

링크 텍스트를 버튼으로

 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;
}