목차

CSS Links

  • description : CSS Links, Text Decoration, Background Color, Link Buttons,
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-12



Source of the article



CSS를 사용하여 links를 다양하게 꾸밀 수 있습니다.

Styling Links

Links는 CSS 속성 (예: color, font-family, background 등)으로 꾸밀 수 있습니다.

예제

<!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>


추가로, links는 links가 어떤 상태인지에 따라 다양하게 꾸밀 수 있습니다.


예제

<!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>


여러 개의 링크 상태를 위한 스타일링 설정 시 순서를 지켜야합니다.

* a:hover는 반드시 a:link와 a:visited 다음에 선언되어야 합니다.

* a:active는 반드시 a:hover 다음에 선언되어야 합니다.



Text Decoration

text-decoration속성은 링크의 언더라인을 제거하기 위해 사용됩니다


예제

<!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>



Background Color

background-color속성은 링크를 위한 배경색을 지정하기위해 사용합니다.

예제

<!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>



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

예제

<!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>


<!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>
, , , ,