CSS 링크의 color와 background-color

홈페이지만들기를 할때 디자인이 완료되면 코딩을 하게 되는데 코딩에 있어 가장 많이 쓰는건 CSS의 링크입니다. CSS 링크의 color와 background-color기본 링크와 응용한 고급버튼 만들기를 알아보겠습니다.

예제 - 텍스트 a { color: hotpink; }, a:link { color: red; }, a:link { text-decoration: none; }, 버튼 a:link { background-color: yellow; }

웹디자이너들이 가장 많이 사용하는 정의 - 링크는 모든 CSS 속성 (예와 스타일 수 color, font-family, background등).

또한 링크의 상태 에 따라 다르게 스타일을 지정할 수 있습니다 .

네개의 링크 상태는 다음과 같습니다.

a:link - 정상적인 클릭하지 않은 링크
a:visited - 사용자가 클릭한 링크
a:hover - 사용자가 마우스를 올려 놓았을 때의 링크
a:active - 클릭 한 순간의 링크

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <style>
        a:link { color: red; }
        a:visited { color: green; }
        a:hover { color: hotpink; }
        a:active { color: blue; }
    </style>
</head>
<body>
    <a href="default.asp">LINK</a>
</body>
</html>
cs

여러 링크 상태에 대한 스타일을 설정할 때 몇 가지 순서 규칙이 있습니다.

a:hover는 a:link와 a:visited 뒤에 와야합니다.

a:active a:hover 다음에 와야합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <style>
        a:link { text-decoration: none; }
        a:visited { text-decoration: none; }
        a:hover { text-decoration: underline; }
        a:active { text-decoration: underline; }
    </style>
</head>
<body>
    <a href="default.asp">LINK</a>
</body>
</html>
Colored by Color Scripter
cs

텍스트 장식

이 text-decoration속성은 주로 링크에서 밑줄을 제거하는 데 사용됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <style>
        a:link { background-color: yellow; }
        a:visited { background-color: cyan; }
        a:hover { background-color: lightgreen; }
        a:active { background-color: hotpink; } 
    </style>
</head>
<body>
    <a href="default.asp">LINK</a>
</body>
</html>
Colored by Color Scripter
cs

배경색

background-color속성은 링크에 대한 배경 색상을 지정하는 데 사용할 수 있습니다.

a:hover는 CSS 정의에서 a:link와 a:visited 뒤에 와야합니다.

a:active은 효과적이기 위해 CSS 정의에서 a:hover 다음에 와야합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <style>
    a:link, a:visited {
        background-color: #f44336;
        color: white;
        padding: 14px 25px; /** 버튼 넓이와 높이설정 **/
        text-align: center; /** 텍스트위치 설정 **/
        text-decoration: none;
        display: inline-block;
    }
    a:hover, a:active {
        background-color: red;
    }
</style>
</head>
<body>
    <a href="default.asp">LINK</a>
</body>
</html>
Colored by Color Scripter
cs

고급 - 링크 버튼

이 예제는 몇 가지 CSS 속성을 결합하여 링크를 상자 / 버튼으로 표시하는 고급 예제를 보여줍니다.

[홈페이지만들기] - CSS style 컬러 기본설정

[홈페이지만들기] - vertical-align와 text-align CSS 활용하여 정렬하기

[홈페이지만들기] - html 순서 및 목록 만들기

[홈페이지만들기] - html 창크기 조절(반응형코딩)

[홈페이지만들기] - ul li 가로정렬로 메뉴만들기 (css가로정렬)

[홈페이지만들기] - div 프레임나누기

저작자표시 비영리 변경금지

'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글

html 슬라이딩 소스 참고하세요. (2)	2017.04.18
스타일시트 CSS Style margin (0)	2017.02.16
CSS style 컬러 기본설정 (0)	2017.02.09
vertical-align와 text-align CSS 활용하여 정렬하기 (2)	2017.02.03
html 순서 및 목록 만들기 (2)	2017.02.02

미래디자인 life

CSS 링크의 color와 background-color