audio태그를 이용해서 음악을 넣으면 아래처럼 ... 버튼을 누르면 다운로드, 재생속도를 조절할 수 있는 메뉴가 뜨게 된다. 이 메뉴가 뜨지 않게하려면 태그 사이에 controlsList="noplaybackrate nodownload nofullscreen"을 추가하면 된다. noplaybackrate -> 재생속도 메뉴 안보이게 nodownload -> 다운로드 메뉴 안보이게 nofullscreen -> 영상의 경우 풀스크린 안되게 코드

placeholder 글자색 변경하는 방법은 아주 간단! CSS 파일에 아래 코드를 추가하면 된다. input::placeholder {color:#ccc;} input::-webkit-input-placeholder {color:#ccc;} input:-ms-input-placeholder {color:#ccc;} textarea::placeholder {color:#ccc;} textarea::-webkit-input-placeholder {color:#ccc;} textarea:-ms-input-placeholder {color:#ccc;}

디자인하면서 간혹 캘리그라피 같은 손글씨 폰트가 필요할 때가 있는데 매번 찾기도 번거로워서 자주 사용하는 폰트들을 한번 정리해보고자한다. 손글씨체도 디자인에 다용도로 활용하기 어려운 애매한 폰트들이 많은데 이 폰트들은 깔끔하고 뭔가 프로페셔널해보이는 손글씨라 다용도로 활용하기 좋다. 더군다나 무료 사용이 가능하다는 점! (다만, 자세한 허용범위는 각 홈페이지를 참고!) 1. 제주한라산 제주특별자치도의 상징성과 문화적 고유성을 살리고, 국제도시로서 디자인적 예술적 품격을 갖춘 문화예술의 이미지를 담은 미래 지향적 서체 ■ 개인/기업/상업적인 용도 사용 가능 ■ 다운로드 : https://jeju.go.kr/jeju/symbol/font/infor.htm 2. 상상토끼 꽃길 사방간데 넘실데는 꽃길처럼 비단색..

버튼이나 다양한 요소를 클릭시에 모달창을 쉽게 뛰울 수 있어 활용도가 높은 부트스트랩 모달창 부트스트랩 공식 홈페이지에 나와 있는대로 부트스트랩 스크립트와 CSS만 로드하면 쉽게 모달창을 띄울 수있다. https://getbootstrap.com/docs/4.0/components/modal/ Modal Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. getbootstrap.com 다만, 사용할 페이지 코드에 따라서 일부 변경이 필요한데 다른 CSS코드와 겹쳐서 종종 모달창이 백그라운드보다 아래쪽에 위치하는 경우가 ..

SVG의 컬러를 변경하는 방법은 매우 간단하다. path 태그에 style="fill:컬러코드;" 를 추가하면 된다.

날짜 선택 시 유용하게 사용 가능한 Jquery플러그인 Datepicker https://jqueryui.com/datepicker/ Datepicker | jQuery UI Datepicker Select a date from a popup or inline calendar The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (b jqueryui.com Datepicker 기본코드 DatePicker 기본 ..

1. audio 태그를 사용하여 배경음악 또는 비디오를 넣는다. 2. 컨트롤 버튼 click me 3. 스크립트 삽입 (2번의 버튼을 클릭하면 재생/일시정지 번갈아 가면서 작동함) var video = document.getElementById("player"); $("#btn_player").click(function(e){ if(video.paused==true){ video.play(); //재생 }else{ video.pause(); //일시정지 } }); video.addEventListener("ended", function(){ //끝났을 때 }); 개별버튼 재생, 일시정지, 음소거 각각 버튼을 넣고 싶을때는 아래 코드를 이용하면 된다. Play Pause Mute/ Unmute

그누보드 SMS 기본 코드 그누보드에서 SMS을 보내기 위해서는 기본적으로 아래 코드를 사용한다. 이 방식은 1개의 번호에서 1개로 보내는 방식이다. include_once(G5_LIB_PATH.'/icode.sms.lib.php'); $sql = " select cf_phone from sms5_config"; $row = sql_fetch($sql); $send_hp_mb = $row['cf_phone']; // 보내는 전화번호 $recv_hp_mb = "01000000000"; // 받는 전화번호 $send_hp = str_replace("-","",$send_hp_mb); // - 제거 $recv_hp = str_replace("-","",$recv_hp_mb); // - 제거 $send_numb..

jquery 로 특정 영역에 값을 보여줄 때, number_format()을 사용하면 자동으로 숫자에 콤마가 찍혀서 보이게 된다. 이때 숫자가 아닐 수도 있으므로 String으로 먼저 감싸준뒤, number_format()를 사용해서 사용하면 된다. var final = Number(price1) + Number(price2) + Number(price3); $('.total').text(number_format(String(final))); // total 클래스를 가진 영역에 결과 값을 보여줌 250,000

SQL 쿼리를 통해 데이터를 가져와서 해당 데이터가 몇번째에 위치해 있는지 구할때 ROWNUM 기능을 활용해 불러올 수 있다. 나의 경우에는 해당 날짜의 주문건을 불러와 주문번호 순서대로 1부터 차례대로 번호를 매기는 작업이 필요하여 아래와 같이 쿼리문을 작성하였다. SELECT @ROWNUM: = @ROWNUM + 1 AS rownum, od_id FROM table as a, ( SELECT @ROWNUM: = 0 ) r WHERE od_invoice_time between '2023-05-31 00:00:00' and '2023-05-31 23:59:59' ORDER BY od_id ASC 그러면 이렇게 조건에 해당하는 데이터들이 순서대로 번호가 매겨지게 된다. 이 중에서도 특정 데이터가 몇번째에 ..

영카트 쇼핑몰은 네이버페이와 연동하는데 아래와 같은 메일을 받았다. 네이버쇼핑 입점이 완료되실 경우 네이버페이 연동 시 주문 등록 과정에서 쿼리 스트링 중 네이버쇼핑 상품ID(EC_MALL_PID) 항목을 전송해주셔야 합니다. 네이버쇼핑에 입점하시어 네이버 쇼핑 검색에 판매 상품을 노출하고 계시는 가맹점은 네이버페이를 연동할 때 관련된 정보(MAPID)를 함께 제공해주셔야 합니다. EC_MALL_PID는 다른 상품 관련 정보들(ITEM_ID, ITEM_COUNT, ITEM_NAME... 등)에 1:1로 대응하여 보내주시면 되며, 해당 항목의 값은 네이버 쇼핑으로 송출중인 상품 ID(MAPID 또는 MALL PID) 값을 입력해주셔야 합니다. 이게 무슨말인가했는데 아래와 같이 간단히 한줄만 추가해주면 된다..

일러스트레이터에서 PDF로 내보내기 하는 경우 이미지가 깨져보이는 경우가 있다. 이 경우 간단하게 설정만 바꾸면 고화질로 내보낼 수 있다. 1) 파일 > 내보내기 > 화면에 맞게 내보내기 클릭 후, 내보낼 대지를 선택한 다음 포맷을 PDF로 한 뒤, 바로 오른쪽 위쪽 톱니바퀴 아이콘을 클릭한다. 2) PDF를 선택 후, Adobe PDF 사전설정을 [고품질 인쇄]로 선택한다. 설정값 저장 후, PDF 내보내기하면 끝! (물론 고품질 인쇄로 하면 PDF 용량이 배가 커지는 단점이 있긴하다.) PDF [고품질 인쇄] 설정 전/후가 이렇게나 화질 차이가 난다. 꼭 [고품질 인쇄]로 설정하고 PDF로 내보내기!!!

쇼핑몰을 제작하다보면 각 택배사별 배송을 조회할 수 있는 링크가 필요해서 정리해보았다. 송장번호라고 적힌 부분에 송장번호(숫자만)입력하면 된다. 생각보다 택배회사가 많아서 계속해서 업데이트될 예정. 국내 택배사 CJ대한통운 https://trace.cjlogistics.com/web/detail.jsp?slipno=송장번호 CJ로지스틱스 http://ex.korex.co.kr:7004/fis20/KIL_HttpCallExpTrackingInbound_Ctr.do?rqs_HAWB_NO=송장번호 우체국택배 https://service.epost.go.kr/trace.RetrieveDomRigiTraceList.comm?displayHeader=N&sid1=송장번호 한진택배 https://www.hanjin...

스티커 메모는 윈도우에서 간단하게 메모를 작성할 수 있어 유용하게 사용하는 프로그램인데 메모를 확인하려면 스티커메모 프로그램을 열어서 확인해야 하는 번거로움이 있다. 컴퓨터를 켜면 윈도우 시작 시 자동으로 스티커 메모를 실행할 수 있는 아주 간단한 방법을 알게 되어 정리해 본다. 1) 내컴퓨터나 아무 폴더창 경로 나오는 부분에 shell:startup을 입력하고 엔터. 그러면 시작프로그램 폴더로 이동하게 된다. 2) 윈도우 버튼을 눌러 '스티커메모' 프로그램을 찾은 뒤, 시작프로그램 폴더로 드래그하여 넣어준다. 아주 간단하게 끝! 3) 컴퓨터를 다시 재부팅해보면 컴퓨터 켤 때 자동으로 스티커메모 프로그램이 실행되는 것을 확인할 수 있다. 다른 프로그램도 윈도우 시작 시 자동으로 실행되게 하고 싶다면 동일..

사용방법이 따로 필요 없을 정도로 간단한 매크로 프로그램이 있어 사용방법을 정리해보려고 한다. UI 자체가 복잡하지 않고 간단하게 매크로 설정이 가능하도록 되어있어 수강신청이나 게임 등 매크로가 필요할 때 편리하게 사용 가능하다. (윈도우에서만 사용 가능) 매크로 프로그램 Key Macro 사용방법 1. 아래 파일을 다운 받아 압축을 푼다. 2. 압축 푼 뒤, 나오는 파일 중에 key_macro.exe 파일을 클릭해서 연다. 3. 실행 중단과 편집을 선택 한 뒤, [추가]를 클릭한다. 4. 키보드 추가/마우스 추가/지연추가/문자열추가/매크로 호출 / 독점영역 추가 / 반복구간 중에서 매크로에 필요한 과정을 클릭하여 하나하나씩 추가해 주면 된다. [키보드추가] 키보드 자판 중 한 키를 누르도록 한다. 추가..