Hello,

kok nae-ga ha-myun an-dweneun MAGIC...🧚

~ 2024.08 143

~ 2024.08
[ jQuery ] 컬러피커 플러그인 minicolors

jQuery에 컬러피커를 지원해주는게 있어 포스팅해본다. 깃허브 - https://github.com/claviska/jquery-minicolors 참고 - https://labs.abeautifulsite.net/jquery-minicolors/#instantiation 깃허브에서 zip파일을 받아 압축을 풀어 여느 플러그인처럼 자바스크립트 min파일과 스타일시트 min을 넣어줬더니... 이렇게 나온다... 컬러피커의 색상이 제대로 표시되지 않는다 ㅠㅠ... 아니 다들 스크립트랑 스타일시트만 넣어주더만 왜 나한테만 이러는거야? 했더니 안되는데엔 다 이유가 있는 것이여라^-^;; 콘솔 에러와 폴더를 다시보니 이미지 하나를 못 불러오는 듯 했다. 폴더에 보면 jquery.minicolors.png 라는 ..

2020.02.13 ﹒ 14:40
~ 2024.08
인스타그램 그래프 api 검수 완료😭

혹시 몰라 검수통과했던 설명을 첨부해놓겠습니다. Facebook 검수자가 회원님이 Facebook 플랫폼 정책에 따라 권한 또는 기능을 사용하고 있는지 확인하기 위해 회원님의 앱에 액세스하거나 로그인할 수 있나요? 1. "사이트URL" 으로 이동 2. 페이스북 로그인 버튼 클릭 3. 권한 요청 ( public_profile,email,manage_pages,instagram_basic ) 4. 로그인한 사용자의 페이스북 앱 ID 및 연결된 비즈니스 인스타그램 미디어 불러오기 5. 화면에 가져온 미디어 표시 instagram_basic **페이스북 로그인 및 인스타그램 미디어 받아오는 방법 1. 사이트URL" 으로 이동 2. 페이스북 로그인 버튼 클릭 3. 권한 요청 ( public_profile,emai..

2020.02.07 ﹒ 11:15
~ 2024.08
[html2canvas] 웹 화면을 이미지로 저장하는 방법 ( 캔버스 )

회사 업무를 하다가 신기한 기능하나를 구현해서 기록하려한다. "웹페이지를 이미지화 시켜 저장하는 방법"이다. 백단으로 넘어가지 않고 라이브러리를 사용해 스크립트만 사용하여 페이지의 일부분을 저장하는 것이다. 해당 기능을 도와준 친구들은 html2canvas라는 친구다 :D https://html2canvas.hertzen.com/ html2canvas - Screenshots with JavaScript Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture html2canvas.hertzen.com 자바스크립트 코드만 간단히 들고 왔다. download버튼을 클릭시 section을 모..

2020.02.05 ﹒ 13:01
~ 2024.08
[ CSS ] 수직정렬 방법! 멤오 멤오

수직 정렬 방법에 대한 메모용 포스팅 :) 다국어 페이지를 하다보니 한국어는 짧다가도 외국어가 너무 길어 짜증나는 일들이 빈번히 생긴다...(수직정렬해줘야해..) 옆의 같은 프론트엔드 개발자분도 저의 빡침이 느껴지시나며ㅋㅋ... 쨌든 수직정렬방법 정리는 아래의 3가지로 정리해놓겠다🥰 1. position과 transfrom사용 top을 50%로 주어 부모의 높이의 반만큼 내린 후에, translate을 사용하여 해당 요소의 반의 높이를 빼주어 수직 정렬한 방법입니다. 해당 방법의 단점을 하나의 예로 들자면, li태그안에 a태그를 넣었을 경우 a태그가 li태그의 전체 영역을 자치하게 하고싶은데 불가능 하다는 것입니다. ( 따라서 nav할때는 개인적으로 잘 사용하지 않는 방법 ) 수직 정렬:D 2. flex..

2020.01.27 ﹒ 18:39
~ 2024.08
[ Node.js ] Node.js 친구 소개 시간 :)

