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 속성을 합칠떄의 좀더 고급된 예제를 설명한다.