버튼 만드는 방법

2013.02.21 23:08

2donggalbi 조회 수:6765



blog_color_addon_title_2.png


이 문서는 사용자가 "XDT 버튼 애드온"을 사용자의 홈페이지에서 사용하는법을 자세히 안내합니다.


앞의 "XDT 버튼 애드온 사용자 메뉴얼 - 다운로드부터 설치까지" 안내를 따라 서버에 애드온을 설치 하셨을 겁니다.


이제 설치한 애드온을 사용해볼 차례입니다.


버튼은 "페이지 수정 - 내용 직접 추가" 또는 게시판의 쓰기 버튼을 클릭하여 에디터를 불러온 후, HTML 편집기 를 통해 만들 수 있습니다.


blog_color_addon_6.png


HTML 편집기를 통해 HTML 태그를 사용할 수 있게 되었다면 아래의 태그를 복사합니다.


<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button">버튼 텍스트</a>


href="(링크 주소)"


링크 주소란에 버튼이 클릭했을때 넘어갈 링크주소를 넣습니다. 만약 클릭시 새로운 탭, 창으로 링크를 열고 싶다면 아래와 같이 코드를 작성합니다.


<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button" target="_blank">버튼 텍스트</a>


target="_blank"


새로운 창으로 링크를 열으라는 코드입니다.


홈페이지에 위 버튼을 그대로 복사해서 적용할 경우 아래와 같은 버튼이 생성됩니다.


버튼 텍스트


가장 기본적인 코드로 작성된 이 버튼은 중형크기의 파란색 버튼입니다.


사용자는 4가지 크기의 버튼을 만들 수 있으며 각각의 예제는 다음과 같습니다.



1. Tiny 사이즈의 버튼


<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button tiny">버튼 텍스트</a>


버튼 텍스트


2. Small 사이즈의 버튼


<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button small">버튼 텍스트</a>


버튼 텍스트


3. Medium 사이즈의 버튼


<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button medium">버튼 텍스트</a>


버튼 텍스트


4. Big 사이즈의 버튼


<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button big">버튼 텍스트</a>


버튼 텍스트



버튼 색깔 바꾸기


사용자는 크기 외에 11가지 다양한 색상의 버튼을 만들 수 있으며 예제는 아래와 같습니다.



버튼 색상표

blue, red, brown, pink, green, silver, purple, aqua, white, black, yellow



색상마다 예제를 만들어 드리고 싶으나 노가다 이므로...ㅠㅠ 한개만 알려드리면 응용하실 수 있으실 겁니다.



<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button red">버튼 텍스트</a>


버튼 텍스트


medium 사이즈 이면서 red 컬러인 버튼을 만들고 싶으시면


<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button medium red">버튼 텍스트</a>

이런 코드를 작성하시면 됩니다.