마룬마로

(수정)리소스 파일을 올리는 대신 다른 방식이 있을 것 같아 찾아보니 CDN 방식으로 Syntax highlighter를 보여주는 플러그인이 있어 이걸 사용하려고 한다.마침 설치 방법을 참고한 블로그에 sublime에서도 사용중인 monokai theme가 적용되어있어 더 쉽게 설치할 수 있었다. (190911 추가)이 포스트가 제 블로그에서 꽤 많은 유입을 발생시키고 있는 포스트다보니 설명이 불친절할까봐 3번 항목을 추가했습니다.설치하시다 막히는 부분이 있으시거든 댓글로 언제든 질문해주세요! :D 1. script 추가하기블로그 스킨 편집 화면에서 영역 안에 구문을 추가한다. 2. 1번에 추가한 줄 바로 아래에 다음 코드블록 내 내용을 붙여넣는다.이 코드의 출처는 키네시스님의 블로그이다. 복붙한 코드는..

신규 페이지 코드를 짰는데, 모바일 기기에서 전화번호를 누르면 전화 어플로 연결되는 기능을 넣었다.그런데 아이폰에 깔린 카카오톡 내장 브라우저에서 전화번호를 누르면 그게 꼭 두번 이상 인식이 되고, 아이폰은 안드로이드처럼 전화 어플로 바로 넘어가는것이 아니라 알럿창이 뜬다.사파리에서는 이상이 없는걸 보니..... 아 카카오톡이 또.......해결책을 찾다가 이 코드를 발견했는데, 결론부터 말하자면 해결책은 아직 못찾았다.그래도 혹시 나중에 필요할 경우를 대비해 넣어둔다. 1. count 변수에 클릭된 숫자를 넣어 return 시키는 방법click(출처 : Disable a hyperlink after click? 그리고 링크 연속 클릭 방지) 2. 링크 자체를 없애버리기전송 (출처 : 마우스 더블클릭 방..

1. Preferences > Key Bindings - User 에 다음을 추가{ "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [ { "operand": "source.js", "operator": "equal", "match_all": true, "key": "selector" }, { "match_all": true, "key": "selection_empty" }, { "operator": "equal", "operand": false, "match_all": true, "key": "has_next_field" }, { "operand": false, "operator": "equal", "match_all": tru..

Sublime text3에서 터미널창 어떻게 쓰나 찾으려고 오전시간을 다 보냈다.VScode는 예쁘긴 한데 원래 쓰던게 아니다보니, 최소한 서브라임에서 터미널이랑 콘솔을 어떻게 여는지까지는 알아야겠더라. 콘솔창 띄우기1. Tools > Build System > New Build System… 메뉴 이동2. 아래 코드 붙여넣고 "JavaScript.sublime-build" 이름으로 서브라임 텍스트 세팅 폴더에 저장하기(윈도우){ "cmd": ["C:/Program Files/nodejs/node.exe", "$file"], "selector": "source.js" }(맥){ "cmd": ["/usr/local/bin/node", "$file"], "selector": "source.js" }* 노드 ..

현재 관리중인 홈페이지에서 메인/서브별로 다른 SNS 공유 이미지를 추가하길 원했다.방법을 좀 찾아봤는데 이런 요건은 흔한것이 아닌가보다. 찾아봐도 명확한 답변은 없었지만 이것저것 조합해보니 아래와 같은 조건이 성립해야 했다. 전제조건1. 메인/서브별 og:image가 달라야 함 (당연!!)2. 각 페이지별 og:url이 달라야 함 보통 페이지의 메타정보를 보면 2번 항목은 그냥 홈페이지 메인 URL이 들어있는 경우가 대부분이었다.현행 홈페이지에서는 메인, 서브 별 1개씩의 마스터 파일을 가지고 있고 이걸 인크루드 하는 방식이었다. 적용하기 - 메인메인 마스터 파일에는 og:image 링크를 바꿔주니 바로 적용이 됐다. 적용하기 - 서브서브 마스터 파일에도 og:image를 변경해주었으나 적용이 되지 않..

내가 필요해서 모아놓는 각종 SNS 오픈그래프(주로 og:image) 캐시 삭제 링크 모음 페이스북https://developers.facebook.com/tools/debug/og/object/항목별로 친절히 표를 그려서 보여주고, 심지어 수정 필요한 사항이 있다면 그것까지 말해준다. 카카오톡&카카오스토리https://developers.kakao.com/docs/cacheURL 입력하고 삭제하면 끝 트위터https://cards-dev.twitter.com/validator트윗 프리뷰만 보여주는 것 같지만 캐시 클렌징도 함께 해준다고. 네이버 밴드https://developers.band.us/developers/ko/docs/share/debugger위 링크로 바로 접속하면 안되고 네이버 개발자센터..

앞서 회사 홈페이지의 정책이 적응형으로 결정이 난 것 같아 적응형에 대한 고찰을 해보고 아래 포스팅 두 개를 남겼다. 2018/09/26 - [본업은 퍼블리셔] - 적응형 웹은 반응형 웹의 반대말일까? 2018/09/28 - [마케터가 되어간다] - 서브 도메인을 쓰게 되면 구글 애널리틱스는 어떻게 해야할까? 이 글 역시 적응형 홈페이지 구축과 관련된 글인데 여기서는 SEO를 어떻게 적용할지에 대해 정리해보려고 한다. 1. html 파일 내에서 설정하기데스크톱 페이지에서 아래 설정을 추가하고 모바일 페이지에는 아래 설정을 추가한다. 페이지의 수량이 10개 내외이고 다 static type이면 1번 방법을 적용해도 괜찮겠지만 보통 회사 홈페이지는 그럴 리가 잘 없다. 그래서 사이트맵에서 설정하는 방법도 있..

슬프게도 현재 재직중인 회사에서 홈페이지 개발 정책을 적응형으로 선택하고야 말았다.PC/모바일 분리해서 보여줄 데이터가 많고, 취급하는 상품이 다양하고 많은 경우 보통 적응형을 선택한다고 하는데 취급하는 건 딱 하나 미술품이고 그마저도 레이아웃 다 동일한데 왜 적응형인지 정말 알다가도 모르겠지만 대표가 까라면 까야지... 지금 회사 홈페이지의 정책은 반응형인데, 적응형으로 바뀌게 되면 당장 GA 코드를 어떻게 적용해야 하며 지금까지 쌓아온 데이터는 어떻게 처리하는지에 대한 케이스, 그리고 두 개 URL에 대해 동일한 GA 코드를 적용하는 케이스에 대해서도 찾아봐야겠는데 이건 이 다음에 별도로 포스팅을 하겠다. 우선 이 포스팅에서는 적응형 웹과 반응형 웹에 대한 개념을 정리해보기로 한다. 반응형 웹을 re..

가끔 특정 시간에 링크의 주소값을 변경해줘야 하는데, 그 시간까지 컴퓨터 앞을 지키고 싶지 않을 때가 있을텐데오늘의 내가 딱 그래서... 스크립트를 만들어봤다. $(document).ready(function(){function timeInfo() {var time = new Date();var date = time.getDate();var hour = time.getHours();var minute = time.getMinutes();var temp = date;temp += hour + ((minute = '1919:00' ) {console.log('aaa'); //테스트용$('.btn_img_..