개발자 도담씨

회사에서 만든 페이지의 디자인을 비슷하게 카피한 웹사이트가 나오면서 개발자분이 스크립트를 막아야겠다 하길래 궁금해서 검색해본 코드 :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..

저번에 포스팅 한거같은데..아닌가보다. 못찾겠다😋 요즘 웹사이트를 보면 스크롤에 따라 이벤트로 애니메이션을 준 것을 많이 볼 수있다. 예를 들면 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..

단순 모달창이었다면 포스팅하지 않았겠지만..! 오늘 일을하다가 모달창을 만들었는데 길이 길어서 스크롤이 이중으로 생겨버렸다. 그걸본 사수분이 스크롤 두개는 싫어..! 하시며 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..

프론트작업을 하면서 단순히 디자인을 그대로 옮기는것이 아닌 사용자들의 편의를 생각하는 부분들이 아직 부족한거 같다:_( 처음 웹을 만들때 내가 빠트렸던 사소한 부분들을 정리해 놓을려고한다. +) 나는 의외로 꼼꼼하지 못한거같다..ㅎㅎ 노력해서 점차 나아지는것 같지만... 1. 슬라이드(캐러셀)을 할 때 다음에 컨텐츠가 있다는 것을 나타내기 2. 아이콘이나 이미지등의 깨짐 문제 ( 모바일도 확인해 볼 것 ) 3. 크로스 브라우징 4. 회원가입시 특정 입력값에 조건이 있다면 명시 5. 한페이지에 중복되는 정보가 있는건 자제 ( 촌스러운 요소이다 ) 새로 알아가는 CSS부분들 1. 세로 정렬하는 새로운 방법을 알았다. 부모에 relative가 되어있고, 정렬하고자 하는 태그에 absolute, top:50%,..

2020년에 기존의 인스타그램 API가 중단된다고 하여 새로운(?) 인스타그램 API방법을 사용하기로 했다. 근데 정말이지 답답하다.... 보안상의 이유때문인것 같은데 인증절차가 너무 힘들다..😢 대충 정리해보는 절차는 아래와 같다. 하면서 업데이트할 예정이라 정확하진 못하다. 1. 페이스북 비즈니스 페이지, 인스타그램 비즈니스 계정 필요 ( 방법은 따로 첨부 안함 ) 2. 페이스북과 인스타그램 서로 연결 3. 앱 검수 ( 환장하는 단계 ) 4. 토큰 발급 5. 발급 받은 토큰으로 페이스북 아이디 값 가져오기 6. 페이스북 아이디 값으로 인스타그램 아이디 가져오기 7. 인스타그램 정보 받아오기 인스타그램 정보중 단순히 계정의 정보만 가져온다고 하면 앱 검수는 필요가 없었다. 나는 특정 인스타 계정의 미디..

많은 블로그에 방법이 잘 나와 있지만 또 적어야 기억에 잘 남으니까ㅎㅎ..! 시작해보겠다. 01. FTP Simple 설치하기 02. F1을 눌러 FTP 설정창을 열기 03. 설정하기 보면 알겠지만 그냥 FTP정보를 입력하면 된다.😅 autosave는 파일 저장 시 서버 파일을 자동으로 저장할건지에 대한 여부이며, confirm은 서버 저장 전 저장할 것인지 한번더 물어볼지 대한 여부다. 04. 폴더 열기 F1을 다시 눌러 remote directory open to workspace 클릭 해서 원하는 폴더를 열어 작업하면 된다. 05. 마지막으로 닫기를 원한다면 다시 F1에서 Close all FTP connections를 누르면된다 +) FTP에 접속했더니...폴더..불러오는게 많이 느리다...클릭하..

이 블로그는 내가 공부한것들을 까먹지 않도록 포스팅하는 용도라 간단한 부분들은 슝하고 지나가겠다😅 1. SASS의 변수는 $로 정의한다. 2. 중첩 ( 아래 코드로 설명 끝ㅎㅎ.. ) 아래의 코드처럼 작성후 컴파일 하면 nav{} nav ul{} 처럼 css파일이 작성된다. header { background-color: $header-back; display:block; height:100px; nav { ul { list-style:none; float:right; li{ display: inline-block; a { display: block; padding: 5px 3px; margin:10px 20px; } } } } } 3. 부분화 및 불러오기 설명을 보니 내가 느낀바로는 전역변수를 별도의 ..

설치하기를 쓰고 공부를 시작할려고 하자마자 바로 불편함을 느꼈다ㅋㅋㅋ...내가 설치한건 컴파일러.. css는 저장만 하면 바로 적용된걸 볼 수 있는데.. scss로 할려니 scss파일을 만들고 > 컴파일하고 > css 바꿔주고 이짓을 해야한다고..? 바로 다시 검색하러 갔다ㅋ큐ㅠㅠ 나는 원래 메모장같은 nodepad나 sublime text같은 친구들을 주로 사용했는데, scss를 사용하기 위해 알아보다 visualstudio code라는 친구를 접했다. (비쥬얼스튜디오 오랜만이야... 응용할때만 봤었는데) 1. 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code ..

원래 웹 하나를 혼자 만들겠다는 목표를 가지고 풀스택을 공부하다가. 요즘 프론트앤드에 조금 더 흥미가 가기 시작했다. 물론 저 목표는 유효하나 프론트 앤드쪽을 깊게 파보고 싶은 마음에 알아보다가 SASS는 필수라기에 공부를 시작해본다 :) 인터넷에 충분히 잘 설명되어있지만 이상하게도 나는... 인터넷 강의든 글이든..(물론 개발할땐 참고하지만) 공부가 불가능하니 또 책을 주문했다😂 우선 SASS는 컴파일러 없이 사용할 수 없기때문에 컴파일 과정을 거쳐야한다. SASS의 설치는 간단하다. SASS를 PC에 설치 하는 방법은 '어플리케이션 방식'과 커맨드라인'방식이 있다. 커맨드 라인방식은 직접해보진 않았지만 메모는 해놓겠다. @커맨드 라인 방식 1. 맥과 리눅스를 루비라는 프로그래밍 언어가 설치가 되어 있..

window.onload = function(){ var app = new Vue({ el : "#wrap", data : { "history" : [], "work_idxs" : [], }, computed : { checkAll : { //getter get: function(){ if((this.work_idxs.length != this.history.length) || this.history.length == 0) return false; else return true; }, //setter set: function(e){ if(e){ for(var i=0; i history는 리스트를 가지고 있는 배열이다. ( ajax로 history를 받아오는 부분인데 따로 이부분은 위에 표시 하지 않았다...