Tip & Tech

활용팁

홈 > 회원포럼 > 활용팁
활용팁

글 주소 복사버튼 만들기의 또 하나의 방법

16 옛노래광 8 705 3 0

안녕하세요?

열심히 학습은 합니다만 진도가 영~~ 시원챦은 1인입니다..


우성군님의 글도 보고 따라해보고 이래저래 해보는데 실패했습니다.

질문을 드리려다가 다시금 검색 또 검색 -> 적용 테스트 -> 검색 -> 적용 테스트

무한 반복을 하다가 질문을 드릴 타이밍을 놓쳤습니다.


그러다가 한가지 방법이 통하지 않을까하여 

시도하다가 성공했습니다.


a483d789a75abb324d725d14febf58db_1511265619_3565.png
공유용 주소 복사 버튼을 클릭하면 아래처럼 복사가 되었음을 알려주네요.

a483d789a75abb324d725d14febf58db_1511265619_3793.png

새로운 창이나 탭을 열고서 붙이기 하고 엔터를 누르면 잘 됨니다.


우선은 해당보드 view.skin.php 파일의 적당한 위치에  아래내용을 사용해 봅니다.




	<!--	<i class="fa fa-share-alt"></i> 글주소 : http://<?php echo $_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?> -->
       <!-- 위 문장은  글주소 복사가 되어서 주석문 처리했습니다. -->


 <script type="text/javascript" src="../js/clipboard.min.js" charset="utp-8"></script>



 <input id="osb" type="text"  size="120" value="http://<?php echo $_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>">
 <button class="btn btn-sm btn-black" type="button"  class="btn" data-clipboard-action="copy" data-clipboard-target="#osb">공유용 글주소 복사</button>


 <script>

    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {

        alert("복사되었습니다.");
    });


    clipboard.on('error', function(e) {
        alert("실패하였습니다.");
    });
 </script>



저는 이렇게만 성공을 하였습니다.


../js/clipboard.min.js

구문에 보이는 clipboard.min.js 파일은 우성군님 홈에 보시면 원본 파일의 공홈이 있습니다.

그곳을 참고했습니다.

그리고 그누5 루트/JS 폴더에 업로드 했습니다.


그리고 위 소스를 적용했습니다.


지금 추운데 현장 작업을 한 후라서 졸리고 춥고 떨리고 그러네요..


두서없이 적은 글이지만 이런저런 방법들이 검색하시면 많이 나옴니다.

그러나 각기 서버 환경마다 설정마다 다르기에 저처럼 헤메는 분들도 많을 것 같습니다.

그러나 노익장의 끈기로 도전한 결과 저는 오늘 성공을 했습니다.

버튼은 기존의 것에서 아미나 스타일로다가 사알짝 바꾼 결과 입니다.



 <button class="btn btn-sm btn-black" type="button"  class="btn" data-clipboard-action="copy" data-clipboard-target="#osb">공유용 글주소 복사</button>

구문에서 class="btn btn-sm btn-black"  black 값을 red , blue 등의 색이름을 지정하면 바꿀 수 있더군요.


이 글을 통하여

아미나 가족 전체와 비롯하여 주인장님께 깊은 감사의 마음을 전하면서

출석만 열심히아여 600여일을 넘기고 있지만서도 ...... 학습은 매일같이 열심히하고

고수님들의 자료들도 열심히 다운받아서 학습 또한 게을리 하지 않는데

진척은 없네요. 그래도 감사 또 고마운 마음이 가득입니다.


초보자 / 초심자 / 입문자의 눈높이에 맞게끔 잘 설명해 주시고 가르침 주시는 많은 분들이 있기에

아미나가 더욱 빛을 발하지 않는가 싶습니다.


비록 작은 24시간 음악방 홈페이지를 자가서버에서 운용하지만

아미나와 함께 잘 되었으면 합니다...


그리고 테스트 페이지 ( 보드 스킨 등.. ) 를 볼 수 있는 곳을 맹글어서 

저와 같은 입문자분들과 함께 하고싶은 마음입니다만 아직은 입문자 입니다...

