버튼 만드는 방법

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

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

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

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

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가지 다양한 색상의 버튼을 만들 수 있으며 예제는 아래와 같습니다.

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

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

버튼 텍스트

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

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

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