CSS 링크

CSS를 사용하여 링크의 스타일을 다양한 방식으로 설정할 수 있습니다。

텍스트 링크 텍스트 링크 링크 버튼 링크 버튼

링크 스타일 설정

링크는 어떤 CSS 속성(예를 들어 color、font-family、background 등)을 사용하여 스타일을 설정할 수 있습니다.

예제

a {
  color: hotpink;
}

직접 시도해 보세요

또한 링크가 어떤 상태에 있는지에 따라 링크의 다른 스타일을 설정할 수 있습니다。

چه 네 가지 링크 상태가 있습니다：

  • a:link - 정상적인, 방문하지 않은 링크
  • a:visited - 사용자가 방문한 링크
  • a:hover - 사용자가 링크에 마우스를 올려놓았을 때
  • a:active - 링크가 클릭될 때

예제

/* 방문하지 않은 링크 */
a:link {
  color: red;
}
/* 방문한 링크 */
a:visited {
  color: green;
}
/* 마우스를 링크에 올려놓았을 때 */
a:hover {
  color: hotpink;
}
/* 선택된 링크 */
a:active {
  color: blue;
}

직접 시도해 보세요

여러 링크 상태에 스타일을 설정할 때는 다음과 같은 순서 규칙을 따르세요：

  • a:hover는 a:link과 a:visited 이후에 반드시 오아야 합니다
  • a:active는 a:hover 이후에 반드시 오아야 합니다

텍스트 장식

text-decoration 속성은 링크에서 밑줄을 제거하는 데 주로 사용됩니다：

예제

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

직접 시도해 보세요

배경색

background-color 속성은 링크의 배경색을 지정할 수 있습니다：

예제

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

직접 시도해 보세요

링크 버튼

이 예제에서는 여러 CSS 속성을 결합하여 링크를 상자/버튼으로 표시하는 더 고급한 예제를 보여줍니다：

예제

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

직접 시도해 보세요

더 많은 예제

슈퍼링크에 다른 스타일 추가
이 예제는 슈퍼링크에 다른 스타일을 추가하는 방법을 보여줍니다.
고급 - 테두리가 있는 링크 버튼 생성
이는 링크 박스/버튼을 생성하는 또 다른 예제입니다.
커서 변경
cursor 속성은 표시할 마우스 커서 유형을 지정합니다. 이 예제는 다른 유형의 마우스 커서를 보여줍니다(링크에 유용합니다).