웹 Context 메뉴

JavaScript, WWW
// Context Menu List 렌더링 function renderContextMenuList( list ){ // List Element 생성 const ctxMenuList = document.createElement('ul'); // List Item 생성 list.forEach(function( item ){ // Item Element 생성 const ctxMenuItem = document.createElement('li'); const ctxMenuItem_a = document.createElement('a'); const ctxMenuItem_a_text = document.createTextNode(item.label); // 클릭 이벤트 설정 if( item.onClick ){ ctxMenuItem.addEventListener( 'click', item.onClick, false ); } // Item 추가 ctxMenuItem_a.appendChild( ctxMenuItem_a_text ); ctxMenuItem.appendChild( ctxMenuItem_a ); ctxMenuList.appendChild( ctxMenuItem ); }); // List Element 반환 return ctxMenuList; } // Context Menu 생성 function handleCreateContextMenu(event){ // 기본 Context Menu가 나오지 않게 차단 event.preventDefault(); // Context Menu Element 생성 const ctxMenuId = 'dochi_context_menu'; const ctxMenu = document.createElement('div'); // Context Menu Element 옵션 설정 ctxMenu.id = ctxMenuId; ctxMenu.className = 'custom-context-menu'; // 위치 설정 ctxMenu.style.top = event.pageY+'px'; ctxMenu.style.left = event.pageX+'px'; // 메뉴 목록 생성 ctxMenu.appendChild(renderContextMenuList([ { label: "메뉴1", onClick:…
Read More

폰터 어썸 유료를 내 서버에서 서비스하자

Linux, WWW
※ 자기 서버가 있어야 가능한 기능 입니다. (트래픽주의) 홈페이지를 만들다 보면 사용자에게 주기가 애매한 소스들이 있습니다. 웹이라는 한계성 때문에 어떻게는 사용자가 내용을 알수가 있지만 최대한 주기 싫은 소스에 대해서 내 서버에서 운영을 할 수 있도록 만들어야 하는데 CrossDomain 위반으로 URL Domain이 다를경우에 문제가 생길때가 있습니다. AddType application/font-woff2 .woff2 일단 폰터어썸이 woff2 확장자를 처리를 해야 합니다. 위에 처럼 MIME 을 추가를 해서 처리가 가능하도록 해줘야지만 WEB 서버가 작동을 하게 됩니다. <FilesMatch "\.(ttf|otf|eot|woff|woff2)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch> 위에 처럼 처리를 해줘서 어디서든 불러가서 사용할수 있도록 해주면 일단은 마무리 입니다. 일단 이렇게 사용을 하면은 자기 서버에서 서비스를 할 수 있는것으로 판단은 되지만 잘 작동하지 않을 수도 있지만 저의 입장에서는 현재 그대로 사용을 할 수 있습니다. 이 뿐만 아니라... Javascript를 고객 사이트에 두지 않아도 작동하도록 하는 기능도 작동을 합니다. 원래 이렇게 사용을 하면…
Read More

HTML를 PDF로 만들기

WWW
웹브라우저에서 HTML를 그대로 PDF로 만들기 위해서 찾아 보게 되었습니다. 위 사진은 웹페이지 그대로 화면은 캡쳐한 부분입니다. 해당 화면을 가지고 그대로 PDF로 만들어야 하는 상태 입니다. background로 제작을 하면 되지만 고객이 일단 화면에 먼저 보여지기를 원해서 View를 만들고 그다음에 PDF로 제작을 해야 되는 조건이 붙었습니다. 이렇게 VIew 에서 PDF로 다운 받아서 그대로 확인을 할 수 있도록 만들기 위해서 html2pdf 라이브러리를 사용을 하여서 제작을 하게 되었습니다. 일단든 보여지는 그대로 나오기 때문에 그다지 어렵지는 않았습니다. // Get the element. var element = document.getElementById('PDFROOT'); // Generate the PDF. // orientation는 출력 방항 ( 가로 세로 ), // scale 는 확대 html2pdf().from(element).set({ filename: '<?=$mainResData['reportNo'];?>', html2canvas: { scale: 1 }, jsPDF: {orientation: 'portrait', unit: 'mm', format: 'A4', compressPDF: true} }).save(); Javascript 코드는 위와 같이 처리를 하면은 됩니다. 좀 더 자세한 사항은 html2pdf 옵션을 찾아 보면은 자세하게…
Read More

Apache SSL 등급 확인

