html 링크 태그 버튼 모양 스타일 적용하기 using html link tag button style

html 에서 a 태그를 이용해 다른 웹페이지로 이동할 수 있지만, 링크 태그의 모양을 변경하면 사용자에게 추가적인 정보를 보여주도록 유도할 수 있다. 보통 버튼 모양처럼 만들어 지는데 배경색과 테두리 글자모양을 이용한다. 이미지로도 만들 수 있지만, 지금은 css 스타일을 이용하여 코드로 유연하게 사용한다.

html 링크 태그 버튼 모양 스타일 적용하기
using html link tag button style

링크를 만들 때는 a 태그를 이용하여 다른 웹페이지나 웹사이트로 이동하게 된다.

그런데 밋밋한 모양의 링크 태그는 이것이 메뉴인지 아니면 버튼인지 잘 알 수 없다.

스타일을 적용하면 링크 태그를 버튼처럼 만들 수도 있고, 메뉴 목록처럼 스타일을 지정할 수 있다.

링크 태그에 간단한 스타일을 적용하여 버튼을 만들어 본다.

버튼 스타일

링크 태그를 버튼처럼 보이도록 하기 위해 간단한 스타일을 만들어 본다.

배경은 파란색, 글자색은 흰색이다.

링크 태그인 a 태그의 기본적인 모양을 없애기 위해 text-decoration 을 none 으로 지정하였다.

<style>
    a:link, a:visited {
        background-color: blue;
        color: white;
        padding: 15px 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
    }

    a:hover, a:active {
    	background-color: red;
    }
</style>

샘플코드

위의 스타일을 html 의 링크 태그에 적용하도록 한다.

위의 스타일대로 하면 태그로 지정하는 것이기 때문에 모든 링크 태그에 동일하게 버튼 모양 스타일이 적용될 것이다.

특정 버튼만 적용하는 것이라면 id 또는 class 속성을 지정해 주어야 한다.

이제 코드를 보자.

<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>

<!-- html 문서 시작 -->
<html>
    
	<!-- 문서 정보 -->
	<head>
        <style>
            a:link, a:visited {
                background-color: blue;
                color: white;
                padding: 15px 25px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
            }

            a:hover, a:active {
                background-color: red;
            }
        </style>
    </head>
    <!-- // -->
    
    <!-- 문서 내용 -->
	<body>
        <div>
            <p>
            	<a href="https://www.google.com" target="_blank">구글 바로가기</a>
            </p>
            <p>
            	<a href="https://www.naver.com" target="_blank">네이버 바로가기</a>
            </p>
            <p>
            	<a href="https://www.daum.net" target="_blank">다음 바로가기</a>
            </p>
        </div>
	</body>
    <!-- // -->

</html>
<!-- // -->

html 의 링크태그는 보통의 형식이다.

하지만 스타일에서 링크 태그의 모양을 지정했기 때문에 네모의 파란색 바탕의 버튼 모양이 보여질 것이다.

그리고 hover 옵션을 사용하여 마우스를 올리면 빨간색으로 링크 태그의 배경이 변경될 것이다.

결과 화면을 보자.

위의 코드를 실행하면 아래와 같은 모양이 나온다. 중간의 배경이 빨간색은 마우스가 올라갔을 때의 모양이다.

'programming > web' 카테고리의 다른 글

html img 태그 사용 화면에 이미지 표시 using html image tag (0)	2022.05.23
html 링크 태그 북마크 처럼 사용하기 using a link tag bookmark (0)	2022.05.19
html 링크태그 색깔 종류 using html hyper link tag colors (0)	2022.05.10
html 하이퍼링크 a tag 4가지 속성 특징 using html hyperlink a tag arrtibutes (0)	2022.05.02
html css 테두리 선과 마진 패딩 차이 html border margin padding (0)	2022.04.25