CSS Links

With CSS, links can be styled in different ways.

 

css로 링크는 다른 방식으로 표현될수 있다.

 

Styling Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

 

링크 표현하기

링크는 어떤 css 속성으로도 표현될 수 있다. (예를들면, color, font-family, backgoround 등)

 

In addition, links can be styled differently depending on what state they are in.

The four links states are:

• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

게다가 링크는 그들의 상태의 따라서 다르게 표현될수 있다.

 

4가지 상태값이다.

 

a:link - 일반적인 방문하지 않은 링크

a:visted - 유저가 방문했던 링크

a:hover - 유저가 링크 위의 마우스를 올렸을때의 링크

a:active - 이것을 클릭한 순간의 링크

 

When setting the style for several link states, there are some order rules:

• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover

몇개의 링크 상태를 설정할때, 조금의 순서적인 규칙이 있다.

a:hover 는 a:link 와 a:visted 의 다음에 와야만 한다.

a:avtive 는 a:hover 다음에 와야만 한다.

 

 

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

 

글자 꾸미기

text-decoration 속성은 링크로부터 밑선을 제거하기 위해 가장많이 사용된다.

 

Background Color

The background-color property can be used to specify a background color for links:

 

배경색

 

background-color 속성은 링크의 배경색을 명시하기 위해 사용될 수 있다.

 

Advanced - Link Buttons

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:

 

고급된 - 링크 버튼

이 예제는 버튼과 box들을 링크로서 표현하기 위한 몇가지 css 속성을 합칠떄의 좀더 고급된 예제를 설명한다.