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

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css_links
wiki:css:css_note:css_links

목차

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가 어떤 상태인지에 따라 다양하게 꾸밀 수 있습니다.

  • a:link - 방문하지 않은 링크
  • a:visited - 사용자가 방문한 링크
  • a:hover - 사용자가 마우스를 올린 링크
  • a:active - 사용자가 마우스를 클릭한 순간의 링크


예제

<!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>
, , , ,
/volume1/web/dokuwiki/data/pages/wiki/css/css_note/css_links.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki