'Tistory' 카테고리의 글 목록

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 티스토리 구글 애드센스 가로로 광고 2개 다는 방법(2단 광고) 티스토리 구글 애드센스 가로로 나열하는 방법 CSS 코드를 조금 안다면 더 자유롭게 수정이 가능하고 테이블 코드를 Div로 감싸서 중앙정렬이나 위 아래 마진값을 주는 방법으로 훨씬 깔끔하게 배치가 가능하다. 물론, 나의 경우에는 수익형 블로그의 경우 광고로 거의 도배하다시피 하지만, 그래도 최대한 깔끔하게 배치하는 것이 광고효율을 높일 수 있는 방법이라고 할 수 있다. 이왕 광고를 할거라도 컨텐츠처럼 활용될 수 있게 꾸미는 것이 바로 구글 애드센스 광고의묘미라고 할 수 있겠다. 보통은 위의 방법으로 구현하고 광고 위치에 따라서 조금 달라질 수 있다. 테이블코드로 가로로 광고를 2개 달 수 있는데, cellspacing(Cell Spacing)속성은 말 그대로 셀과 셀 사이의 여백을 조절할 수 있다. 그래..
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..
thumbnail 나라별 구글애드센스 단가(CPC) 2018년 CPC 상위국 (단위: USD) 룩셈부르크: 0.65 미국: 0.61 호주: 0.57 영국: 0.48 핀란드: 0.45 캐나다: 0.45 오스트리아: 0.45 뉴질랜드: 0.33 스웨덴: 0.31 아일랜드: 0.31 덴마크: 0.28 싱가포르: 0.27 남아프리카: 0.26 노르웨이: 0.26 네덜란드: 0.26 바하마: 0.27 독일: 0.22 스위스: 0.21 벨기에: 0.21 스페인: 0.19 지부티: 0.19 태국: 0.17 프랑스: 0.17 콜롬비아: 0.17 푸에르토리코: 0.16 과테말라: 0.16 그리스: 0.16 아랍에미리트: 0.15 러시아: 0.15 몰타: 0.15 동북아시아 국가 비교 일본: CPC USD 0.14 / CTR 1.14% (33위) 중국: CPC USD 0...
thumbnail 오랜만에 쓰는 티스토리 노하우 사실 티스토리 기반으로 만들어진 사이트는 사이트 관리에 신경을 매우 많이 써주어야만 합니다. 워드프레스와 달리 티스토리는 티스토리 내에 사용할 수 있는 기능들이 한정되어 있고, 이마저도 어려움을 겪는 사람들이 너무나도 많기 때문에 네이버블로그를 했던 분들이라면 티스토리를 시작하는 것에 굉장히 어려움을 느낄 것이라고 생각이 듭니다. 개인적으로는 네이버 스마트에디터보다 티스토리 에디터를 더 마음에 들어합니다. 직관적이고, 깔끔하고 필요한 내용만 작성하면 되기 때문입니다. 티스토리를 다양한 목적으로 하는 사람들이 많습니다. 저는 글을 쓰는 능력은 나름대로 다른 사람들에 비해 빠르게 글을 쓸 수 있다고 생각을 하면서도 다른 사람들 만큼 컨텐츠가 다양하거나, 분석적이거나 정성을 들여서 쓰는 글은 잘 쓰지를 못합니..
thumbnail 티스토리 검색창 추가하기(치환자/출력 갯수/디자인 변경) 기존에 관련 글이 꽤 많이 있었는데 소스를 보니 적용되는 부분이 모두 달랐습니다. 글이 점점 많아지니 제 글도 쉽게 찾지 못하는 경우가 생겨서 급하게 티스토리 검색창을 추가했습니다. 위치는 개인의 취향에 맞게 조정해서 쓰면 되고 HTML을 조금 다루실 줄 아시는 분은 그대로 소스를 긁어서 원하는 위치에 추가하시면 될 것 같습니다. 다만 Submit 출력 버튼은 Display: none; 설정을 한 상태라서 검색 버튼을 활성화시키실 경우에는 CSS를 수정하셔야 합니다. HTML CSS /* 검색창 */ .search { max-width: 1200px; margin: 0 auto; text-align: right; } input#article_search { margin: auto; text-align: ..
thumbnail 티스토리 아이콘 설정 파비콘과 다른 점 티스토리를 처음 개설할 때 여러가지를 설정하게 되는데, 이는 워드프레스나 네이버블로그 등 다른 플랫폼에서도 마찬가지입니다. 사이트에 익숙하지 않다면 새로운 설정을 할 때 무엇을 위한 것인지 모를 때가 많습니다. 티스토리에서는 내 사이트 옵션에서 내블로그로 들어가면 보안설정 외에도 아이콘 설정과 파비콘 설정을 할 수 있는 곳이 있습니다. 프로필 이미지도 따로 설정을 해야하고, 블로그의 프로필도 별도로 설정하는데, 아이콘 까지 있다면 조금 헷갈릴 수 있습니다. 티스토리 아이콘은 댓글에 표시되는 부분입니다. 파비콘은 사이트를 열었을 때 브라우저의 상단에 뜨는 작은 아이콘입니다. 즐겨찾기를 할 때에도 파비콘의 이미지가 보여집니다. 파비콘이 적용된 모습 바로 이렇게 적용된 부분이 파비콘입니다. 그렇다면 아이콘을 ..
thumbnail 티스토리 통계 : 블로그 소유자의 방문 제외 업데이트 드디어 기다리던 소유자 방문 통계가 제외됐다. 그래서 간단한 통계를 보더라도 일단은 실방문자를 파악하는 것이 제일 중요한데, 이제서야 실방문자 통계만 집계되도록 변경이 되었다. 통계 후속 업데이트 - "블로그 소유자의 방문이 제외"됩니다. 통계 후속 업데이트 - "블로그 소유자의 방문이 제외"됩니다. 안녕하세요 티스토리 팀입니다. 블로그 통계 개편 이후에 '블로그 소유자의 방문도 통계에 포함'되어 불편하다는 의견이 있었습니다. 이를 해결하기 위한 논의를 했지만 제외해야 할 방문의 기준을 설정하는 것,.. notice.tistory.com 하지만, 나의 경우에는 글을 쓸때를 제외하고 딱히, 내 글을 별로 안읽기 때문에 이전과 별 차이가 없다. 오히려 요즘에는 그래도 열심히 글을 쓰고 있어서 그런지 유입경로..
thumbnail 티스토리 속도 개선 순위 SPEED Improvement 티스토리 사이트를 운영하다보면 사이트 관리가 왜 어려운지를 깨닫게 된다. 다양한 어려움에 처하다보면 해결방법을 알게 되는데, 우선순위에 따라서 수정하다보면 속도가 굉장히 빨라지는 것을 느낄 수 있다. 데이터를 읽어내는 속도, 즉 사이트의 데이터가 무거우면 당연히 보여지는 우리의 모니터에서 느리게 뜨는 것이다. 즉, 사이트를 가볍게 만들어줘야한다. 다이어트 하라는 소리 듣기도 지겨운데, 사이트까지 다이어트를 해야한다니 이 시대는 확실히 다이어트를 해야만 한다. 그것을 강요받든 받지않든 간에, 다른 문제가 발생하기 때문이다. 사이트를 느리게 하는 요인은 굉장히 많다. 티스토리의 경우 개인 스킨을 세팅하는 경우가 많이 있다. 하지만 이 개인스킨들을 잘 뜯어보면 나에게는 불필요한..
thumbnail 티스토리 각주다는 방법 (새 에디터) 기존 에디터에 내장되어 있던 기능인 각주 기능이 새 에디터에서는 별도의 코드를 입력해줘야한다. 사용방법은 간단하다. HTML 편집모드가 아닌 기본모드 에서 주석을 달고자 하는 단어 뒤에 설명문과 함께 코드를 입력해주면 된다. 각주(FOOTNOTE) 사용법 위와 같은 방식으로 작성을 하게 되면 쉽게 각주를 달 수 있다. 위의 사용방법을 통해서 작성을 하면 인연 식으로 표현된다. 각주 자체에 속성을 부여할 수 있어 글씨에 색상을 변경하거나 볼드처리 등을 할 수 있다. 각주에는 속성을 부여할 수 있다. 각주는 독자들로 하여금 단어나 키워드를 명확하게 설명할 수 있고 글을 깔끔하게 구성할 수 있는 활용도가 높은 기능이다. 각주는 본문 아래쪽에 부차적으로 내용을 추가할 수 있기도 하고, 글이나 참고한 자료를 밝히..
thumbnail 티스토리 신규스킨 'Magazine' 리뷰 이번 4월달에 티스토리에서 신규스킨이 업데이트 되었다. 이전 스킨들보다 훨씬 늦게 업데이트 된 만큼 기대가 컷었다. 신규스킨이 나오면, 이 신규스킨으로 새로운 티스토리를 운영하겠다고 생각했다. 그래서 신규스킨이 나오고 조금 살펴보다가 이전에 있었던 안쓰는 티스토리 사이트를 삭제하고 새로운 사이트를 개설했다. 최근에 게임도 열심히 했으므로, 게임 사이트로 운영하려고 한다. 물론, 인기있는 게임은 아니라서 조회수가 어떻게 유지될지는 모르지만 그래도 꽤 오래된 게임이고 매니아층이 형성되어 있는 게임이다. 또 예전에 나 역시도 정말 재밌게 했었던 게임이기때문에, 꼭 게임블로그를 한번 해보고 싶다는 생각은 항상 있었는데, 이번 기회에 개설을 했다. 아직 글을 많이 작성하지 않아서 구성은 조금 어설프지만, 기본적으..
thumbnail 사이트 디자인을 새롭게 개선하였다. 기존에 티스토리에서 제공하는 스킨을 버리고 최대한 심플하고 간단한 스킨을 다운로드하여 일부 디자인과 기능들을 모두 수정하였다. 항상 느끼는 거지만, 공식 스킨을 다운로드하여도 오류가 있기 마련이고 무엇보다 가장 큰 문제는 사이트 최적화가 되지 않는 것이었다. 공식적으로 제공이 된다는 것은 많은 사람들이 다양한 기능을 활용할 수 있도록 많은 기능을 넣었고, 하다못해 테마의 컬러까지도 각 코드를 모두 넣었기 때문에, 필연적으로 사이트가 무거워질 수밖에 없다. 많은 사람들이 간과하는 것이 바로 속도이다. 한국에서야 워낙 인터넷 환경이 잘 갖춰져 있어 쉽게 체감할 수 없지만 구글의 툴을 이용해서 사이트 속도를 체크하면 SEO 점수에서 감점을 받는다. 그 이야기는 티스토리와 같이 플랫폼의 검색 점유율이 낮고 구글..
thumbnail 티스토리 마크다운을 위한 입문서 가이드 마크다운(Markdown) 이번에 티스토리 에디터에 마크다운 기능이 추가되면서 빠르고 쉽게 효과적으로 글을 작성할 수 있게 되었습니다. 마크다운이란, 텍스트 기반의 마크업 언어로 문서나 일반 텍스트 편집기를 통해 쉽게 HTML로 변환이 가능한 웹문서 언어입니다. 따라서, 마크다운 언어를 적용하여 글을 쓰면 매우 효과적으로 빠르게 글을 쓸 수 있다고 이해할 수 있습니다. 문단 구별 및 개행[ENTER] 이번에 코드블럭 기능도 추가되어 본문에 쉽게 HTML으로 작성을 할 수 있게 되었습니다. 글을 작성할 때 `Space Bar를 두번 눌러 띄어쓰기 공백을 만들면 문단이 구분됩니다.` 마크다운에서는 문단을 구별하기 위해서는 스페이스바를 활용합니다. [Space Bar]를 두번 눌러서 문단을 구별할 수 있습니다..
thumbnail 티스토리 직접 유입과 기타 유입 그리고 방문통계 지금 보고 있는 사이트가 아닌, 내가 운영하고 있는 다른 사이트의 방문통계를 살펴보면 티스토리의 검색엔진이 여타 사이트와 별반 다를바 없다는 것을 알 수 있다. 네이버의 경우, 블로그 탭에 자사의 블로그 서비스를 노출시키고 다음의 경우에는 다음 블로그와 티스토리가 우선적으로 노출된다. 다음이나 네이버는 국내 포털서비스로 블로그의 경우에는 기본적으로 자사의 블로그탭에 노출시키지만, 구글에서는 웹문서로 취급이 된다. 그렇다면 네이버와 다음, 구글에서 골고루 검색이 되기 위해서는 어떻게 해야할까, 네이버의 블로그탭의 경우에는 자사의 서비스를 우선으로 하기 때문에 티스토리가 블로그탭이 아닌 웹문서탭에 노출이 될 확률이 높다. 티스토리 사이트 중에서도 어느정도 기간이 되고 전문성이 입증된 티스토리 사이트의 경우,..
thumbnail 더보기 접기 디자인 변경(Svg) Document, Envelope 아래와 같이 변경하였다. 기존의 뷰/블라인드 와는 조금 더 미니멀한 느낌을 주고 싶었다. 마침 찾아보다가 딱 마음에 드는 아이콘이 있어 적용해보았다. 이 글은 열린 글입니다. 여러가지 아이디어를 생각했는데, 역시 가장 심플한게 이 사이트의 컨셉에 잘 맞을 것 같아서 조금 화려한 것도 있었지만, 최대한 깔끔한 것으로 구성하였다. 포인트는 제목으로도 충분하다. 글에 컬러가 많으면 양이 많아보이는 효과도 있지만, 반대로 집중도를 떨어트릴 수도 있다. 가독성을 높이는 요소를 유지하면서 조금씩 더욱 글이 선명하게 보일 수 있도록 다른 방법도 고안중이기는 하다. 다만 곧 티스토리의 에디터가 변경될 예정이여서 크게 업데이트는 하지 않고 있다. 꾸준히 글은 작성하되, 너무 많은 변화보다는 계속해서 쌓아가고자 노력하고 ..
thumbnail 티스토리 카카오톡/트위터 버튼 수정(undefined) [Onclick] 기존에 내장되어 있던 티스토리 포트폴리오 스킨의 공유버튼은 주석처리되어 비활성화 되어있었다. 그래서 다시 활성화를 시켜서 본문에 바로 공유버튼을 유도할 수 있도록 설정을 했으나 트위터의 경우에는 undefined가 되어 공유시에 글의 타이틀 데이터를 불러올 수가 없었다. 카카오톡 공유의 경우에도 마찬가지로 공유가 되지 않고 카카오 디벨로퍼스에서 자바스크립트 API를 통하여 앱을 만들어 값을 입력해주고 정상적으로 공유버튼이 실행되도록 수정하였다. 카카오톡의 경우에는 위와 같이 자바스크립트로 구현하였고, 자바스크립트 키를 입력하여 정상적으로 작동하는 것을 확인하였다 트위터의 경우에도 기존의 있었던 부분에 치환하여 적용하였다. 카카오 디벨로퍼스 앱 만들기 애플리케이션에서 개요 부분을 클릭하여 플랫폼 설정도 해..
thumbnail 개발에 대한 하소연 기능 하나를 추가하면 일단 브라우저마다 호환성도 체크해야하고 각종 스크립트 오류부터 사이트가 느려지는 현상까지 고려를 해야한다. 별거 아닌 사이트처럼 보여도 최대한 깔끔하면서도 웹페이지 또는 웹문서의 접근성을 높이기 위해서 나름의 최적화를 했지만, 정작 내가 구현하고 싶은 기능은 매우 무거워서 제대로 구현하지 못했다. 똑같은 기술이라도 훨씬 가볍게 적용시킬 수도 있고 용량도 줄일 수 있을텐데, 지식이 너무 짧아서 더 공부하고 테스트를 해봐야하지 않나 싶다. 하소연 그래서 괜히 뜬구름 잡는 것처럼 하소연을 조금 부려봤다. 구글링을 통해서 가이드에 나온대로 시도해보기도 하고 내 사이트에서 찾을 수 없는 호환문제가 있어 다른 티스토리로 테스트를 해봤지만 또 그건 잘 된다. 그래서 다시 내가 적용하고 싶은 사이..
thumbnail 티스토리 새글알림 아이콘 이미지 변경하기 새글알림 아이콘변경 시작 티스토리 블로그에서 새글알림은 회색 아이콘으로 표시되어 디자인을 생각하시는 분이라면, 더욱 예쁜 아이콘으로 변경이 가능합니다. 아이콘은 png 파일 혹은 svg로 설정이 가능하며, IE의 경우에는 호환되지 않는 svg보다는 png로 적용시키는 것이 더 좋습니다. 티스토리 게시글 NEW 아이콘 변경! 카테고리 NEW 아이콘 변경 & 아이콘 본 사이트의 경우에는 아이콘 이미지는 위의 사이트에서 공유받아 사용하고 있습니다. 포트폴리오 스킨의 경우에는 위의 방식으로 카테고리 아이콘과 카테고리를 클릭했을 때의 리스트 아이콘으로 치환하여 사용할 수 있습니다. 만약, 위의 경우에도 카테고리 리스트가 수정이 안된다면 아래의 값을 찾아 기존의 아이콘 이미지의 위치나 css의 속성값을 입력해줘야 ..
thumbnail 티스토리 구분선 변경하기 .article_view hr 바로 티스토리 기능 중 하나인 더보기 기능의 디자인을 변경할 수 있다. 본래 코드에다가 CSS를 추가하여 배경이미지로 사용하는 것인데, 같은 다음 플랫폼 서비스 중에 하나인 브런치의 이미지를 추가하여 사용할 수 있다. (이렇게 위의 선이 에디터에서는 그대로 나오지만, 글을 미리보기 하거나 발행하면 다르게 출력된다.) 더보기 배경이미지의 경우, 배경이미지로 사용할만한 외부이미지 링크를 추가하거나, 아니면 위(브런치)의 더보기 이미지를 사용해도 좋다. 현재 본 사이트의 필자가 사용하고 있다.
thumbnail 티스토리 신고버튼 디자인 변경/수정 .ico_report.container_postbtn .postbtn_like .ico_report { background: url(교체할 아이콘이미지) no-repeat; line-height: 30px;background-position: 0px!important;} 티스토리 정책에 의해 신고버튼이 강제적으로 설치되었는데, 강제로 삭제할 경우 티스토리에서 이용제제 등의 불이익을 받을 수 있다. 따라서, 신고버튼을 삭제하거나 숨기는 기능이 아닌 신고버튼 아이콘을 변경하여, 그나마 사이트내의 눈에 띄는 신고버튼 디자인을 조금 아기자기하거나 예쁜 아이콘으로 변경이 가능하다. 매우 간단한 방법으로 변경이 가능한데, 위의 부분을 변경해주면 된다. 이때, 배경이미지에 불러올 외부 링크나 소스 혹은 내부에 아이콘..
thumbnail 티스토리 태그 구분점 제거 자바스크립트(Comma, 쉼표) 티스토리 포럼에 매우 친절하신 분께서 내가 질문한 글에 답변을 해주셨다. 몇 시간동안이나 웹서핑을 하면서 해당 부분을 수정할 수 있는 자바스크립트 소스를 찾아보았으나, 잘 찾아봐도 없었다. 티스토리 클래스 값에 해당 자바스크립트 소스를 활용해서 구분점(,)만 수정하면 되는데, 그걸 못찾아서 결국 도움을 요청했는데 바로 답변을 해주셨다. HTML 위에 위 소스를 추가시키면 바로 적용이 된다. html(comma.replace(/,/g, ''));를 활용하는 것을 하나 더 배우게 되었다. 이것을 응용해서 다른 부분들도 수정을 할 수 있을거라고 생각한다. 이 글을 통해 정말 감사의 말씀을 드리며, 티스토리 태그 부분의 구분점 부분 수정 자바스크립트 소스는 위 소스를 추가하면 바로 적용이 된다. 덕분에 더욱 깔..
thumbnail 최고의 영문폰트 Avenir Next Fontshop 이미 아는 사람들은 아는 최고의 영문폰트라고 하면 Avernir Next를 빠질 수 없다. 기본적으로 유료폰트고 일부 폰트가 외국사이트 무료버전으로 풀린 것이 있어, 그 폰트를 사용해볼 수 있다. 웹사이트의 영어 웹폰트로 사용해도 좋을 만큼 가독성과 타이틀성이 좋은 폰트이다. 한글폰트의 경우, 산돌폰트가 대표적으로 많이 사용되고 있는 유료폰트이기도 한데, 외국 같은 경우에는 수많은 영어폰트가 있다. 그 중에서도 무료로 사용할 수 있는 폰트도 상당히 많고 웹사이트에 최적화된 폰트들도 많다. 폰트를 구입해서 사용하면 되는데, 웹디자이너나 웹개발자라면 여러개의 폰트를 구입할 필요 없이 대표적으로 대중적이면서도 가독성이 좋은 폰트를 우선적으로 구입해서 사용하는 것이 좋다. 유료폰트로 구매했을 때..
thumbnail 티스토리 배경음악 넣기 wikplayer 가장 간단하게 외부 소스를 사용해서 사이트나 티스토리에 배경음악을 설치할 수 있다. 매우 간단하지만 가끔 오류가 나기 때문에 어느정도 수정하면서 사용을 하는 것이 좋은데, 가장 간단하게 사이트에서 설정방법을 통해서 설치가 가능하다. 음악 소스의 경우에는 웹에 업로드 된 파일 소스나 유튜브, 사운드 클라우드를 이용할 수 있는데, 유튜브의 경우에는 가끔 광고음악이 발생할 수 있다. 사운드 클라우드의 경우에는 외부정책으로 인해서 가끔 안되는 경우도 있어 필자의 경우에는 별도의 웹하드에 음악파일을 업로드하고 외부 링크를 통해서 연동을 시켰다. SCM 플레이어와 마찬가지로 디자인 설정이 가능하다. 위와 같이 먼저 스킨을 설정할 수 있는데 기본적으로 Wikplayer에서 제공하는 스킨의 경우에는 디자인이 예쁘지가 ..
thumbnail 색상조합사이트 롤컬러(LOLCOLORS) 색상조합사이트 롤컬러(LOLCOLORS)Curated color palette inspiration. 사이트를 처음 만들거나 할 때, 고민하는 것이 바로 포인트 컬러다. 본 사이트는 기존에 테마에 있었던 블루 컬러를 포인트 컬러로 설정하고 비슷한 컬러로 사이트 분위기에 통일성을 주었다. 웹디자이너 뿐만 아니라 일반 디자이너들도 색상선택에 많은 고민을 한다. 위 사이트에서 사람들이 선호하는 컬러를 찾아볼 수 있고 색상 배합을 찾아볼 수 있다. 사이트를 처음 만들거나 새로운 디자인 프로젝트를 진행할 때, 색상 조합을 찾아볼 수 있는 아주 유용한 사이트이다. 직관적이면서도 색상컬러도 함께 확인할 수 있다. LOLCOLORS
thumbnail [티스토리TIP] 메인슬라이드 마우스 버튼 아이콘 삽입 해당 소스는 Dribbble에서 확인하실 수 있습니다. Also check little different version in attachment. Thanks.Here are code versions too Created by Awesome guys from codepen. SVG version by Mishka Pankvelashvili and CSS version by Ryan MulliganFull presentation on Behance 위 내용을 통해서 SVG 버전과 CSS 버전을 통해 소스를 얻을 수 있으며, 티스토리 HTML 스킨편집을 통해서 원하는 위치에 이 버튼을 삽입할 수 있습니다. CSS/SVG site scroll micro animation (SVG) 버전을 통해 쉽게 적용이 가..
thumbnail 이미지의 대체 텍스트 티스토리의 장점은 다양한 포털사이트의 소유권 등록을 할 수 있고 검색엔진에 등록함으로써 검색엔진최적화를 할 수 있다는 장점이 있다. 물론, 워드프레스 만큼의 검색엔진 우선순위는 아니지만 티스토리를 통해서도 적어도 한국어로 검색되는 검색컨텐츠에 대해서는 워드프레스보다 유리한 점이 있다고 생각한다. 검색에 잘 노출되기 위해서 가장 중요한 것은 무엇보다도 컨텐츠다. 사이트를 최적화시키고 인덱스를 하는 것도 중요하지만, 무엇보다도 로봇이 컨텐츠에 접근했을 때 로봇이 읽기 편한 컨텐츠로 구성하는 것이 중요하다. 잘되는 이미지 검색방법 사실 가장 좋은 방법은 이미지의 파일명을 검색키워드에 맞게 수정해서 업로드를 하는 것이다. 나의 경우에는 이렇게 캡쳐이미지를 활용하는 경우도 많아서 사실 조금 귀찮은 작업이라고 생각..
thumbnail 퍼블리싱과 CSS 퍼블리싱과 CSS사이트를 운영하는 사람은 보통 사업적으로 활용하기 위해서 사이트를 제작하는 경우와 개인 블로그 용도로 사용하려는 사람들로 나뉜다. 대게 블로그의 경우에는 설치형이 아닌 서비스형으로 제공되는 다음블로그(티스토리)와 네이버블로그 외에 몇 가지 서비스형 블로그를 사용할 수 있는데, 독특하게도 워드프레스나 티스토리의 경우에는 제한적으로 사이트를 아름답게 꾸밀 수 있다. 텀블러도 마찬가지로 사이트처럼 꾸밀 수 있으나, 외국 플랫폼이기도 하고 대체적으로 조금 무거운 감이 있어서 국내의 티스토리가 가장 우수하다고 생각된다. 사실 복잡할 것은 없다. 조금만 검색을 해도 인터넷에서 쉽게 알려주는 정보들을 찾아볼 수 있고 인터넷에 널린 소스를 응용하거나 짜집기를 하면 어느정도 그럴듯한 사이트로 편집할 수 ..
thumbnail 링크에 밑줄 없애는 법 [티스토리TIP] 링크에 밑줄 없애는 법간단하게 링크가 걸린 글에 밑줄을 없애는 방법입니다. 기본적으로 링크가 걸리면 밑줄이 생기지만, 요즘은 디자인적으로도 밑줄을 없애는 추세입니다. 링크의 경우 별도 컬러와 볼드처리를 통해서 강조합니다. 링크를 없애는 방법은 CSS 편집창을 열어서 코드를 추가해주면 됩니다. none : 선이 없음line-through : 취소선overline : 글자 위에 선underline : 글자 아래에 선initial : 기본값으로inherit : 부모 요소의 속성값을 상속 받음a { text-decoration: none; } 한 줄을 입력하면 텍스트에 걸린 링크를 없앨 수 있습니다. 복잡한 코드로 적용이 안될 경우에 important를 추가해주면 됩니다.