좀 더 성숙해지면 그때 함께 할꼐요...


우성군님 홈에도 출석만 1년이 다되어가네요...

우성군님 항상 고맙습니다.. 이 자리를 빌어 감사의 마음을 전합니다...꾸벅~~

신비님의 도움도 많이 받았어요..

직접 질문이나 답변은 못받았지만 다른분들의 글에 대해 답해주신 부분이

저같은 입문자의 눈높이에 맞더라구요.. 그외에도 다 언급은 못하지만 고마움을 전합니다..


그럼 쬐금이라도 도움이 되싶사하는 마음에 

함께하는 마음에 글 마감합니다...꾸벅~~

추운바람이 불때 감기조심하시고, 지진피해자분들께도 응원의 메시지 전합니다....





---- 추가수정해 봅니다. ----

1.       alert("글 주소가 정상적으로 클립보드에 복사되었습니다.                            이를 활용하시어 공유하시면 됨니다.");
적당하게 사용해보니 2줄로 이쁘게 잘 보이네요. 단순하게 복사되었습니다보다는 나은것 같아서 수정해 보았습니다.

2. <input id="osb" type="text"  size="120"  style="background-color: #e2e2e2; padding:0px 0px 0px 20px; color:#0000FF;" value="http://<?php echo $_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>">
 에서 스타일을 지정해 보았습니다. [ style구문 ]또는 [input구문]을 검색하시면 잘 정의되고 설명이 되어져 있네요.
저는 이 부분에서 " 하나때문에 안되는줄 알고 포기하고 다시금 검색하다가 "를 발견했습니다.

size="120"  : 입력란의 크기
style="background-color: #e2e2e2; padding:0px 0px 0px 20px; color:#0000FF;"  스타일지정
background-color: #e2e2e2; 배경색을 지정한 것입니다.
padding:0px 0px 0px 20px;  들여쓰기를 지정한 것입니다. 현재 20은 왼쪽을 20 띄우라는 것이네요.
color:#0000FF;  글자색 입니다. 

3. <i class="fa fa-share-alt"></i> 공유용 글주소 복사
에서 <i class="fa fa-share-alt"></i> 를 추가하니 아미나와 비슷해 졌네요. 폰트어셈을 끌어다가 쓰는 방법은 많은 분들께서 설명해 주셨더군요.
저도 아직은 사용이 미숙하여 복사해 사용합니다.. 좀 더 학습해봐야할듯합니다.

여기까지 입니다.

8 Comments
17 사노라면 2017.11.22 10:54  
수고하셧읍니다

Congratulation! You win the 18 Lucky Point!

2 심봉사 2017.11.23 00:30  
조언 요청 ) 글 주소 복사버튼 만들기의 또 하나의 방법
http://11q.kr/g5s/bbs/board.php?bo_table=s11&wr_id=3272&&#c_3273
에 제가 쓰는  skin 첨부 했는데  수정 조언 부탁 드립니다
16 옛노래광 2017.11.23 11:35  
예..제가 가능한 부분까지 해보겠습니다...
16 옛노래광 2017.11.23 12:52  
회신해 드렸습니다.
보기모드를 폴더로 구분하여 따로 작성하였고 스샷까지 압축에 포함하여 첨했습니다.
홈을 확인하시기 바람니다...꾸벅~~
작은 도움이라도 되실려는지 염려가 큼니다....( 땀 뻘뻘~~ )
7 이니스프리 2017.11.23 21:31  
좋은 팁 감사드려요 ^-^
감기 조심하세요~
16 옛노래광 2017.11.24 00:29  
고맙습니다..
저같은 입문자에게 힘이 되는 의견을 주셨네요..
항상 건강하십시요..꾸벅~~
8 우성군 2017.11.27 00:52  
감사합니다 ㅠㅠ 제가 요새 활동을 안해서 흐흑
16 옛노래광 2017.12.03 06:45  
고맙습니다..  항상 건강하십시요..꾸벅~~
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory NaverBand