워드프레스 일기의 IT & 기타 786

긴 주소를 짧게 단축하는 URL 단축 서비스 사이트를 만들 수 있는 BeLink

긴 주소를 짧게 단축하는 URL 단축 서비스를 제공하는 사이트를 만들고 싶거나 개인적으로 해당 도메인으로 된 단축 URL을 생성하고 싶은 경우 BeLink, Premium URL Shortener 등과 같은 PHP 스크립트를 사용할 수 있습니다. 긴 주소를 짧게 단축하는 URL 단축 서비스 사이트를 만들 수 있는 BeLink 가끔 방문하는 개발자 커뮤니티에 어떤 분이 단축 URL 서비스를 제공하는 사이트를 만들었다면서 소개하는 것을 보고 저도 단축 URL 서비스를 제공하는 사이트를 하나 만들어볼까 생각한 적이 있습니다. 워드프레스 플러그인을 비롯한 각종 스크립트와 코드를 판매하는 Codecanyon에서 제공하는 PHP 스크립트를 사용하면 위의 그림과 같은 단축 URL 서비스 사이트를 만들 수 있습니다. ..

IT & 기타/IT 2022.10.29

웹 페이지가 모바일 기기에서 가로 모드로 표시되도록 하는 방법

웹 페이지를 모바일 기기에서 세로 모드가 아닌 가로 모드에 보도록 만드는 경우가 있습니다. 예를 들어, 유튜브 영상 등을 웹 페이지에 삽입하는 경우, 사용자의 모바일 기기가 세로 모드로 설정되어도 가로 모드로 표시되기를 원할 수 있습니다. 웹 페이지가 모바일 기기에서 가로 모드로 표시되도록 하는 방법 웹 페이지가 모바일 장치에서 가로 모드로 강제로 표시되도록 해야 하는 경우가 있을 수 있습니다. HTML5 webapp manifest 사용 웹앱(webapp)에서는 HTML5 webapp manifest를 사용하여 가능합니다. html5rocks.com에 설명되어 있듯이 manifest.json 파일을 사용하여 기기 방향 모드를 강제로 설정할 수 있습니다. json 파일에 다음 라인을 추가하도록 합니다: ..

IT & 기타/CSS 2022.10.27

카카오 데이터센터 장애 이후 티스토리 블로그 네이버 유입 급감

지난 10월 15일 판교 SK C&C 데이터센터 화재로 카톡을 비롯한 카카오 서비스 대부분이 일시적으로 장애를 겪었습니다. 티스토리 블로그도 며칠 동안 제대로 접속되지 않았는데요. 카카오 사태 이후 티스토리 블로그의 네이버 유입이 급감하는 문제가 발생하고 있습니다. 이 블로그의 경우 네이버 유입이 크게 감속했고, 신규 글을 발생해도 네이버에 색인이 되지 않는 문제가 지속되고 있습니다. 카카오 데이터센터 화재로 인한 서비스 장애 이후 티스토리 블로그 네이버 유입 급감 카카오 데이터센터 화재 사건 이후 이 티스토리 블로그의 네이버 방문자 유입이 폭망한 상태입니다. 며칠 지나면 회복되지 않을까 하는 희망을 가졌지만 네이버 저품질이 풀리지 않을 것 같습니다. 오늘 유입도 확인해보니 네이버 방문자 수는 매우 저조..

카카오 사태로 인한 티스토리 장애, 네이버 방문자 급락, 애드센스 광고 수익 제로...

지난 토요일(10월 15일) SK C&C 판교 데이터센터 화재로 인해 카톡을 비롯한 카카오 서비스들이 장애를 일으키면서 전국적으로 혼란이 발생했습니다. 카카오 사태로 인해 지금도 일부 서비스가 원활히 운영되지 못하고 있습니다. 티스토리도 예외가 아니었는데요. 티스토리는 "티스토리 장애 안내" 공지를 올려서 복구 작업 현황을 공유하고 있습니다. 카카오 측이 막대한 비용을 이유로 이원화 조치를 제대로 하지 못해 서비스 복구에 시간이 걸리고 있습니다. 이중 삼중으로 백업 데이터 센터를 운영하는 글로벌 기업들과 비교되는 대목입니다. 카카오 사태 이후 네이버 방문자 수 급락 카카오 데이터센터 화재 사건 발생 전날인 지난 금요일과 어제 방문자 수 유입을 살펴보면 구글은 어느 정도 방문자 수가 회복되었지만 네이버는 ..

네이버 블로그 주소 변경이 잘 안 되는 경우 참고하세요

어제부터 네이버 블로그 주소 체계가 개편되었습니다. 그동안 네이버 블로그 주소는 네이버 ID를 사용하여 자동으로 생성되었지만 이제는 네이버 ID가 아닌 블로그 ID를 사용하여 네이버 블로그가 생성됩니다. 네이버 블로그 URL에 네이버 ID가 사용되다 보니 스패머들이 블로그에 사용된 네이버 ID를 기반으로 스팸을 발송하는 등의 문제가 있어서 이번에 네이버 ID와는 별개로 블로그 ID가 도입되는 것 같습니다. 기존 블로그 사용자는 블로그 ID를 1회에 한해 변경이 가능합니다. 네이버 블로그 주소 변경 블로그 관리 페이지에 접속하여 기본 정보 관리 » 블로그 정보에서 블로그 주소를 변경할 수 있습니다. 변경할 블로그 아이디를 입력하고 확인을 누르면 한 번 더 확인창이 표시됩니다. 다시 확인 버튼을 누르면 블로..

