홈페이지에 팝업을 표시하려는 경우 CSS나 자바스크립트/jQuery를 이용한 다양한 팝업 플러그인을 구글에서 검색할 수 있습니다. 간단한 모달 팝업의 경우 다음 W3Schoools 문서에서 제시하는 방법을 이용할 수 있습니다. How To Create a Modal Box (모달 박스 만드는 방법) 제시된 코드를 사용하면 다음과 같은 모달 팝업을 띄울 수 있습니다. CSS로만 팝업을 띄우고 싶다면 다음 글을 참고해보시기 바랍니다. [CSS] 텍스트를 클릭하면 div가 팝업으로 표시되도록 하는 방법 이외에 구글을 검색해보면 다양한 무료 팝업 플러그인을 찾을 수 있습니다. 무료 팝업으로 디자인적인 측면이나 기능적인 측면의 완성도를 높이는 데 어려움을 겪는 경우 Codecanyon에서 판매하는 플러그인을 활용..

웹페이지 내의 특정 div 내의 콘텐츠만을 인쇄하고 싶은 경우가 있습니다. 그런 경우 stackoverflow에 나와 있는 코드를 참고할 수 있습니다. 예시) HTML This is a sample text for printing purpose. Do not print. JavaScriptfunction printDiv() { var divToPrint=document.getElementById('DivIdToPrint'); var newWin=window.open('','Print-Window'); newWin.document.open(); newWin.document.write(''+divToPrint.innerHTML+''); newWin.document.close(); setTimeout(func..

워드프레스 테마 중에서 뉴스페이퍼(Newspaper)가 애드센스 수익면에서 유리하다는 말을 듣고 지난 4월에 제 메인 블로그의 테마를 Newspaper로 바꾸었습니다. 워드프레스 뉴스 매거진 테마 Newspaper로 홈페이지 리뉴얼 테마 변경 후에 약간 수익이 상승하기는 했지만 기대만큼은 아니었습니다. 그러다가 지난 6월 1월에 Newspaper가 큰 폭으로 업데이트된 후에 사이트의 애드센스 광고 수익이 유의미하게 증가했습니다. 우연의 일치일 수도 있지만, 테마 업데이트가 수익에 긍정적인 영향을 미친 것으로 추정됩니다. 오늘 새벽에 살펴보니 지난 달 동일 날짜와 비교하여 이번 달 현재까지 67% 수익이 증가한 것으로 표시되네요. 광고는 PC 기준으로 글 제목 아래에 1개, 사이드바에 1개, 그리고 글 하..

화면 캡처 프로그램 Snagit과 동영상 캡처/편집 프로그램 Camtasia 세일 화면 캡처 프로그램인 Snagit과 동영상 캡처 및 편집 프로그램인 Camtasia가 6월 21일(우리나라 시각으로 6월 22일 오후가 될 것 같음)까지 여름 할인 행사를 진행하고 있습니다. TechSmith 제품은 좀처럼 할인을 하지 않는 것 같습니다. 할인폭이 15%로 조금 아쉽지만 Snagit이나 Camtasia를 염두에 두고 계셨다면 비용을 약간 아낄 수 있는 기회입니다. 저는 Snagit을 몇 년째 사용하고 있습니다. 무료 화면 캡처 프로그램도 있지만 Snagit에 익숙해져서 이 프로그램만 사용하게 되네요. Snagit을 사용하면 캡처한 이미지를 곧바로 간단하게 편집할 수 있고, 쉽게 공유도 가능합니다. 캡처한 미..

최근 들어 워드프레스와 같은 CMS로 사이트를 많이 제작하지만, 한 번 제작한 후에 새로 콘텐츠를 지속적으로 발행할 일이 없다면 HTML 템플릿을 사용하여 사이트를 만들 수 있습니다. 워드프레스는 인기 테마의 경우 50~60달러 내외이지만 HTML 사이트 템플릿은 10~30달러 사이로 저렴한 편입니다. Canvas는 Themeforest에서 가장 많이 판매되고 있는 다목적 HTML5 템플릿으로 현재까지 43,000개 이상이 판매되었습니다. 오래 전에 HTML을 잘 모르는 상태에서 마음에 드는 HTML 템플릿을 구입하여 이미지와 텍스트를 바꾸어 개인 프로필 사이트를 만든 적이 있습니다. 서너 페이지로 구성된 개인 소개 사이트나 포트폴리오 사이트를 만들려는 경우에 이런 HTML 템플릿을 활용해볼 수 있을 것..

인터넷을 돌아다니다 보면 위의 그림과 같이 메뉴를 클릭했을 때 특수한 형식으로 표시되는 메뉴를 만나곤 합니다. 이런 형식의 메뉴를 메가 메뉴(Mega Menu)라고 합니다. 워드프레스의 경우 아바다, 뉴스페이퍼 같은 일부 테마에서 메가 메뉴 기능을 제공하고 있습니다. 워드프레스 아바다 테마에서 메가 메뉴 사용하기 Elegant Themes의 Divi에서 메가 메뉴 만들기 HTML에서 메가 메뉴를 구현하고 싶은 경우 다음 W3Schools 자료를 참고할 수 있습니다. How TO - Mega Menu (메가 메뉴를 만드는 방법) 반응형까지 고려하여 제대로 만들려면 제법 시간이 걸릴 것 같습니다. 직접 만들기에는 시간이 너무 소요되고 결과물도 시원찮은 경우 코드캐년 마켓에서 판매하는 스크립트를 활용해볼 수 ..

사이트에 팝업을 띄우고 싶은 경우 인터넷을 검색하여 무료 스크립트를 활용할 수 있습니다. 사용자로부터 이메일 주소를 받거나 공지를 띄우고 싶거나 배너를 표시하고 싶은 경우 Codecanyon 마켓에서 판매하는 Layered Popups 같은 PHP 스크립트를 이용해볼 수 있습니다. 다양한 형태의 팝업을 만들 수 있습니다. 다음은 이 스크립트에 대한 소개 글입니다. 인터넷에는 지루한 팝업이 넘쳐나고 있습니다. 이제 이런 트렌드를 탈피할 때입니다. 그래서 우리는 Layered Popups를 만들었습니다. 이 스크립트로 여러분의 상상력을 현실화할 수 있고 독특한(고유한) 멀티레이어 팝업 창을 만들 수 있습니다. 원하는 콘텐츠로 다중 레이어를 생성하고 각 레이어에 대하여 맞춤형 전환(transition)/애니메..

이 블로그에는 최근 티스토리에서 공개한 Magazine 스킨이 적용되어 있습니다. 저는 이전 스킨의 레이아웃과 비슷하게 수정하여 사용하고 있습니다. 매거진 스킨을 적용한 상태에서 개별 포스트에서 마우스를 아래로 스크롤하면 헤더에 글 제목이 표시됩니다. 스크롤 시 포스트 타이틀이 헤더에 표시되지 않도록 하려면 스킨 파일 하나를 수정하면 됩니다. 저는 front.js 파일을 다운로드한 후에 아래 그림에 표시된 부분을 삭제했습니다. 이런 부분이 두 군데 있습니다. 표시된 부분을 삭제한 후에 업로드하여 기존 파일을 대체했습니다. 티스토리에서 스킨을 수정하려면, 잘 아시겠지만, 티스토리 관리자 페이지에서 꾸미기 > 스킨 편집을 클릭하고 "HTML"을 클릭하여 HTML 파일과 CSS 파일을 수정하거나 파일을 삭제/..

브레드크럼(Breadcrubmb; 이동 경로)을 추가하면 SEO(검색엔진 최적화)에 도움이 될 수 있습니다. 그리고 구글 서치 콘솔에서 'itemListElement' 입력란이 누락되었습니다 오류가 발생하는 경우에도 브레드크럼을 적용하면 오류가 해결될 수 있습니다. 브레드크럼과 SEO 지난 달에 이 티스토리 블로그의 스킨을 Magazine (매거진)으로 변경했습니다. 티스토리의 신규 스킨 Magazine으로 변경해보았습니다 ※자동으로 브레드크럼을 추가하는 방법은 티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법을 참고해보세요. 스킨을 바꾸면서 개별 글에 그림과 같이 브레드크럼(이동 경로)을 추가했습니다. 구글 검색에서 아래 그림과 같이 이동 경로가 표시됩니다. 구글 서치콘솔에서 브레드크럼 관련 오..

티스토리에서는 로그인한 상태에서 다른 티스토리 블로그에 쉽게 댓글을 달 수 있습니다. 티스토리에 로그인하면 이름, 비밀번호 등을 입력할 필요가 없습니다. 티스토리에서 로그인 상태가 유지되 않아 티스토리 계정으로 댓글을 달 수 없는 경우 하지만 티스토리에 로그인한 상태에서도 일부 티스토리 블로그의 댓글에서 로그인 상태가 유지되지 않아서 이름과 비밀번호 등을 입력해야 하거나 로그인 사용자만 댓글을 달 수 있는 티스토리 블로그에 댓글을 달 수 없는 경우가 있습니다. 이런 문제가 발생하면 브라우저를 바꾸어서 테스트해보면 로그인이 풀리는 문제가 해결될 수 있습니다. 저는 IE에서 주로 이런 문제를 경험하고 있습니다. 구글 크롬에서 로그인하면 이런 문제가 나타나지 않았습니다. '이 블로그는 로그인한 사용자에게만 댓..