인터넷/티스토리 꾸미기
-
티스토리에 로딩화면을 만들어보자. 우선 이 로딩화면을 추가 할때 단점부터 이야기 하자면 로딩이 필요 없는 부분(?)에서도 로딩화면이 돌기 때문에 결국 로딩이 더 길어지는 것이 사실이다. 물론 체감상 그리 큰 차이는 아니지만 수치적으로는 그렇다. 즉 바로 보여도 되는 페이지도 로딩화면이 돌기 때문에 그런 단점이 생기는 것인데 로딩 자체 역시 그리 길지 않기 떄문에 체감이 크지 않다고 말할 수 있다. 여하튼 장점과 단점이 확실하기에 이 내용을 포스팅을 할까 말까 하다가 선택은 여러분의 몫으로 남기고 로딩화면이 필요하신분들에겐 좋은 자료가 될 것 같아서 포스팅 한다. 굉장히 간단하니 쉽게 할 수 있을 것이다. HEAD와 /HEAD 사이에 추가 필자가 사용한 로딩화면 CSS 코드다. 여기에서 포인트는 .load..
웹사이트 로딩바 만들기티스토리에 로딩화면을 만들어보자. 우선 이 로딩화면을 추가 할때 단점부터 이야기 하자면 로딩이 필요 없는 부분(?)에서도 로딩화면이 돌기 때문에 결국 로딩이 더 길어지는 것이 사실이다. 물론 체감상 그리 큰 차이는 아니지만 수치적으로는 그렇다. 즉 바로 보여도 되는 페이지도 로딩화면이 돌기 때문에 그런 단점이 생기는 것인데 로딩 자체 역시 그리 길지 않기 떄문에 체감이 크지 않다고 말할 수 있다. 여하튼 장점과 단점이 확실하기에 이 내용을 포스팅을 할까 말까 하다가 선택은 여러분의 몫으로 남기고 로딩화면이 필요하신분들에겐 좋은 자료가 될 것 같아서 포스팅 한다. 굉장히 간단하니 쉽게 할 수 있을 것이다. HEAD와 /HEAD 사이에 추가 필자가 사용한 로딩화면 CSS 코드다. 여기에서 포인트는 .load..
2018.08.03 -
티스토리 스크롤바를 꾸며보자! 예전부터 종종 스크롤바를 꾸며진 사이트를 볼 수가 있었다. 사실 스크롤바를 잘 보지 않다보니 깜빡 잊기도 하는데 지금 한번 필자의 블로그 스크롤을 보면 바뀌어져 있는 것을 볼 수 있을 것이다. 작은 디테일 부분을 꾸밀수록 사이트의 완성도를 올리는 것이다. 필자는 가급적 적은 시간을 들여 최대한의 효과를 줄 수 있는 Tip들을 소개하려고 하는데 바로 이 방법 역시 간단한 방법으로 최대의 효과를 볼 수 있을 것으로 보인다. 그럼 한번 방법을 알아보도록 하자. 필자의 스크롤 바 CODE 여기서 자신에게 맞게 바꾸기 위해서 하나씩 설명해 보자면 width 부분은 스크롤 바의 너비다. track은 경주 트랙처럼 스크롤바가 지나다니는 길을 말한다. box-shadow 를 통해 트랙의 ..
스크롤바 꾸미기티스토리 스크롤바를 꾸며보자! 예전부터 종종 스크롤바를 꾸며진 사이트를 볼 수가 있었다. 사실 스크롤바를 잘 보지 않다보니 깜빡 잊기도 하는데 지금 한번 필자의 블로그 스크롤을 보면 바뀌어져 있는 것을 볼 수 있을 것이다. 작은 디테일 부분을 꾸밀수록 사이트의 완성도를 올리는 것이다. 필자는 가급적 적은 시간을 들여 최대한의 효과를 줄 수 있는 Tip들을 소개하려고 하는데 바로 이 방법 역시 간단한 방법으로 최대의 효과를 볼 수 있을 것으로 보인다. 그럼 한번 방법을 알아보도록 하자. 필자의 스크롤 바 CODE 여기서 자신에게 맞게 바꾸기 위해서 하나씩 설명해 보자면 width 부분은 스크롤 바의 너비다. track은 경주 트랙처럼 스크롤바가 지나다니는 길을 말한다. box-shadow 를 통해 트랙의 ..
2018.07.21 -
구글애드센스 광고배너 제가 티스토리를 하면서 느낀건 정말 많은 사람들이 구글애드센스를 달기 위해서 티스토리를 하고 있는 것 같아요. 그것이 나쁘다고는 생각은 하지 않지만 광고배너만을 위해 별 내용없는 블로깅을 위해 애쓰는 건 애드센스에도 본인에게도 아무 도움이 안된다고 말하고 싶습니다. 우선 제목과 같이 애드센스 통과 기준에 대해서 궁금할만한 점을 알려드릴게요 제가 2018년 6월 최근에 걸친 내용을 토대로 하니 많은 참고가 되셨으면 좋겠네요! 이제 궁금증은 애드센스 통과 기준이 무엇인가 일텐데.. 구글애드센스를 달게 된 포스팅 갯수를 말씀드리자면 포스팅은 55개 궁금해 하시는 글자수는 1,000자는 넘는것도 아닌것도 많았습니다. 다만 그 정보에 필요한 이야기를 다 담으려고 노력했습니다! 또 물어보는 이..
구글 애드센스 통과 기준구글애드센스 광고배너 제가 티스토리를 하면서 느낀건 정말 많은 사람들이 구글애드센스를 달기 위해서 티스토리를 하고 있는 것 같아요. 그것이 나쁘다고는 생각은 하지 않지만 광고배너만을 위해 별 내용없는 블로깅을 위해 애쓰는 건 애드센스에도 본인에게도 아무 도움이 안된다고 말하고 싶습니다. 우선 제목과 같이 애드센스 통과 기준에 대해서 궁금할만한 점을 알려드릴게요 제가 2018년 6월 최근에 걸친 내용을 토대로 하니 많은 참고가 되셨으면 좋겠네요! 이제 궁금증은 애드센스 통과 기준이 무엇인가 일텐데.. 구글애드센스를 달게 된 포스팅 갯수를 말씀드리자면 포스팅은 55개 궁금해 하시는 글자수는 1,000자는 넘는것도 아닌것도 많았습니다. 다만 그 정보에 필요한 이야기를 다 담으려고 노력했습니다! 또 물어보는 이..
2018.06.29 -
티스토리 카테고리 NEW 아이콘 변경 이전에 카테고리 아이콘과 게시물 숫자를 표시하는 방법을 블로깅 했는데 이번에는 NEW 아이콘을 변경하는 방법을 알려드릴려고 한다. 기존의 회색의 NEW아이콘은 디자이너로서는 솔직히 이해할 수 없는 아이콘이긴 했다. 물론 애초에 NEW아이콘이 나오지 않게 설정된 점을 생각해보면 그럴만한 뭔가 이유가 있는 것 같긴 한데 여전히 이해는 안간다. 아무튼 먼저 자신이 원하는 NEW 아이콘을 티스토리 파일업로드를 통해 올려두도록 하자. 파일 업로드는 관리자 모드 - 스킨편집 - HTML편집 - 파일업로드를 통해 올리면 된다. 그럼 이제 아이콘을 변경할 코드를 넣어야 한다. 애초에 카테고리에 아이콘이 없는 분들은 아이콘이 나오게 하는 설정을 해야하므로티스토리 카테고리 아이콘 표시..
카테고리 NEW 아이콘 변경 & 아이콘티스토리 카테고리 NEW 아이콘 변경 이전에 카테고리 아이콘과 게시물 숫자를 표시하는 방법을 블로깅 했는데 이번에는 NEW 아이콘을 변경하는 방법을 알려드릴려고 한다. 기존의 회색의 NEW아이콘은 디자이너로서는 솔직히 이해할 수 없는 아이콘이긴 했다. 물론 애초에 NEW아이콘이 나오지 않게 설정된 점을 생각해보면 그럴만한 뭔가 이유가 있는 것 같긴 한데 여전히 이해는 안간다. 아무튼 먼저 자신이 원하는 NEW 아이콘을 티스토리 파일업로드를 통해 올려두도록 하자. 파일 업로드는 관리자 모드 - 스킨편집 - HTML편집 - 파일업로드를 통해 올리면 된다. 그럼 이제 아이콘을 변경할 코드를 넣어야 한다. 애초에 카테고리에 아이콘이 없는 분들은 아이콘이 나오게 하는 설정을 해야하므로티스토리 카테고리 아이콘 표시..
2018.05.30 -
드래그 컬러 변경하기 명품의 힘은 디테일에 있다는 말이 있다. 디자인역시 마찬가지고 티스토리 역시 그렇다. 물론 디테일을 챙긴다라는건 힘들고 어렵고 또 귀찮은 일이다. 하지만 힘들지 않고 쉽게 디테일을 챙길 수 있는 방법 중 하나인 바로 마우스 드래그 컬러를 설정해 주는 것이다. 우리는 글을 읽을 때 자연스럽게 드래그를 하게 된다. 기본 설정된 파란색 컬러가 대표적인데 자신의 티스토리 설정에 맞게 컬러를 변경한다면 사용자가 드래그 하면서 글을 편하게 읽을 수 있게 할 수 있다. 지금 드래그 이 사이트의 드래그 컬러를 보면 분명 다를 것이다. 드래그 컬러 변경 CSS ::selection { background:#3db39e; color: #fff; text-shadow: none; } ::-moz-sel..
마우스 드래그 컬러 바꾸기드래그 컬러 변경하기 명품의 힘은 디테일에 있다는 말이 있다. 디자인역시 마찬가지고 티스토리 역시 그렇다. 물론 디테일을 챙긴다라는건 힘들고 어렵고 또 귀찮은 일이다. 하지만 힘들지 않고 쉽게 디테일을 챙길 수 있는 방법 중 하나인 바로 마우스 드래그 컬러를 설정해 주는 것이다. 우리는 글을 읽을 때 자연스럽게 드래그를 하게 된다. 기본 설정된 파란색 컬러가 대표적인데 자신의 티스토리 설정에 맞게 컬러를 변경한다면 사용자가 드래그 하면서 글을 편하게 읽을 수 있게 할 수 있다. 지금 드래그 이 사이트의 드래그 컬러를 보면 분명 다를 것이다. 드래그 컬러 변경 CSS ::selection { background:#3db39e; color: #fff; text-shadow: none; } ::-moz-sel..
2018.05.11 -
마우스커서를 변경해보자 지금 이 티스토리의 마우스 커서를 보면 "어? 내 시스템 마우스 커서거 아니네?" 라고 할 것이다. 이 마우스 커서는 이 블로그에서만 작동되는 것이고 과한 커서만 아니라면 유저에게 새로운 경험을 하게 해줄 수 있다. 그리고 사이트의 퀄리티도 올릴수 있다. 그것도 아주 간단하게 할 수 있다. 우선 다양한 마우스커서를 제공하는 사이트를 방문해 보도록 하자. 커서포유 바로가기 다양한 마우스 커서를 제공하고 있다 - 커서 4유 사이트에 가면 왼쪽에 다양한 카테고리가 있다. 너무 많기 때문에 즐거운 고민을 하며 골라보도록 하자. 참고로 필자는 카테고리 Cursors/Pointers 에서 2번탭에 가면 있는 마우스 커스를 사용해봤다. 나중에 질리게 되면 다른 마우스를 사용할 수도 있다. 원하..
티스토리 마우스 커서 바꾸기마우스커서를 변경해보자 지금 이 티스토리의 마우스 커서를 보면 "어? 내 시스템 마우스 커서거 아니네?" 라고 할 것이다. 이 마우스 커서는 이 블로그에서만 작동되는 것이고 과한 커서만 아니라면 유저에게 새로운 경험을 하게 해줄 수 있다. 그리고 사이트의 퀄리티도 올릴수 있다. 그것도 아주 간단하게 할 수 있다. 우선 다양한 마우스커서를 제공하는 사이트를 방문해 보도록 하자. 커서포유 바로가기 다양한 마우스 커서를 제공하고 있다 - 커서 4유 사이트에 가면 왼쪽에 다양한 카테고리가 있다. 너무 많기 때문에 즐거운 고민을 하며 골라보도록 하자. 참고로 필자는 카테고리 Cursors/Pointers 에서 2번탭에 가면 있는 마우스 커스를 사용해봤다. 나중에 질리게 되면 다른 마우스를 사용할 수도 있다. 원하..
2018.05.04 -
티스토리 꾸미기 - 컨텐츠 페이드 인 지금 현재 블로그를 보면 클릭해서 들어가는 컨텐츠들이 페이드 되어 보여질 것이다. 컨텐츠를 페이드 시키게 되면 다시한번 사용자에게 컨텐츠에게 재 집중시키게 할 수 있는 좋은 방법이라 생각이 든다. 너무 조금만 느리게 설정이 되도 바로 지루함과 답답함을 느끼게 되지만 0.3~0.5초 정도의 페이드라면 충분히 사용자를 편하게 해줄수 있는 좋은 기법이다. 왠지 어려울것 같지만 생각보다 굉장히 간단한 방법으로 할 수 있다. 한번 알아보도록 하자. 복사할 CSS 코드 - 반응형 #1스킨용 #dkContent { animation: fadein 1s; -moz-animation: fadein 1s; /* Firefox */ -webkit-animation: fadein 1s; ..
티스토리 컨텐츠 페이드 시키기티스토리 꾸미기 - 컨텐츠 페이드 인 지금 현재 블로그를 보면 클릭해서 들어가는 컨텐츠들이 페이드 되어 보여질 것이다. 컨텐츠를 페이드 시키게 되면 다시한번 사용자에게 컨텐츠에게 재 집중시키게 할 수 있는 좋은 방법이라 생각이 든다. 너무 조금만 느리게 설정이 되도 바로 지루함과 답답함을 느끼게 되지만 0.3~0.5초 정도의 페이드라면 충분히 사용자를 편하게 해줄수 있는 좋은 기법이다. 왠지 어려울것 같지만 생각보다 굉장히 간단한 방법으로 할 수 있다. 한번 알아보도록 하자. 복사할 CSS 코드 - 반응형 #1스킨용 #dkContent { animation: fadein 1s; -moz-animation: fadein 1s; /* Firefox */ -webkit-animation: fadein 1s; ..
2018.05.03 -
다음 애드핏은 역사속으로… 하지만 카카오 애드핏으로 변경! 다음에서는 운영하던 애드핏이 카카오로 이전되었네요. 운영을 제외하고 특별히 달라진건 없네요 :) 카카오 애드핏이란? 카카오 애드핏은 PC/모바일 버전 사이트에서 노출되는 수익성 배너 플랫폼이다. 보통 티스토리 블로거를 운영하는 분들이 구글 애드센스에서 광고승인을 받기전 거쳐가는 플랫폼이라고 본다. 필자는 꼭 그럴 생각은 없지만 왠지 분위기 상으로는 필자도 그렇게 해야만 할것 같은 분위기 인것은 사실이다. 아무래도 PC버전 광고가 안된다는 점이 가장 큰 문제점이 아닌가 싶다. 어쩌면 티스토리 보다 앱에 띄우는 광고 용으로 적합할 수 있다. 이번 블로깅에는 티스토리 모바일 버전에 애드핏을 적용하는 블로깅을 해보도록 하겠다. 애드핏 플랫폼을 이용하기 ..
카카오 애드핏다음 애드핏은 역사속으로… 하지만 카카오 애드핏으로 변경! 다음에서는 운영하던 애드핏이 카카오로 이전되었네요. 운영을 제외하고 특별히 달라진건 없네요 :) 카카오 애드핏이란? 카카오 애드핏은 PC/모바일 버전 사이트에서 노출되는 수익성 배너 플랫폼이다. 보통 티스토리 블로거를 운영하는 분들이 구글 애드센스에서 광고승인을 받기전 거쳐가는 플랫폼이라고 본다. 필자는 꼭 그럴 생각은 없지만 왠지 분위기 상으로는 필자도 그렇게 해야만 할것 같은 분위기 인것은 사실이다. 아무래도 PC버전 광고가 안된다는 점이 가장 큰 문제점이 아닌가 싶다. 어쩌면 티스토리 보다 앱에 띄우는 광고 용으로 적합할 수 있다. 이번 블로깅에는 티스토리 모바일 버전에 애드핏을 적용하는 블로깅을 해보도록 하겠다. 애드핏 플랫폼을 이용하기 ..
2018.05.02