CSS Links

링크는 CSS를 사용하여 다양한 방식으로 스타일 될 수 있습니다.

Text Link Text Link Link Button Link Button

Styling Links

링크는 어떤 CSS 속성으로도 (e.g. color, font-family, background, etc.) 스타일 될 수 있다.

Example

a {

                    color: hotpink;

                }

Try it yourself »

또한, 링크는 그 상태에 따라 다르게 스타일되도록 할 수 있다

네가지 링크의 상태는 다음과 같습니다 :

a:link - 정상, 방문하지 않은 링크
a:visited - 사용자가 방문한 링크
a:hover - 사용자 마우스가 링크 위에 올 때
a:active - 링크가 클릭된 순간

Example

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

Try it yourself »

여러 링크 상태에 대하여 스타일을 정할 때, 일정한 순서를 따라야 한다:

a:hover 는 반드시 a:link 과 a:visited 다음에 와야 합니다.
a:active 는 반드시 a:hover 다음에 와야 합니다.

Common Link Styles

위의 예에서 링크는 상태에 따라 색 변경 .

링크에 다른 일반적인 몇 가지 스타일 방법을 알아보자:

Text Decoration

text-decoration 속성은 대부분의 링크에서 밑줄을 제거하는 데 사용됩니다 :

Example

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Try it yourself »

Background Color

background-color 속성은 링크의 배경색을 지정합니다:

Example

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Try it yourself »

More Examples

Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.

Advanced - Create link boxes
This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes.

Test Yourself with Exercises!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »

« Previous Next Chapter »