최근 들어 워드프레스와 같은 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에서 주로 이런 문제를 경험하고 있습니다. 구글 크롬에서 로그인하면 이런 문제가 나타나지 않았습니다. '이 블로그는 로그인한 사용자에게만 댓..

페이지가 로드될 때 텍스트 입력란에 마우스 커서가 위치시키고 싶을 때가 있습니다. 자바스크립트를 사용하여 페이지 로드 시 마우스 커서를 텍스트 입력란(input box)에 위치시키기 예를 들어, 페이지 로드 시 마우스 커서가 검색 필드에 위치하게 되면 사용자들이 곧바로 텍스트를 입력하여 검색할 수 있어 사용자 경험(UX)를 향상시킬 수 있을 것입니다. 이 경우 여러 가지 방법을 이용할 수 있습니다. 먼저 input 필드에 autofocus를 추가하면 간편합니다. 하지만 일부 브라우저에서는 이 기능을 지원하지 않을 수 있습니다. 다음과 같은 자바스크립트(Javascript)를 사용할 수 있습니다. window.onload = function() { var input = document.getElementB..

오늘 오전부터인지는 정확히 모르겠지만 애드센스 수익이 반영되지 않고 있는 장애가 발생하고 있습니다. 오늘 갑자기 수익이 '0' 상태로 유지되어 이런 상황이 며칠 정도 지속된다면(정책 위반이 있는지 살펴보아도 정책 위반은 없다고 표시되네요), 모든 사이트에서 구글 애드센스 광고를 제거해야 하나 생각하고 있었습니다. 혹시나 싶어 구글에서 뉴스를 검색해보니 이 문제가 미국 시각으로 수요일 저녁부터 발생하고 있다고 하네요. 문제가 전 세계적으로 발생하고 있는 것 같습니다. With AdSense, publishers can designate a space on their site for Google to serve advertising that is relevant to the visitor’s interest..

이 블로그에는 최근 공개된 티스토리 매거진 스킨인 Magazine이 적용되어 있습니다. 스킨 그대로 사용해도 괜찮지만 저는 이전 레이아웃과 거의 비슷하게 바꾸었습니다. 데모의 헤더를 보면 왼쪽에 블로그 이름이 표시되고, 오른쪽에 검색 아이콘과 메뉴 아이콘이 배치되어 있습니다. 저는 PC 버전에서는 이전 스킨과 비슷하게 만들었습니다. (모바일 버전은 모바일 스킨을 사용하고 있습니다.) 블로그 타이틀 옆에 배너가 표시되도록 했고, 메뉴는 메뉴 아이콘을 클릭했을 때 표시되도록 하는 대신 메뉴 아이콘을 삭제하고 메뉴 항목이 표시되도록 메뉴 내비게이션을 막코딩으로 추가했습니다.ㅎㅎ 검색 아이콘은 CSS를 사용하여 오른쪽 끝으로 위치를 이동시켰습니다. 이 부분에 대해서도 기회가 되면 수정하는 방법을 설명해보겠습니다..

티스토리에서 작년에 공개한 스킨과 며칠 전에 공개한 Magazine 스킨을 적용할 경우 네이버 웹마스터도구의 웹페이지 수집 요청에서 '서버오류'가 발생할 수 있습니다. 저는 Poster 스킨을 적용했다가 이 오류 때문에 기본 스킨 중 하나인 #1을 사용하다가 오늘 Magazine 스킨을 적용해보았습니다. 하지만 Magazine에서도 마찬가지로 네이버 웹마스터도구에서 웹페이지 수집 요청 시 '서버오류'가 발생했습니다. 구글에서 검색되는 여러 방법을 시도해보았지만 문제가 해결되지 않았습니다. 그러다가 어떤 글에서 /1 페이지를 지우면 서버오류 무한루프에 빠지는 것 같다는 내용을 보았습니다(https://drkimfixnsolve.tistory.com/25 참고). 네이버 웹마스터도구에서 '서버오류' 발생하는..