요즘 티스토리에 스팸 트랙백이 기승을 부린다. 하루에도 몇십 개씩 등록되는 트랙백을 지우느라 정신이 없다. 결국, 임시방편으로 스킨을 수정해서 트랙백이 표시되는 부분을 숨겨둔 다음 방법을 찾기 시작했다. 그러다 블로그 트랙백 전체 차단 기능 추가 공지가 눈에 띄었다. 트랙백이 문제가 되니 일단 트랙백 기능 자체를 차단해서 스팸 유입을 막고 그 뒤에 해결책을 찾겠다는 것. 이게 무슨 해결책인가 싶어서 유심히 보고 있는 중 '해커 C' 님의 댓글을 보게 된다. 트랙백 주소형식을 찾아서 스팸을 남기는 봇에 대비해서 스킨을 수정해서 게시물에 트랙백 주소를 표시하지 않고 이용자가 버튼을 클릭했을 때만 트랙백 주소가 표시되는 스크립트를 사용하는 방법이다. 일단 티스토리 트랙백 스팸 차단방법, 좀 더 깔끔하게 차단하..

Breadcrumbs Navigation 얼마 전 블로그를 구경하다가 Breadcrumbs(Breadcrumb Trail)이란 게 눈에 들어왔다. 블로그 대문에서 현재 게시글까지 각 카테고리를 링크로 표시한 것으로, 헨젤과 그레텔의 빵부스러기에서 이름을 따왔다고 한다. 워낙 많은 웹사이트에서 사용하는 것이라 당연하다고만 생각했지 눈여겨 본적이 없었다. 왠지 좋아 보여서 간단한 스크립트로 따라 해봤다. 그나저나 한국어로는 뭐라고 하면 좋을까? '카테고리 내비게이션 메뉴' 또는 '내비게이션 바'라고 하면 이건 그냥 영어인 거겠지? skin.html 수정하기 ...

웹사이트나 블로그를 돌아다니다 보면 탭으로 구분된 메뉴를 종종 볼 수 있다. 탭으로 메뉴를 구성하면 가로나 세로로 나열된 정보를 작은 공간에 표시할 수 있다는 장점이 있다. /'pəlp/ 블로그처럼 본문과 댓글을 구분하는 데 사용할 수도 있고 사이드바의 최근 글, 최근 댓글, 최근 트랙백을 탭으로 묶어서 구성할 수도 있다. 이런 탭 메뉴는 복잡한 JavaScript를 사용하지 않아도 input 요소와 CSS만으로 간단히 만들 수 있다. 한 화면에 두 개 이상의 탭을 배치하면 제대로 동작하지 않으니 한 화면에 한 개만 사용하도록 주의한다. 앞으로 이야기할 탭 메뉴는 input 요소 중 라디오 버튼(input type="radio")에서 label 글자를 클릭하면 대응하는 번호의 버튼이 선택된다는 점을 이용..

Font Awesome 바로가기 Font Awesome은 글자 대신 아이콘을 넣은 아이콘 폰트다. 아이콘 폰트라는 말이 낯설지도 모르겠지만, 일반 글꼴과 다른 점은 글자 대신 아이콘이 들어있다는 것뿐이다. 예전 유행했던 딩뱃(Dingbat) 폰트와 비슷하다. 예를 들어 'a'라는 글자를 입력했을 때 보통의 글꼴에선 'a'가 표시되지만, 아이콘 폰트에선 특정 아이콘이 표시된다고 생각하면 된다. Font Awesome은 Desktop에서도 사용할 수 있지만, 특히 CSS @font-face(웹폰트)로 블로그 등에서 사용할 때 활용도가 더 높다. 369개나 되는 아이콘을 무료로 사용할 수 있으며 svg 등의 벡터 이미지처럼 사이즈를 키우거나 줄였을 때도 아이콘 품질이 바뀌지 않아서 크기에 구애받지 않고 사용할..

1. 글꼴(ttf → woff, eot) 변환 및 Dropbox 업로드 오랜만에 블로그 스킨을 바꾸려고 CSS를 편집하는데 유독 IE9, IE10에서만 웹폰트가 적용이 되지 않았다. IE9 이후로는 EOT뿐 아니라 WOFF도 지원한다는데 왜 안될까 고민하던 중 Google Fonts가 문득 생각나서 적용해보았다. 이상하게 CSS의 내용은 내가 작성한 것과 완전히 똑같은데 Google Fonts는 적용이 되고 내껀 안된다. 이런저런 테스트를 하다보니 IE9, 10에서는 티스토리 스킨에 업로드한 글꼴 파일을 불러오지 못하고 외부 링크에서만 제대로 읽어왔다. 그래서 클라우드 서비스를 활용하기로 했다. 웹폰트를 적용해봤던 적이 있다면 방법은 아주 간단하다. 외부에 woff 파일을 올리고 CSS @font-fac..

티스토리의 날짜 표시 형식은 '년/월/일 시:분'이다. 매번 똑같은 날짜만 사용하면 좀 심심하지 않을까? JavaScript를 사용하면 사용자가 원하는 다양한 방식으로 게시물 날짜 형식을 바꿀 수 있다. 기본 개념은 티스토리 스킨에서 게시물 날짜를 표시하는 2014. 2. 28. 21:38 치환자 대신 ※ // 뒤의 내용은 주석 처리됨 코드 부분의 var는 변수를 지정하는 부분이다. 'd'라는 이름의 변수에 split으로 나눈 날짜와 시간의 배열을 할당한다는 의미다. split은 .split() 앞의 문자를 지정한 문자 기준으로 나눠서 배열로 만드는 메소드로, 괄호() 안의 '/[/ | |:]/' 부분이 바로 문자를 나눌 기준이다. 위 코드에서는 이 부분에 정규식을 사용했는데, 처음과 끝의 슬..