문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Links ======
<WRAP left notice 80%>
  * description : CSS Links, Text Decoration, Background Color, Link Buttons,  
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-12
</WRAP>
<WRAP clear></WRAP>
\\
\\
=====Source of the article==== 
  * [[https://www.w3schools.com/css/css_link.asp|CSS Links]]
\\
\\
CSS를 사용하여 links를 다양하게 꾸밀 수 있습니다.\\
======Styling Links======
Links는 CSS 속성 (예: ''color'', ''font-family'', ''background'' 등)으로 꾸밀 수 있습니다.\\
\\
====예제====
<code html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Links</title>
    <style>
        a {
            color: hotpink;
        }
    </style>
</head>

<body>

    <h2>CSS Links</h2>
    <p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Links state</title>
    <style>
        /* 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;
        }
    </style>
</head>

<body>
    <h2>CSS Links state</h2>
    <p><b><a href="https://www.w3schools.com/css/default.asp" target="_blank">This is a link</a></b></p>
    <p><b>Note:</b>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 다음에 선언되어야 합니다)</p>
    <p><b>Note:</b>a:active MUST come after a:hover in the CSS definition in order to be effective.(a:active가 효과가 나타나기
        위해서는 CSS 정의에서 반드시 a:hover 다음에 선언되어야 합니다.</p>
</body>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Link Text Decoration</title>
    <style>
        a:link {
            color: red;
            text-decoration: none;
        }

        a:visited {
            color: green;
            text-decoration: none;
        }

        a:hover {
            color: hotpink;
            text-decoration: underline;
        }

        a:active {
            color: blue;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <h2>CSS Link Text Decoration</h2>
    <p><b><a href="https://www.w3schools.com/css/css_link.asp">This is a link</a></b></p>
    <p><b>Note:</b>a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
    <p><b>Note:</b>a:active MUST come after a:hover in the CSS definition in order to be effective</p>
</body>

</html>
</code>
\\
\\
=====Background Color=====
''background-color''속성은 링크를 위한 배경색을 지정하기위해 사용합니다.\\
\\
====예제====
<code html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Link Text Decoration</title>
    <style>
        a:link {
            color: red;
            text-decoration: none;
            background-color: yellow;
        }

        a:visited {
            color: green;
            text-decoration: none;
            background-color: cyan;
        }

        a:hover {
            color: hotpink;
            text-decoration: underline;
            background-color: lawngreen;
        }

        a:active {
            color: blue;
            text-decoration: underline;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <h2>CSS Link Text Decoration</h2>
    <p><b><a href="https://www.naver.com">This is a link</a></b></p>
    <p><b>Note:</b>a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
    <p><b>Note:</b>a:active MUST come after a:hover in the CSS definition in order to be effective</p>
</body>

</html>
</code>
\\
\\
=====Links Buttons=====
하기의 예제는 박스/버튼과 같은 링크를 표시하기 위해 여러 CSS 속성을 혼용하는 예제입니다.\\
\\
====예제====
<code html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Links Button</title>
    <style>
        a:link {
            background-color: dodgerblue;
            color: yellow;
            padding: 14px 25px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }

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

        a:hover {
            background-color: gold;
        }

        a:active {
            background-color: green;
        }
    </style>
</head>

<body>

    <h2>Link Button</h2>
    <p>A link styled as a button:</p>
    <a href="https://www.netflix.com" target="_blank">This is a link</a>
</body>

</html>
</code>
\\
<code html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Links examples</title>
    <style>
        a:link,
        a:visited {
            background-color: white;
            color: black;
            border: 2px solid green;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }

        a:hover,
        a:active {
            background-color: green;
            color: white;
        }
    </style>
</head>

<body>

    <a href="https://www.w3schools.com" target="_blank">W3SCHOOL - This is a link</a>

</body>

</html>
</code>
  
{{tag>오션, CSS link, text decoration,  }}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
