사용자 참여와 접근성을 높이기 위한 블로그 '링크 버튼' 만드는 방법

블로그를 운영하면서 다른 블로그를 참고하여 내 블로그를 더 편리하게 꾸미게 됩니다. 오늘은 다른 블로그에서 많이 사용하는 링크 버튼을 만들어 보도록 하겠습니다. 초보자도 쉽게 따라하실 수 있으니 천천히 따라와주시기 바랍니다.

블로그 버튼의 기본요소 이해하기

블로그 버튼을 만들기 위해서는 기본적으로 HTML과 CSS를 이해해야 합니다.

HTML(HyperText Markup Language) : 웹 페이지의 기본 구조와 내용을 만드는 기능을 합니다.
CSS(Cascading Style Sheets) : HTML로 만들어진 구조에 스타일을 입혀주는 기능을 합니다.

위의 두가지 기능을 이용하면 자신만의 디자인 버튼을 만들수 있습니다.

HTML 코드 설명 및 작성

<a> 태그 : 하이퍼링크를 생성하는 태그입니다.
href : 링크할 주소를 지정합니다.
class : CSS 스타일이 클래스 이름 요소에 적용됩니다.
target : 새로운 창에서 열릴지를 결정합니다.
텍스트 : 버튼에 표시될 텍스트를 입력합니다.

HTML작성을 아래와 같이하면 코드가 완성됩니다. 작성된 코드는 메모장에 저장해놓고, 글을 쓰실때마다 HTML 글쓰기에서 버튼을 넣고자 하는 위치에 붙여넣으면 됩니다.

<a class="myButton red" href="연결사이트주소" style="color: white;" target="_blank">표시될 텍스트</a>

CSS 코드 설명 및 작성

CSS 기본구조에 필요한 요소를 사용하시면 됩니다.

background-color : 버튼의 배경색을 지정합니다.
border : 버튼의 테두리색을 지정합니다.
color : 텍스트 색을 지정합니다.
padding : 버튼의 내부 여백을 설정하여 크기를 조절합니다.
text-align : 텍스트의 정렬 방식을 지정합니다.
text-decoration : 밑줄같은 텍스트의 장식을 설정합니다.
display : 요소의 디스플레이 타입을 지정합니다.
font-size : 텍스트의 크기를 설정합니다.
border-radius : 버튼의 모서리 둥글기를 설정합니다.
transition-duration : 마우스 호버 등의 효과 및 지속 시간을 설정합니다.
cursor : 마우스를 올렸을 때 커서 모양을 지정합니다.
.myButton:hover : 마우스를 버튼 위에 올렸을 때 적용되는 스타일을 지정합니다.
box-shadow : 버튼에 그림자 효과를 추가하여 입체감을 줍니다.

사용되는 모든 색상은 색상표의 코드를 사용합니다.

색상 코드표 보러가기

CSS 구조 예시

/* 버튼 서식 */

.myButton {

	border-radius:20px;

	display:inline-block;

	cursor:pointer;

	color:#ffffff;

	font-family:Noto Sans Korean;

	font-size:30px;

	font-weight:bold;

	padding:15px 30px 15px 30px;

	text-decoration:none;

	text-shadow: none;

}

.myButton:hover {

	background:linear-gradient(to bottom, #c0c0c0 5%, #747474 100%);

	background-color:#ff0000;

}
.myButton:active {

	transform: translateY(3px);

	position:relative;

	top:1px;

}

.myButton.red{

      background-color: #ff0000;

      border-bottom:5px solid #aa2700;

    }

    .myButton.red:active{

      border-bottom:2px solid #aa2700;

    }

/* END 버튼 서식 */

만들어진 CSS코드는 자신의 블로그 테마 HTML편집에서 CSS추가를 위해 붙여넣기 합니다.

높은 클릭률을 위한 디자인 팁

대비 색상 사용 : 버튼이 배경에서 눈에 띄도록 하세요.
명확한 텍스트 작성 : "지금 구독하세요" 또는 "자세히 알아보기"와 같이 간단하고 실행 가능한 단어를 사용하세요.
버튼 위치 설정 : 스크롤 없이 볼 수 있는 부분이나 주요 콘텐츠 근처 등 눈에 잘 띄는 영역에 버튼을 배치합니다.
모바일 최적화 : 모바일 독자 수가 증가함에 따라 바로가기 버튼이 모바일 친화적인지 확인하세요.

간단한 코드를 활용하여 블로그에 바로가기 버튼을 적용하는 것은 사용자 참여와 접근성을 높이는 간단하면서도 강력한 방법입니다. 독자와의 상호 작용 및 더 강력한 관계를 구축하는 데 도움이 되는 자신만의 버튼을 만들어보세요.

블로그에 링크 버튼 만들기