(jQuery) 본문 중간에 구글 애드센스 광고를 자동으로 삽입하기

티스토리의 광고 정책 때문에 구글 애드센스 광고 연동, 본문 내 자동 삽입 기능을 껐을 때 사용하는 방법이다. 수동으로 넣는 방법은 광고 스크립트 서식을 사용하여 넣는 것인데, 번거롭고 이미 작성된 글은 수정을 해야 한다. 자동으로 본문 광고 삽입 자동으로 본문에 광고를 삽입해보자. 1. 구글 애드센스에서 광고 단위를 만든다. 광고 형식은 인아티클 광고로 선택한다. 예제 그림과 같이 본문 내에 광고가 삽입된다. 페이지 우측의 저장 및 코드 생성 버튼을 누르고 광고 코드를 복사한다. 2. 스킨 HTML에 코드를 추가한다. 티스토리 스킨 편집에서 HTML 탭로 이동한다. 임의의 위치에 복사한 코드를 붙여넣고 로 감싼다. 고유 요소이므로 id를 설정한다. ... 구글 광고 코드 3. jQuery 스크립트 코드..

PC&웹/웹프로그래밍 2023. 8. 18. 12:59

(jQuery) 티스토리 이전 글에서 문단 공백이 적용되지 않을 때

증상 문단 앞뒤에 공백이 적용되지 않는다. Shift+Enter만 붙어야 하는데, Enter를 아무리 눌러도 줄 바뀜 사이에 공백이 추가되지 않는다. 문단 설정하라는 글은 쉽게 볼 수 있지만, 설마 그걸 안 해본 사람이 있을까? 할 정도로 전혀 도움이 되지 않는다. 글 편집 화면에서 HTML을 보면 와 뿐이다. 도대체 뭐가 문단 공백을 막는 걸까? 🤔 F12 개발자 도구를 사용하여 문단을 찍어보았다. 🔍 그랬더니... 찾았다! 정상으로 문단 공백이 표시되는 글에는 나타나지 않던 CSS 클래스가, 비정상으로 표시되는 글에 나타나 있는 것이다. .tt_article_useless_p_margin 클래스는 서버 측에서 생성하는 것 같다. 이 클래스는 다음 파일에 정의되어 있다. uselessPMargin.cs..

PC&웹/웹프로그래밍 2023. 8. 17. 17:53

(jQuery) 블로그 자동 목차 삽입

이전에 작성된 글까지 목차 기능을 적용하려면 자동 삽입 스크립트를 사용하는 것이 편리하다. 자동 삽입 조건 수동 목차 요소가 없을 것 H2, H3 제목이 1 개 이상 있을 것 중복 삽입 되지 않을 것 추가 기능 제목을 누르면 목차로 이동 설치하기 위 js 파일을 내려받은 후, 티스토리 관리자 페이지에서 스킨 편집 메뉴로 이동한다. 원본 소스를 변경 하지 않는한, 압축버전인 .min.js 파일만 있으면 된다. 스킨 편집 메뉴 클릭 html 편집 버튼 클릭 파일 업로드 탭으로 이동 후, 페이지 아래의 +추가 버튼을 눌러서 jquery.toc.min.js 파일을 업로드한다. 예제 코드 HTML ... 내용 아래에 추가 본문에 id="toc" 개체가 없고, H2, H3 요소가 1개 이상 있으면 목차 코드를 삽입..

PC&웹/웹프로그래밍 2023. 8. 17. 11:30

(JavaScript) 개발자 도구 실행 감지하기

