CSS a href 링크 / div 링크 100% 버튼

사람들이 가장 많이 사용하고 있는 CSS a href 링크와 div 링크는 쉬우면서도 어려워 합니다. 그 이유가 버튼형으로 만들때 가장 많이 그렇습니다. 어려워 하시는 분들을 위해 간단해게 수정해서 사용할수 있는 소스를 만들어 보았습니다. 활용하여 막힘없는 코딩하시기 바랍니다.

기본체크

----------

• a:link - 체크하기전 링크

• a:visited - 체크한 링크

• a:hover - 사용자 버튼오버링크

• a:active - 사용자 클릭링크

링크의 정렬과 target설정하는 방법을 아래에 정리해 놓았으니 참고 하시기 바랍니다. 이 예제는 몇 가지 CSS 속성을 결합하여 링크를 버튼으로 표시하는 고급단계 예제를 보여주었습니다.

a href

-------

a:link, a:visited, a:hover, a:active

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

※ 다른 브라우저에 링크를 여시려면 <a href="#링크" target="_blank"><strong>LINK</strong></a> 이렇게 사용하시면 됩니다.

div

----

div a:link, div a:visited, div a:hover, div a:active

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

cs

직접 링크에 소스를 적용하면서 마우스오버나 여러가지 옵션은 삭제 하였습니다. 색변경하여 샘플 만들어서 사용하실분은 참고하시기 바랍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<a href="#링크" style="background-color: #f44336; color: white; display:block; padding:14px 25px; text-decoration: none; ">
<strong>LINK</strong></a>
 
<a href="#링크" style="background-color: #ec008c; color: white; display:block; padding:14px 25px; text-decoration: none; ">
<strong>LINK</strong></a>
 
<a href="#링크" style="background-color: #603913; color: white; display:block; padding:14px 25px; text-decoration: none; ">
<strong>LINK</strong></a>
 
<a href="#링크" style="background-color: #0076a3; color: white; display:block; padding:14px 25px; text-decoration: none; ">
<strong>LINK</strong></a>
 
<a href="#링크" style="background-color: #52007b; color: white; display:block; padding:14px 25px; text-decoration: none; ">
<strong>LINK</strong></a>
 
<a href="#링크" style="background-color: #8dc73f; color: white; display:block; padding:14px 25px; text-decoration: none; ">
<strong>LINK</strong></a>

cs

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

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

CSS 글꼴 Font 속성 (0)	2017.09.27
Html5 표현태그 텍스트서식태그 (0)	2017.07.12
인포그래픽 아이콘사용방법 (2)	2017.06.30
CSS hover 스타일값을 다르게 보여주고 싶을때 (0)	2017.06.18
HTML/CSS 참고링크 (0)	2017.06.17

미래디자인 life

CSS a href 링크 / div 링크 100% 버튼