IT & 기타/IT 2022.10.13

티스토리 스팸 댓글 차단하기: 사용자 및 IP 주소 차단

워드프레스에서는 봇에 의한 스팸 댓글이 많이 달리는 경우가 있지만 티스토리는 봇을 이용한 스팸 댓글이 거의 없는 편입니다. 하지만 최근 글이 발행되지 마자 동일한 내용의 댓글이 달리는 현상을 발견했습니다. 처음에는 사람이 단 댓글이라 생각했지만 모든 댓글의 내용이 동일한 것으로 봐서 봇을 이용한 스팸 댓글 같습니다. 티스토리에서는 원치 않는 사용자나 IP 주소를 차단할 수 있습니다. 티스토리 스팸 댓글 차단하기: 사용자 및 IP 주소 차단 (스팸 필터) 워드프레스 사이트에서는 봇에 의한 스팸 댓글이 많습니다. 동일한 스패머에 의한 댓글도 IP 주소와 내용을 다르게 하여 동시 다발적으로 달리는 경우도 있습니다. 보통 활성화된 사이트에서는 그러한 댓글이 많이 달리고 그렇지 않은 사이트에는 거의 달리지 않습니..

티스토리 크롤러 오류, HTTPS 오류 대처 방법

최근 들어 티스토리에서 크롤러 오류가 발생하거나 HTTPS 관련 에러("HTTPS 평가되지 않음")가 발생하면서 구글 서치 콘솔에서 크롤링이 되지 않고 광고 수익이 급락하는 문제가 증가하고 있습니다. 이 문제가 발생하는 경우 다음 조치를 취해서 문제가 해결되는지 체크해보시기 바랍니다. 티스토리 크롤러 오류, HTTPS 오류 대처 방법 구글 서치 콘솔에서 "광고 크롤러 오류가 있으며, 이 때문에 수익 손실이 발생할 수 있습니다" 에러가 발생하는 티스토리 블로그가 늘어나고 있습니다. 최근에는 "HTTPS가 유효하지 않으며 색인이 생성되지 않을 수 있습니다"와 "HTTPS 평가되지 않음" 에러가 발생하는 경우도 증가하고 있습니다. HTTPS 관련 문제와 관련하여 구글 전문가(Product Expert)는 다음..

[자바스크립트] 마우스 우클릭 금지 방법

사이트 방문자들이 텍스트를 복사하지 못하거나 이미지를 다운로드하지 못하도록 마우스 우클릭을 금지하는 코드를 넣거나 오른쪽 마우스 방지 플러그인을 설치하는 경우 사용자 경험(UX)에 부정적인 영향을 미치고 SEO에도 좋지 않습니다. 특히, 코드를 공유하는 사이트에서 마우스 우클릭 금지 조치를 취하게 되면 방문자들의 원성을 사게 됩니다. 또한, 우클릭 금지는 쉽게 무력화될 수 있으므로 효과도 없습니다. 즉, 마우스 우클릭 금지는 방문자들의 불편을 야기하여 SEO에 부정적인 영향을 미치고 쉽게 무력화될 수 있어 효용성도 없습니다. 대안으로 이메일 주소를 입력하거나 회원으로 가입하는 경우에 코드를 복사할 수 있도록 허용하는 것을 생각해볼 수 있습니다. 해외 블로그에서 이 방법으로 뉴스레터 구독자나 회원을 늘리는..

텍스트 앞에 정사각형 도형 표시하기 (CSS)

소제목(헤딩) 앞에 여러 가지 컬러로 된 정사각형을 추가한 워드프레스 사이트를 본 적이 있습니다. 예를 들어, 다음과 같이 소제목 앞에 빨간색 정사각형 도형이 표시되었습니다. 이런 도형을 제목 앞에 특수 기호(■)를 추가하는 것은 그다지 좋은 방법이 아닙니다. 이 상황에서는 CSS 가상요소 :before를 사용하여 일괄적으로 정사각형 도형을 표시할 수 있습니다. CSS 가상요소 :before를 사용하여 텍스트 앞에 정사각형 도형 표시하기 CSS를 사용하여 텍스트 앞에 정사각형 기호를 표시하고 싶은 경우 "How can I use :before property to create a square before a span" 문서에 제시된 CSS 코드를 사용할 수 있습니다. 위와 같이 다양한 컬러의 정사각형 기..

IT & 기타/CSS 2022.09.15

복수 클래스로 된 요소 선택하기 (자바스크립트)

예를 들어, document.querySelectorAll(".class1")을 사용하면 class1 클래스로 된 모든 요소에 적용됩니다. class1 클래스 또는 class2 클래스로 된 모든 요소를 선택하고 싶은 경우가 있을 수 있습니다. 이런 경우 개별적으로 만들어도 되겠지만 비효율적일 것입니다. 복수 클래스로 된 요소 선택 방법 How to get elements with multiple classes라는 제목의 Stackoverflow 글에서 class1 클래스와 class2 클래스가 모두 있는 요소를 선택하는 방법에 대하여 다루고 있습니다. 이 경우 다음과 같은 코드를 사용할 수 있습니다. var list = document.getElementsByClassName("class1 class2"..