• 오타 혹은 오류사항이 있는 게시글에 댓글을 달아주세요. 신고도 환영합니다
    일주일 동안 열지 않기
  • 목록
  • 아래로
  • 위로
  • 쓰기
  • 검색

컴퓨터 활용 xdt 버튼만들기

출처 스크랩

blog_color_addon_title_2.png


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


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


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


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


blog_color_addon_6.png 


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


XDT 버튼 애드온 사용법 예제 1.
1
<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button">버튼 텍스트</a>


href="(링크 주소)"


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


XDT 버튼 사용법 예제 2.
1
<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button" target="_blank">버튼 텍스트</a>


target="_blank"


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


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



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


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



1. Tiny 사이즈의 버튼


XDT 버튼 애드온 사용법 예제 3.
1
<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button tiny">버튼 텍스트</a>



2. Small 사이즈의 버튼


XDT 버튼 애드온 사용법 예제 4.
1
<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button small">버튼 텍스트</a>



3. Medium 사이즈의 버튼


XDT 버튼 애드온 사용법 예제 5.
1
<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button medium">버튼 텍스트</a>



4. Big 사이즈의 버튼


XDT 버튼 애드온 사용법 예제 6.
1
<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button big">버튼 텍스트</a>




버튼 색깔 바꾸기


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



버튼 색상표

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



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



XDT 버튼 애드온 사용법 예제 7.
1
<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button red">버튼 텍스트</a>



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


XDT 버튼 애드온 사용법 예제 8.
1
<a href="버튼을 클릭할 시에 넘어갈 링크 주소" class="xdt_button medium red">버튼 텍스트</a>

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


facebooktwitterpinterestbandkakao story

공유

facebooktwitterpinterestbandkakao story
퍼머링크

댓글 0

댓글 쓰기

신고

"님의 댓글"

이 댓글을 신고 하시겠습니까?

삭제

"님의 댓글"

이 댓글을 삭제하시겠습니까?