====== CSS Links ====== * description : CSS Links, Text Decoration, Background Color, Link Buttons, * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-12 \\ \\ =====Source of the article==== * [[https://www.w3schools.com/css/css_link.asp|CSS Links]] \\ \\ CSS를 사용하여 links를 다양하게 꾸밀 수 있습니다.\\ ======Styling Links====== Links는 CSS 속성 (예: ''color'', ''font-family'', ''background'' 등)으로 꾸밀 수 있습니다.\\ \\ ====예제==== CSS Links

CSS Links

This is a link

 \\ 추가로, links는 links가 어떤 상태인지에 따라 다양하게 꾸밀 수 있습니다.\\ * ''a:link'' - 방문하지 않은 링크 * ''a:visited'' - 사용자가 방문한 링크 * ''a:hover'' - 사용자가 마우스를 올린 링크 * ''a:active'' - 사용자가 마우스를 클릭한 순간의 링크 \\ ====예제==== CSS Links state

CSS Links state

This is a link

Note:a:hover MUST come after a:link and a:visited in the CSS definition in ordr to be effective.(a:hover가 효과가 나타나기 위해서는 CSS 정의에서 반드시 a:link와 a:visited 다음에 선언되어야 합니다)

Note:a:active MUST come after a:hover in the CSS definition in order to be effective.(a:active가 효과가 나타나기 위해서는 CSS 정의에서 반드시 a:hover 다음에 선언되어야 합니다.

 \\ ====여러 개의 링크 상태를 위한 스타일링 설정 시 순서를 지켜야합니다.==== ====* a:hover는 반드시 a:link와 a:visited 다음에 선언되어야 합니다.==== ====* a:active는 반드시 a:hover 다음에 선언되어야 합니다.==== \\ \\ =====Text Decoration===== ====text-decoration속성은 링크의 언더라인을 제거하기 위해 사용됩니다==== \\ ====예제==== CSS Link Text Decoration

CSS Link Text Decoration

This is a link

Note:a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

Note:a:active MUST come after a:hover in the CSS definition in order to be effective

 \\ \\ =====Background Color===== ''background-color''속성은 링크를 위한 배경색을 지정하기위해 사용합니다.\\ \\ ====예제==== CSS Link Text Decoration

CSS Link Text Decoration

This is a link

Note:a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

Note:a:active MUST come after a:hover in the CSS definition in order to be effective

 \\ \\ =====Links Buttons===== 하기의 예제는 박스/버튼과 같은 링크를 표시하기 위해 여러 CSS 속성을 혼용하는 예제입니다.\\ \\ ====예제==== Links Button

Link Button

A link styled as a button:

This is a link \\ Links examples W3SCHOOL - This is a link {{tag>오션, CSS link, text decoration, }}