Linux, WWW
제가 운영하는 웹서버의 SSL 등급기 갑자기 궁금해져서 한번 테스트를 해보았습니다. 테스트에 사용된 사이트는 ssllabs.com 에 기능을 이용하였습니다. 아래에 링크를 첨부해 놓았습니다. https://www.ssllabs.com/ssltest/analyze.htm 결과는 좋게 A 등급이 나왔습니다. 서버에 사용하는 모든 버전이 업데이트 되면서 결과가 좋게 나온다고 생각은 하였지만 생각하는 부분과 결과를 눈으로 직접 보는것은 다른듯 합니다. 결과화면에 대한 캡쳐본 가끔식은 트렌드에 따라서 움직여야 하는 일이 있습니다. 특히 보안에 관련된 사항은 좀 더 많은 부분을 신경쓰고 현재 진형으로 가는 부분을 잘 적용하는것이 좋을듯 합니다. 위 결과 화면 아래에 더 많은 정보가 있지만 캡쳐를 할 이유가 없어서 위에 가장 중요한 화면만 캡쳐만 한것입니다.
Read More

Web Script 백업

WWW
<script> $(document).ready(function() { var selectCustIdx; // 거래처 선택값 var selectUnitStandard; var RowDisplayVal; var rawUnitQuantity = new Array(); var rawCustIdx = new Array(); var rawObjNumber = new Array(); var rawObjstandard = new Array(); // 계산 함수 호출 checkCal(); // 거래처 선택 $("#rowCustIdx").change(function() { selectCustIdx = $(this).val(); // SelectUnitStandardReload(); }); // 규격 선택 $("#rowUnitStandard").change(function() { selectUnitStandard = $(this).val(); // RowDisplayCheck(); }); // 거래처 선택시 규격 제어하기 function SelectUnitStandardReload() { var custUnitStandardData = new Array(); var option; // if( typeof selectCustIdx == "undefined") { selectCustIdx = "0"; }; if( typeof selectUnitStandard == "undefined") { selectUnitStandard = "0"; }; // <?php foreach( $custUnitStandardList as $row) { echo 'custUnitStandardData.push("'.$row.'"); '.chr(10); }; ?> // 초기화 추가 $("#rowUnitStandard option").remove(); // if( selectCustIdx == "0" && selectUnitStandard == "0") { option = $("<option value=\"0\" selected=\"selected\" style=\"font-weight:bold;color:#C00000\">규격 :: 전체</option>");…
Read More

워드프레스 자동 업그레이드 중 Briefly unavailable for scheduled maintenance. Check back in a minute. 메세지가 나올 경우

WWW
자동업그레이드 도중 웹사이트의 접속이 끊길경우 "예약되어 있는 유지보수를 위해 잠시 사용할 수 없습니다. 잠시 후에 다시 확인하세요. (Briefly unavailable for scheduled maintenance. Check back in a minute.)" 메세지가 나올 경우에 재 접속을 하여도 관리자 페이지로 들어갈수 없습니다. 이럴경우에 웹으로는 더이상 어떠한 조치를 취할수 없습니다. 해당 문제를 해결하기 위해서 FTP로 워드프로세스가 설치된 디렉토리에 방문하여서 ".maintenance" 파일을 삭제후 다시 접속을 하면은 정상적으로 접속 할 수 있습니다. 저도 이번에 처음 겪어보는 일이라서 검색을 해 볼 생각도 하지 않고, 몇시간을 그냥 방치해두었더니 결국은 접속을 할 수 없어서 검색을 해보고 삭제 하고 나니 정상적으로 접속이되어서 블로그를 관리 할 수 있게 되었습니다.
Read More

Jquery 모음

WWW
INPUT BOX에 사용자가 입력할 경우에 keyup Event를 통해서 실시간으로 계산해서 다른 InputBox에 값 넣어주기 // $(document).on('propertychange change keyup paste input' , "input[name='이름']", function(){ //필요한값 획득 var objStandardS0 = $(this).parents("tr").find('input[name="이름[]"]').val(); var objStandardS1 = $(this).parents("tr").find('input[name="이름"]').val(); //계산 var objStandard = objStandardS0 - objStandardS1 / 2; // $(this).parents("tr").find('input[name="이름"]').val(objStandardS0 +"*"+objStandardS1+"*"+objStandard.toFixed(1)); // 소수점 1자리까지 표현 $(this).parents("tr").find('input[name="이름"]').val(objStandard.toFixed(1)); }); 모달창을 닫기 // 모달창 닫기 event.preventDefault(); $("#modal2").hide(); $('.jquery-modal').hide(); 동적으로 Table에 TR 행을 추가하기 var TrLength = $('#insertTbl tbody tr').length; TrLength = TrLength + 1; html += "<tr>"; html += "<td>번호</td>"; html += "</tr>"; $('#insertTbl > tbody').append(html); // selectbox 의 값 선택하기 $('#ID이름' + TrLength).val(objUnit).prop("selected", true); 동적 추가한 TR을 삭제하고 순서에 대한 번호를 새롭게 다시 표시해주기 $(this).parent().parent().remove(); // 해당행 삭제 var rowNum = 1; $('#insertTbl tbody tr').each(function() { $('#rowNum', this).text(rowNum); rowNum++; }); Button 을 클릭시에 모달창을 띄우기 // 모달창 $(document).on("click","#qualityStandards",function(){…
Read More

[HTML] DIV 웹 스크롤 따라 다니도록 하기

WWW
[HTML] DIV 웹 스크롤 따라 다니도록 하기 <div style="position:relative;float:left;width:80px;"> <div id="scroll" style="position:absolute;top:0px;left:0px;"> <div>따라갑시다.</div> </div> </div> <script> $("document").ready(function() { $(window).scroll(function() { $('#scroll').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350}); }); $('#scroll').click(function() { $('#scroll').animate({ top:"+=15px",opacity:0 }, "slow"); }) }); </script>
Read More