프론트엔드라면 공부해야할...! Node.js와 react.js를 올해 공부하려구 한다. 아마 회사에서 사용할 것 같지는 않아서 따로 프로젝트까지 하나 하는걸로 :D Node.js에 들어가기 앞서 이 친구가 뭔가에 대해 적어보려한다. 머리가 나쁜 나는 이친구가 뭔지에 대해 알기 위해 여러 node에 대한 글을 여러개 읽었다 🤨 여러개를 종합한 Node라는 친구는 자바스크립트 기반의 언어이며, 브라우저에서만 돌아가는 js를 서버처럼 사용할수 있도록 Chrome V8 엔진을 이용해 확장 시켰다고 한다. 크롬 엔진을 이용했다고 하길래 그럼 IE에서는 돌아가지 않겠네?! 하며 봤더니 일부 코드 수정을 하면 되는 것 같다. ( 추후에 Node.js를 IE에 사용하는 방법 참고 - https://jsdev.kr/t..

2020.01.23 ﹒ 18:07
~ 2024.08
[개발 일지] 했던일 하고있는 일 정리

카페24 모바일 쇼핑몰 제작 인스타그램 그래프 API 연동 ( 완료 : 검수 난이도 실화..ㅠ ) 메일발송 관련 관리자 페이지 - 프론트엔트 웹사이트 관리자 페이지 리뉴얼 - 프론트엔드 웹사이트 병원소개 페이지의 관리자 페이지 제작 - 풀스택 웹사이트 관리자 페이지 유지보수 예약통계, 상담통계 내기 ( 그래프 관련 자바스크립트 사용 ) - 풀스택 베트남 웹 사이트 및 관리자페이지 제작 - 프론트엔드 ( 기존의 사이트 복사후 변형 ), 다국어 지원 슬라이드 팝업 ( 관리자/사용자 ) 추가 선택된 이벤트 리스트를 불러와 캔버스 저장 ( 페이지 추가, 그룹 추가 예외처리 스크립트의 난이도가 어려웠음 ) 캔버스 url생성후 백단에서 zip파일 생성및 다운 병원고객관리 페이지 유지보수 및 추가 개발

2020.01.14 ﹒ 17:25
~ 2024.08
티스토리 스킨 꾸미기

요즘 시간이 남아 드디어 블로그나 꾸며볼까 하면서 조금씩 수정 중이다. 디자이너가 아니라 디자인 감각은 떨어질 수 있겠지만 나름 만족 중이다!😊 (아직 미완성) 음... 프런트엔드 쪽을 하다 보니 나의 경우는 쉽게 만질 수 있지만 분명 이런 쪽을 하지 않으시는 분들이라면 어려우실 거라 생각한다 :_(... 조금이나마 도움이 되었으면 하면서 그냥 간단한 방법 정도 설명하려 한다. ps. 해당 글을 바꾸고자 하는 친구를 쉽게 찾는 방법 위주로 포스팅할 예정이다 :D 우선 가장 마음에 드는 스킨을 적용시켜놓은 후 찾는 게 편하다. 초보자 분들은 마음대로 디자인하기 쉽지 않을 테니 아래 링크에서 스킨 하나를 적용시켜준다. 디자인이 다들 반응형에 적합하게 잘 만든 것 같다 https://www.tistory.co..

2019.12.31 ﹒ 11:53
~ 2024.08
개발자 도구 및 우클릭 막기

회사에서 만든 페이지의 디자인을 비슷하게 카피한 웹사이트가 나오면서 개발자분이 스크립트를 막아야겠다 하길래 궁금해서 검색해본 코드 :D 나중에 슬쩍 어떻게 한건지 물어봐야겠다. 우선 검색해서 찾아 놓은 코드이다. //개발자 도구 막기 $(document).ready(function(){ $(document).bind('keydown',function(e){ if ( e.keyCode == 123 /* 키코드 123 = F12 */) { e.preventDefault(); e.returnValue = false; } }); }); //우클릭 막기 document.onmousedown=disableclick; function disableclick(event){ if (event.button==2) { re..

2019.12.30 ﹒ 19:00
~ 2024.08
스크롤 반응 박스

저번에 포스팅 한거같은데..아닌가보다. 못찾겠다😋 요즘 웹사이트를 보면 스크롤에 따라 이벤트로 애니메이션을 준 것을 많이 볼 수있다. 예를 들면 LG그룹 홈페이지나, 스타벅스만 봐도 알 수 있다. 아래는 자바스크립트 코드다 :D /*스크롤에 반응하는 박스*/ $("#page .page_event_box").each(function(){ var box_offset=$(this).offset(); var box_top=box_offset.top; //if(window_scroll_top+window_height-50>box_top){$(this).addClass("active");} if(window_scroll_top=box_top){$(this).addClass("active");} //else $(th..

2019.12.27 ﹒ 12:33
~ 2024.08
모달창 만들기 :P

단순 모달창이었다면 포스팅하지 않았겠지만..! 오늘 일을하다가 모달창을 만들었는데 길이 길어서 스크롤이 이중으로 생겨버렸다. 그걸본 사수분이 스크롤 두개는 싫어..! 하시며 fixed시키면 돼요~ 하셨는데 무슨 말인지 못알아 먹어서 하는 포스팅이다. 한마디로 모달창에 스크롤이 생길때 뒤에 있는 친구까지 스크롤이 되는 현상을 막는 방법이다. 정말 간단하지만 생각치 못한거였으므로 살포시 포스팅한다 :D HTML What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1..

2019.12.20 ﹒ 18:55