보안이 필요한 사이트에 적용중인 기능입니다. 단축키 F12 키를 누르면 개발자 도구가 실행되는데, 사이트의 코드뿐만 아니라 네트워크 접속 과정까지 볼 수 있습니다. 개발자 도구가 실행됐는지 확인하려면 자바스크립트의 디버그 중단점 코드를 사용하면 됩니다. 디버그 중단점 코드 debugger; 개발자 도구가 실행된 상태에서는 위 코드가 있는 줄에서 자바스크립트가 일시정지 됩니다. 그 다음 개발자 도구를 닫거나 개발자 도구에서 실행 버튼을 누르면 나머지 자바스크립트가 실행되는데, 이때 중단점 이전과 이후의 시간차를 비교해서 개발자 도구가 실행됐는지를 확인하면 됩니다. 응용 코드 !function() { function detectDevTool(allow) { if(isNaN(+allow)) allow = 10..

PC&웹/웹프로그래밍 2023. 8. 15. 21:16

Visual Studio Code for PHP 개발 환경 설정 과정

2021.05 기준 설치 버전 VS CODE 버전: 1.56.2 Bitnami 버전: 8.0.6 Xdebug 버전: 3.0.4 편리한 IntelliSense, Rename Symbol 등의 기능을 이용하기 위해 오~래 사용하던 메모장, Edit+를 버리고 이제서야 Microsoft VS Code로 갈아타봅니다. VS CODE 설치 Download Visual Studio Code - Mac, Linux, Windows Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual ..

PC&웹/웹프로그래밍 2021. 5. 28. 23:26

PHP 디버깅용 Xdebug 모듈 사용 후

var_dump()를 사용하면 좀 더 자세한 정보가 표시된다. 줄바꿈도 자동으로 된다. 필요 없음 PHP 에러가 발생했을 때는 에러 내용이 색상과 표로 출력되어 매우 쉽게 파악할 수 있다. Xdebug 사이트https://xdebug.org/

PC&웹/웹프로그래밍 2017. 3. 11. 13:07

휴대폰 위치 추적 및 정보 표시 기능을 만들다.

개요 휴대폰에서 이벤트 발생시 현재 위치와 각종 정보를 웹 DB에 저장하고, 저장된 데이터를 브라우저로 조회하여 구글 지도에 표시하는 기능. 동작 설명 1. 휴대폰에서 이벤트(충전 상태, 위치 변동 등) 발생시 각종 데이터를 HTTP로 전송한다. 2. 데이터 저장용 PHP 파일은 데이터베이스에 내용을 기록한다. 3. 데이터 조회용 PHP 파일에서 구글 지도 API를 연결 후 저장된 위치를 마커로 표시한다. 웹사이트 표시 화면 중... 위치를 누르면 지도에 표시 내용 표시, 누적된 경로의 이동 방향 표시

PC&웹/웹프로그래밍 2015. 11. 15. 00:00

phpMyAdmin 설정 영구 저장

phpmyadmin\examples 폴더에서 create_tables.sql 임포트 phpmyadmin폴더에서 config.sample.inc.php 파일 복사 후 phpmyadmin 폴더에 config.inc.php 이름으로 붙여넣기 아래 항목에 값 입력 및 주석 제거 $cfg['blowfish_secret'] = '아무거나'; $cfg['Servers'][$i]['controluser'] = 'root'; $cfg['Servers'][$i]['controlpass'] = '암호'; $cfg['Servers'][$i]['pmadb'] = 'phpmyadmin'; $cfg['Servers'][$i]['bookmarktable'] = 'pma_bookmark'; $cfg['Servers'][$i]['rel..

PC&웹/웹프로그래밍 2013. 12. 4. 11:29

(jQGrid) JSON으로 SQL 검색 기능 사용 법

jQGrid 예제를 보면 적은 데이터를 미리 로딩하여 출력하는데 아래 방법을 사용하면 데이터가 많아도 SQL 쿼리로 검색 데이터를 가져올 수 있습니다. 아래는 조건 검색만 하는 법을 설명합니다. 설정 javascript에서 설정할 것 loadonce:false 또는 삭제(기본값 false) rowTotal 삭제 loadonce:true를 하게 되면 로딩된 데이터에서만 검색을 하게 됩니다. PHP에서 설정할 것 $filterResultsJSON = json_decode($_REQUEST['filters']); $filterArray = get_object_vars($filterResultsJSON); $ops = array( 'eq'=>' = ', //equal 'ne'=>' ',//not equal 'l..

PC&웹/웹프로그래밍 2013. 5. 25. 21:10

MES 시스템 - 데이터 수집 분석 통계 웹프로그램

이번에 개발 중인 시스템입니다. 생산공장에서 사용합니다. 생산 제품의 검사 정보를 수집, 통계, 분석하는 웹 프로그램입니다. 개발시작: 2013년 05월 서버 개발언어: PHP, Javascript 서버 개발프레임웍: XE, jQuery(jQGrid, jQPlot) - opensource 서버 데이터베이스: MySQL 클라이언트 개발언어: Visual Basic 6 시스템 구성 1. 클라이언트PC에서 바코드 스캔 및 제품 검사 2. 서버 Database로 데이터 전송 3. 서버에서 데이터 조회 공정별 검사 시스템의 측정 결과를 Database 서버로 전송 하면 Database 서버에서 측정 결과를 볼 수 있습니다. 그림 설명은 아래 사이트를 참고하세요. http://simulz.kr/xe/board_ph..

PC&웹/웹프로그래밍 2013. 5. 25. 13:06

(jQuery) QR 바코드 생성기

사이트 링크 http://simulz.kr/dev/barcode/ 구글 API 사용...

PC&웹/웹프로그래밍 2013. 3. 20. 06:28

(jQueryMobile) 모바일용 디자인

jQuery의 Mobile을 사용하면 스마트폰용으로 디자인을 할 수 있다. IE9에서는 이미지가 깔끔하게 나오지 않고 효과도 볼 수 없다. 구글 크롬에서 완벽하게 테스트 해볼 수 있다. 아래 페이지는 BOINCSTATS 통계 보기를 모바일용으로 꾸민것이다. http://simulz.kr/dev/boinc/create_user_img_mobile.php Input의 type값을 search로 설정하면 아래처럼 내용 삭제 버튼이 추가 된다. Select에 data-native-menu="false" 속성을 추가하면 아래처럼 바꿀 수 있다.

PC&웹/웹프로그래밍 2011. 7. 30. 13:17

(jQuery) 7세그먼트, FND 포트 계산기

jQuery를 사용하여 FND 계산기를 만들었다. 미리보기 http://simulz.kr/dev/elec/7seg/ 기능 100% 버튼위에서 마우스 휠을 돌리면 확대·축소, 누르면 원래대로 FND 색상 설정 FND 추가·삭제 UI 테마 변경 추가할 기능 포트 순서 변경 결과 값 저장 등등등

PC&웹/웹프로그래밍 2010. 3. 29. 00:37

(PHP) PNG 알파 적용

바탕 그림에 알파 적용된 색을 씌우기 $base = imagecreatetruecolor($width, $height); imagealphablending($base, 1); imagesavealpha($base, 1); $hex_alpha = dechex($alpha); $dec_alphacolor = hexdec($hex_alpha.$alpha_color); imagefilledrectangle($base, 0, 0, $width, $height, $dec_alphacolor); $alpha는 0~127 또는 128~255 $alpha_color는 16진수 6자리 색상코드 000000~FFFFFF 포토샵 레이어에 색을 채우고 투명도 설정을 하는 것과 같다. 외부 이미지를 알파 적용하여 붙이기$thum..

PC&웹/웹프로그래밍 2010. 2. 23. 15:45

Blackbird, 자바스크립트 디버깅

http://www.gscottolson.com/blackbirdjs/ 적용하기 위 사이트에서 Download the files 파일을 내려받고 사이트나 블로그에 업로드 합니다. 아래처럼 두 줄을 삽입하고 경로를 업로드한 곳으로 변경합니다. 미리보기 ※ 먼저 F2 키를 눌러서 디버그 화면을 띄우세요. 이 블로그에 적용되어 있습니다. 아래 처럼 필요한 스크립트 코드를 추가하면 됩니다. 미리보려면 눌러보세요. log.debug( '디버그 메시지' ); log.info( '정보 메시지' ); log.warn( '경고 메시지' ); log.error( '오류 메시지' ); 특정 구간의 처리 시간을 측정하려면 아래처럼 시작 부분과 끝 부분에 스크립트 코드를 추가하면 됩니다. 같은 label 구간을 측정합니다. l..

PC&웹/웹프로그래밍 2010. 2. 9. 22:17

(jQuery) 이미지 카운터 실시간 갱신하기

준비물: (jQuery) 연결하기 블로그 이미지 그래프 카운터를 자동 새로고침 해보기. 아래 자바스크립트코드를 SCRIPT에 삽입하거나 JS 파일로 저장하여 연결한다. $(document).ready(function($){ var refresh_StatGraph = function() { var time = new Date().getTime(); var StatGraph = $("img[src*=StatGraph]"); //StatGraph.fadeOut('slow'); StatGraph.attr('src','/plugins/StatGraph/count/count.php?owner=개인번호&time='+time); //StatGraph.fadeIn('slow'); } self.setInterval(ref..

PC&웹/웹프로그래밍 2010. 2. 9. 14:14

69 PC&웹/웹프로그래밍