[NGINX] userdir 추가

WWW
[NGINX] userdir 추가 location ~ ^/~([^/]+)/(.+\.php|\.htm)$ { if (!-f /home/$1/www/$2) { rewrite ^ 404; } alias /home/$1/www/$2; } location ~ ^/~([^/]+)(/.*)?$ { alias /home/$1/www$2; autoindex on; }
Read More
카카오톡으로 웹페이지 img src 사용시에 ‘./’ 인식문제

카카오톡으로 웹페이지 img src 사용시에 ‘./’ 인식문제

WWW
카카오톡으로 웹페이지 img src 사용시에 './' 인식문제 내용이랄것도 없습니다. 단순하게 소스만 올리고 캡쳐 사진만 올리기 보다는 한번 경험담을 적어 보는것도 좋지 않을까 싶어서 글을 작성하는 것입니다. 제가 겪은 상항이 100% 해결 방법도 아님을 미리 고지 합니다. 웹페이지를 제작해드리고 나서 스마트폰으로 카카오링크를 통해서 주소를 전달하면서 접속 할 수 있도록 하는것이였습니다. HTML 태그 중에서 " <img src"./이미지 파일 이름"> "으로 사용하는 경우도 제법 있습니다. " ./  " 은 아마 그 해당 디렉토리에서 처리하기 위해서 가끔 사용하기도 합니다.  하지만 이번에는 문제가 발생한 부분이 " ./ "로 하는 것이었습니다. 웹브라우저의 인식의 문제 인지 인앱의 문제인지는 확실하지 않습니다. 제가 겪은 부분은 문제가 있으니 한번 고쳐 달라는 단순한 요구 사항을 듣고, 이러하다는것을 토대로 그냥 상대 경로를 절대 경로로 변경하는 작업을 한것 뿐이기에 다시 한번더 정확하지 않음을 말씀드립니다. 위에 접부된 사진을 기준으로 설명을 하겠습니다. 1차 적으로 웹페이지의…
Read More

SNS 공유 기능 META 태그 정리

WWW
SNS 공유 기능 META 태그 정리 <!-- 페이스북 --> <meta property="og:title" content="제목"/> <meta property="og:site_name" content="사이트명"/> <meta property="og:type" content="분류 (website,article,place,product,event ...)"/> <meta property="og:url" content="주소"/> <meta property="og:image" content="썸네일 (200x200.jpg)"/> <meta property="og:description" content="요약글"/> <!-- 트위터 --> <meta name="twitter:card" content="분류 (summary, photo, gallery ...)"> <meta name="twitter:title" content="제목"> <meta name="twitter:site" content="사이트명"> <meta name="twitter:creator" content="작성자명"> <meta name="twitter:image" content="썸네일"> <meta name="twitter:description" content="포스트 내용"> <!-- 미투데이 --> <meta property="me2:post_body" content="포스트 내용"/> <meta property="me2:post_tag" content="태그"/> <meta property="me2:image" content="썸네일"/> <meta property="me2:latitude" content="위도"/> <meta property="me2:longitude" content="경도"/> <meta property="me2:post_icon" content="포스트 아이콘 (1~12 숫자"/> <meta property="me2:category1" content="카테고리1"/> <meta property="me2:category2" content="카테고리2"/> 출처 : http://classe82.blog.me/20198541611 http://somsommi.com/blog/sns-sns-%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0-%EA%B8%B0%EB%8A%A5%EC%9D%84-%EC%9C%84%ED%95%9C-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC/
Read More

