'Tistory' 카테고리의 글 목록

thumbnail 앵커버튼 만들기 : 티스토리 편 앵커버튼은 무엇인가? 앵커버튼은 내가 생성한 버튼 형태의 이미지를 클릭했을 때, 페이지 내에서 해당 섹션으로 이동하는 것을 말한다. 방문자가 해당 컨텐츠를 쉽게 찾을 수 있어 잘 사용하면 유용하다. 결과적으로는 내 사이트에서 내가 컨텐츠 보기 편하게 하기 위해서 자주 만들고 사용하기는 하는데, 일종의 간편한 순간이동 장치라고 생각하면 좋다. 만드는 방법은 아주, 아주아주 간단하다. 이동할 이미지를 만들고, 이동할 이미지의 주소를 해당 섹션 값의 이름을 작성한다. 즉, 쉽게 이야기하면 이동할 위치를 지정해놓는 것이다. 이렇게 지정한 위치를 내가 인식하기 위해서는 해당 위치에 이름을 만들어줘야한다. 예를 들어, 우리 집 앞에 슈퍼를 '앞마당슈퍼'라고 이름을 지어주고 앵커버튼을 만들고 싶다면 가 될 것이다. ..
thumbnail 티스토리 글쓰기 단축키 정리 문단 스타일 스타일 PC Mac 제목1 (h2) Alt+Shift+2 Ctrl+Alt+2 제목2 (h3) Alt+Shift+3 Ctrl+Alt+3 제목3 (h4) Alt+Shift+4 Ctrl+Alt+4 제목4 (h5) Alt+Shift+5 Ctrl+Alt+5 제목5 (h6) Alt+Shift+6 Ctrl+Alt+6 문단3 (p) Alt+Shift+7 Alt+Shift+7 글자 스타일 스타일 PC Mac 굵게 Ctrl+B Command+B 기울임꼴 Ctrl+I Command+I 밑줄 Ctrl+U Command+U 기타 액션 액션 PC Mac 전체선택 Ctrl+A Command+A 실행취소 Ctrl+Z Command+Z 다시실행 Ctrl+Y / Shift+Ctrl+Y Command+Y / Shift+Com..
thumbnail 티스토리 스킨 슬라이드 자동 넘김 스크립트(Script) 간단한 스크립트 코드를 작성하여 메인 슬라이드 커버 요소를 자동 넘김으로 구현할 수 있습니다. 바로 위와 같이 커버 슬라이드 부분을 자동으로 넘김다는 명령어입니다. 4000는 4초를 의미합니다. 시간 간격을 조절하고자 할 때는 1/1000 기준으로 시간을 변경해주세요. .cover-slider가 기존 슬라이드 리스트의 클래스값이고, .next는 다음 버튼을 의미합니다. .trigger는 이를 클릭("click")하여 해당 동작을 작동시키는 것을 의미합니다. 최근에 제작한 사이트의 예시를 아래의 이미지에서 확인해보세요. 저는 4초로 설정하여 자연스럽게 넘어가는 것을 확인할 수 있었습니다. 사이트를 훨씬 세련되고 다채롭게 만들어주는 메인 슬라이드 기능은 사이트를 만드는 사람들에게는 가장 핵심적인 기능입니다...
thumbnail 티스토리 애널리틱스 업데이트 이전보다 훨씬 친절하게 개편된 애널리틱스, 이제는 여러 부분에서 네이버블로그를 거의 다 따라잡았다고 생각이 된다. 그 정도로 이전부터 문제점들이 하나하나 개편되고, 완전 뜯어고치는 식으로 되고 있는데, 게다가 구글 애드센스까지 가능하다 보니까 전문적으로 블로그를 운영하고자 하는 사람들은 네이버블로그에서 점점 티스토리로 넘어오는 것 같다. 다만, 이전에 문제였었던 네이버 애드포스트수익도 생각보다 꽤 되고, 기본적으로 같은 노력이라면 티스토리보다는 네이버 블로그가 방문자가 더 많기도 하다. 다만, 네이버블로그의 경우에는 저품질 등의 문제가 항상 발생하고, 여러 문제점들이 지속적으로 발생하기 때문에 단단하고 안정적으로 블로그를 운영하고자 하는 사람이라면 티스토리가 더 낫다고 본다. 이번에 개편된 티스토리 애널..
thumbnail 티스토리 글 쓰기 이미지 업로드 오류 「임시 해결방법」 티스토리로 글을 쓰다가 나처럼 글을 먼저 쓰고 관련된 이미지를 업로드하는 방식과 이미지를 업로드하고 그 아래에 내용을 적어가는 방식을 함께 사용하는 사람들이 있을 것이다. 네이버 블로그나 티스토리 둘 다, 이미지를 업로드하다가 오류가 발생하곤 한다. 티스토리의 경우에는 임시저장이 잘 안 되는 경우가 있어서 글을 쓰다가 글을 통째로 날려버린 경험이 한두 번이 아니다. 그럴 때는 그 시간이 아깝기보다는 다시 똑같은 내용을 적을 수가 없어서 마음이 아프게 된다. 이미지를 업로드하다보면 이미지 업로드 상태에서 멈추는 경우가 자주 발생한다. 이럴 때는 글을 먼저 업로드 한 다음에 수정 버튼을 눌러서 이미지를 마저 업로드하는 것이 최선의 방법인데, 문제는 이미지 업로드 상태에서 새로고침을 하거나 뒤로 가기를 누르면..
thumbnail 앨범형 티스토리 스킨배포 무료 다운로드 테마브루(Themebrew) 티스토리의 스킨제작자들은 공식홈페이지를 통해서 무료스킨을 배포하는 경우가 많습니다. 스킨포럼에서도 이용자 제작 스킨등을 배포하기도 하지만, 트위터나 각 개인의 티스토리를 통해서 무료 스킨이 배포되기도 합니다. 티스토리의 공식 스킨도 깔끔하고 좋습니다만, 여러모로 부족한 부분도 많습니다. 특히, SEO와 관련해서 메타태그의 여부 등 치환자로 표현하기 어려운 요소들이 작성되어 있지 않는 경우도 있고, 또한 자잘한 오류가 있기도 합니다. 티스토리에서는 여러가지 스킨을 제작하고 배포하는데, 최근에 배포한 여섯가지의 스킨이 가장 쓸만합니다. 이외에 스킨은 여러가지 아쉬운 점이 많이 있습니다. 티스토리스킨은 아래와 같이 매거진, 미니멀, 반응형, 블로그형, 사이트형, 그리고 초보들이 쉽게 레이아웃을 변경하거나 특정..
thumbnail 티스토리 에디터에서 Alt 요소 쉽게 추가하는 방법 이미지의 Alt값은 일반 웹문서의 키워드와 같습니다. 구글이나 네이버, 다음에서 해당 이미지가 검색되기를 원할 경우에는 이미지에 Alt 요소를 추가해주는 것이 좋은데요. 더불어, Title 값도 함께 추가해준다면 검색엔진에서 내가 업로드한 이미지가 노출 될 확률이 높아집니다. 저 같은 경우에는 글을 쓸 때, 일반 기본모드로 글을 쓰는 경우도 많이 있지만, HTML 모드에서 글을 쓰는 경우가 더 많습니다. P 태그 요소와 더불어 다양한 기능을 CSS(스타일 시트)로 꾸밀 수 있기 때문인데요. 티스토리 내에서 이미지를 업로드 하는 경우에는 고유의 주소값으로 업로드 되기 때문에 하나하나 찾아서 Alt 태그와 Title 태그를 찾아서 넣는 것이 쉽지 않습니다. 그래서 가장 쉬운 방법으로는 F12 개발자 도구를 ..
thumbnail 티스토리 더보기 버튼 디자인(CSS) 일반적으로 별도의 스킨을 사용하지 않거나 티스토리 내에서 스킨수정을 하지 않았다면 더보기 버튼이 매우 밋밋해보일 수 있다. 더보기 기능은 많이 쓰는 편은 아니지만, 쓰는 사람에 따라서 유용하게 사용할 수 있는 기능 중 하나로, 중요하진 않지만 매우 긴 내용을 감추거나 부가적인 설명을 할 때 더보기버튼을 적절하게 활용할 수 있다. ↓ ↓ 별도의 CSS를 추가하지 않았다면 아마도 위와 같이 밋밋한 텍스트만 남아있을 것이다. 이러면 아무리 좋은 글을 써도 감춰진 정보를 방문자가 그냥 놓쳐버릴 수가 있다. 그래서 간단한 안쪽 여백과 외곽선을 추가해줘서 버튼처럼 보이게 할 수 있을 것이다. ↓ ↓ 이렇게 하면 다소 밋밋한 더보기버튼이 위와 같이 조금 색다르게 보일 수 있다. 배경색을 넣고 더보기 글자 색을 흰색으..
thumbnail 사이트맵 등록 후 검색엔진에 등록되는 시간 + 네이버 서치어드바이저 웹페이지 수집요청하기 티스토리나 워드프레스, 구글블로그, 텀블러 등 웹페이지에 수집되는 사이트를 만들었다면 나의 글이 잘 노출이 되어야 합니다. 그리고 저와 같이 중간에 도메인을 변경한다면 다시 사이트맵을 생성하고 각 검색엔진에 등록을 시켜주어야합니다. 이전 도메인과 연동된 웹페이지들이 여전히 검색엔진에 남아있기 때문에 유사문서 등의 문제를 발생시킬 수 있습니다. 가장 좋은 점은 하나하나 수작업으로 페이지 이전 작업을 해주면서 웹수집을 동시에 해야하는 것이지만, 이처럼 귀찮은 일은 또 없습니다. 그래서 대부분 검색엔진이라고 하면 구글, 네이버, 다음만을 집중적으로 해주는 것이 훨씬 효율적이라고 할 수 있는데요. 그렇다면, 저와 같이 검색노출이 잘 안되거나 도메인을 새롭게 연동한다면 언제 나의 글이 새로운 도메인 주소로 노출이..
thumbnail [티스토리] 새로운 글쓰기 에디터 Alt 태그이미지 삽입방법 새로운 글쓰기에서 Alt태그 또는 Alt속성 이미지의 “대체 문구”(alternative text) 적용시키는 방법 티스토리를 하면서 검색노출이 잘 되기 위해서는 네이버 블로그와는 달리 웹사이트상에서 적용되는 아주 중요한 SEO(검색엔진 최적화)를 알아야만 한다. 티스토리와 네이버 블로그를 동일시하는 사람들이 많은데, 네이버 블로그와 비슷한 것은 다음 블로그다. 다음 티스토리와 다음 블로그는 분명히 다르다. 이전에 티스토리를 계속 해왔던 사람들은 이전 에디터에서 쉽게 Alt 속성을 추가해줄 수 있었다. Alt 태그에 대해서는 이해하고 있다는 가정하에 짧게 설명을 한다면, 이미지가 어떠한 이유로 웹상에서 보여지지 않을 때, 이를 대신하여 이미지에 텍스트 문구를 적용하여 노출시켜주는 것이다. 그래서 SEO ..
thumbnail 티스토리의 이미지 복사기능(웹 서버 저장) 나는 누구보다도 글을 쉽게, 또 많이 쓸 수 있는 능력을 가졌다. 그리고 그동안 네이버블로그를 하면서 배웠던 능숙함은 웨일브라우저의 Alt + F2의 영역선택 캡쳐기능으로 블로그에서 글을 쓸 때, 쉽게 이미지를 복사해서 글을 쓸 수 있었다. 이미지를 저장하고 웹에디터에 이미지를 붙여넣을 때, 두 가지 방법이 있다. 하나는 이미지를 별도로 웹 에디터 기능의 파일을 내 컴퓨터에서 불러와서 등록을 시키는 방법이고, 또 하나는 이미지를 그대로 복사 붙여넣기 하는 기능이다. 캡쳐기능으로 붙여넣기를 하게 되면 네이버블로그의 경우에는 이미지가 웹서버에 저장이 된다. 그렇지만, 드래그를 해서 저장을 하게 되면 드래그한 서버의 웹주소 데이터도 그래도 복사가 된다. 이 때문에, 이미지만으로도 유서문사 처리를 당할 수 있는..
thumbnail 알게모르게 변경된 티스토리 업데이트 '인용글, 구분선' 변경된 인용글 디자인 위와 같은 디자인으로 변경되었다. 매일 티스토리에 글을 쓰는 사람이라면 바로 알아챘을거라고 생각된다. 구분선의 경우에도 명확하게 변경이 되었는데, 구분선을 새롭게 추가하는 것이 아니라 변경한 것이여서 이전 디자인이 마음에 들었던 사람에게는 조금 아쉬울 수 있는 업데이트였다. 인용글 디자인의 경우에는 회색 박스에 선이 없었는데, 추가되었다. 그래서 훨씬 선명하게 인용글을 확인할 수 있게 되었다. 인용글이나 구분선의 경우에는 직접 CSS나 HTML을 수정하면 내가 원하는 느낌으로 변경할 수 있지만, 기존의 느낌도 좋은 것 같아서 그대로 사용하고 있다. 또, 이와 같이 잠수함 패치(업데이트)를 하게 되는 경우에는 하나하나 수정하는 것이 번거롭기 때문에 위와 같은 요소들은 기존의 티스토리 ..
thumbnail 투명한 파비콘 만들기 : 다이나믹 드라이브 툴 웹툴을 제공해주는 개인 사이트가 있다. 공식적으로 운영되는 사이트보다는 블로그에 가까운 사이트임에도 불구하고 다양한 웹툴을 제공하고 있다. 요즘은 직접 만드는 것보다 이렇게 웹툴을 통해서 만드는 것이 훨씬 완벽에 가깝다. Web Tools Image Optimizer FavIcon Generator FavIcon Editor Animated Gif Email Riddler .htaccess Password .htaccess Banning Gradient Image Button Maker Image to Base64 String Ribbon Rules List Scrubber Tool DD Whois Service 다이나믹 드라이브 사이트에서 제공하고 있는 링크는 위와 같다. 여러가지 기능들을 제공하고 있..
thumbnail 티스토리 토글형 사운드클라우드 배경음악 구현하기 티스토리 사이트에 배경음악을 따로 설치할 생각은 없었는데, 우연히 괜찮은 라이브러리를 발견해서 설치해봤습니다. 토글형식으로 되어 있고 자주 방문하는 사이트라면 크롬엔진에서도 자동음악재생이 가능해집니다. 어쨌든, 토글형식의 배경음악 기능은 꽤 예쁘고 깔끔합니다. $('.cata-music-toggle-btn.cata-toogle').on("click", function() { $('.cata-music-toggle-btn.cata-toogle').not(this).removeClass('.cata-music-toggle-btn.cata-toogle'); $(this).toggleClass('active'); }) 제 사이트에서는 메인에 위치한 재생버튼도 있지만, 사운드클라우드처럼 리스트 형식의 음악을 재생..
thumbnail 티스토리 카테고리 페이지 주소 Category 삭제방법 var articleListPage = document.getElementsByClassName("post-item"); var articleListPage = document.getElementsByClassName("related-articles"); var removeSID; var indexSID; if(articleListPage.length) { for (i = 0; i < articleListPage.length; i++) { removeSID = articleListPage[i].getElementsByTagName("a")[0].href; indexSID = removeSID.indexOf("?"); if(indexSID == -1) {break;} removeSID = removeSID..