HTTP Protocol Code Meaning 의미

WWW
HTTP Protocol Code Meaning 의미 100 Continue 계속 101 Switching Protocols 스위칭 프로토콜 200 OK (no error) 확인 (오류 없음) 201 Created 생성됨 202 Accepted 수락함 203 Non-Authoritative Information 신뢰할 수없는 정보 204 No Content 아무 내용 없음 205 Reset Content 콘텐츠를 재설정 206 Partial Content 일부 콘텐츠 300 Multiple Choices 여러 선택 301 Moved Permanently 영구적으로 이동됨 302 Moved Temporarily 임시 이전 304 Not Modified 수정되지 않음 305 Use Proxy 프록시를 사용 400 Bad Request 잘못된 요청 401 Unauthorized 권한이없는 402 Payment Required 지불 필요 403 Forbidden 금지된 404 Not Found 찾을 수 없음 405 Method Not Allowed 방법 허용되지 않음 406 Not Acceptable 허용되지 않음 407 Proxy Authentication Required 프록시 인증 필요 408 Request Time-Out 요청 시간 초과 409 Conflict 갈등 410 Gone 사라짐 411 Length Required 소요…
Read More

웹페이지 카카오로 공유하기

JavaScript, WWW
웹페이지 카카오로 공유하기 카카오톡 공유하기 위해서 필요한 자바스크립트를 호출 합니다. <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script> 카카오톡에 메세지를 보내는 방법 입니다. <script> function kakaoSend(){ Kakao.init('API Key'); Kakao.Link.sendTalkLink({ label: '라벨', image: { src: '이미지 주소', //http가 붙은 전체 경로 width: '넓이', height: '높이' }, webButton: { text: '버튼 타이틀', url: '링크URL' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다. } }); } </scritp> <a href="#" onclick="kakaoSend(); return false;">카카오톡 공유</a> 카카오 스토리에 해당 페이지를 공유 할 수 있습니다. <script> function shareStory() { Kakao.Story.share({ url: '공유할 웹페이지 주소', text: '공유할 웹페이지 요약 혹은 메세지' }); } </scritp> <a href="#" onclick="shareStory(); return false;">카카오스토리 공유</a>
Read More

[WWW] 도메인 Status 상태 설명

WWW
Status:OK :모든게 정상적으로 사용가능한 상태 Status:INACTIVE :네임서버가 1개만 적용되어 있는 경우    org, info, biz, cn, us의 경우 2개 이상의 네임서버가 적용되어 있어야 함. Status:TRANSFER PROHIBITED Status:ACTIVE :정상적으로 사용가능하며, 신규 등록후 60일까지 이전금지된 상태로 되어 있음. Status:CLIENT RENEW PROHIBITED Status:ACTIVE :정상적으로 사용가능하며, 연장할수 없는 상태   Status:PENDING TRANSFER Status:ACTIVE :정상적으로 사용가능하며, 타기관으로부터 이전요청들어온 상태    이때에는 정보변경을 할 수 없습니다. Status:PENDING UPDATE Status:ACTIVE :정상적으로 사용가능하며,정보 갱신중인 상태 Status:PENDING RENEW Status:ACTIVE :정상적으로 사용가능하며,연장중인 상태 Status:PENDING DELETE Status:REGISTRY-HOLD :사용 불가능하며, 삭제대기중인 상태, 기간연장및 복구불가능 Status:CLIENT HOLD Status:REGISTRAR-HOLD :등록기관에서 권한이 있슴. :사용기간 만료일 경우 :사용 불가능하며, 기간연장 가능함. Status:DELETE PROHIBITED :삭제 금지 :주로 분쟁이나 소송중인 도메인 Status:UPDATE PROHIBITED :정보변경 금지 :주로 분쟁이나 소송중인 도메인 Status:TRANSFER PROHIBITED :기관이전 금지 :주로 분쟁이나 소송중인 도메인 Status:RENEW PROHIBITED Status:REGISTRY-LOCK :연장금지이며, 네임서버변경,정보변경, 기관이전 금지 Status:CLIENT DELETE PROHIBITED :주로…
Read More