본문 바로가기

인터넷/티스토리 꾸미기

마우스 클릭 효과 어느 곳을 클릭 할 때마다 효과를! 사람마다 인터넷을 이용할때 습관이 다 다르겠지만 글을 읽을 때 드래그 하는 스타일 이라던가 클릭하면서 본다던가 말이다. 그런 유저들 그리고 사이트 컨셉에 따라서 마우스 클릭시 효과를 주어서 생동감 있게 만들어주는 방법을 알려드리도록 하겠다. 생각보다 매우 쉬우니 가볍게 컨트롤 C 컨트롤 V로 효과를 만들어보도록 하자. 출처 사이트 : https://fdossena.com/?p=html5cool/clickfx/i.frag CSS 코드 HTML 편집 - CSS 탭 - 아래 코드를 복붙 하면 끝. div.clickEffect{ position:fixed; box-sizing:border-box; border-style:solid; border-color:#000000; bo..
TOP 스크롤링 클릭 한번에 위로 스르륵 올라가는 스크롤링 생각보다 늦게 업데이트를 하는거 같은 블로깅이다. 사실 책갈피 태그 또는 넷갈피 태그라고 해서 a name 태그를 통해서 자신의 원하는 위치로 바로 찾아가게 만드는 태그로 할 수 있다. 마치 순간이동 처럼 말이다. 그러나 이번에는 스크립트를 통해 "스르륵" 부드럽게 스크롤링 하여 상단으로 올려주는 방법을 소개하려 한다. (필자의 블로그의 우측하단의 화살표 버튼과 같은 효과를 소개한다) 역시 어렵지 않으니 도전해보시기를 권장한다. 우선 TOP으로 올릴 아이콘을 구하거나 직접 만들어보도록 하자. 보통은 자신의 사이트의 분위기에 맞게 직접 작업한 이미지를 추천하지만 어렵다면 무료이미지 사이트에서 쓸만한 것들을 찾으면 되겠다. 그것마저 귀찮으신 분들을 위해 필자가 작업..
티스토리 스킨 뭐쓸까? 고민되는 스킨선택 블로그를 시작할때 기본적으로 어떤 것을 블로깅을 하고 가꿔나갈지 충분히 고민하고 시작하는 것이 좋다. 그냥 아무거나 해보자 라는 식의 블로그는 오래가지도 못하고 스스로 지쳐 금방 접기 마련이다. 그리고 자신의 주제에 맞는 블로그 스킨을 고르는 것 또한 아주 중요하다. 내가 쓴 정보들을 잘 전달해주는 역활을 하는 스킨! 이번에는 많은 분들이 고민하고 있는 스킨 선택에 대해서 웹디자이너가 보는 적절한 선택에 대해서 정리하고자 한다. 블로그를 시작하는 분들에게 조금이나마 참고가 되길 바라며 블로깅을 시작한다. 참고로 이번 블로깅은 온전히 티스토리에서만 제공하는 스킨으로만 추천해드리며 추후 기회가 된다면 유저무료배포, 유료배포 등으로 나눠서도 한번 추천해보도록 하겠다. 브랜드 사이트 & 전문(..
스크롤 인디케이터 만들기 스크롤바를 최상단 고정하기 인디케이터(Indicator)? 인디케이터가 무엇이냐? 하면 사전으로는 이렇다. (일의 현황·사정 변화 등을 나타내는) 지표. 그렇다 지금 필자의 블로그에 적용된 상단에 스크롤을 하면 상단에 게이지가 쌓이며 어느정도 스크롤링이 됬는지 보여지는 것이다.(물론 메뉴에도 쓰이고 다양하게 쓰인다) 스크롤바가 있는데 이게 굳이 왜 필요하느냐? 그렇다 굳이는 필요 없다. 그러나 꾸미기에 관심이 있는 분들에게 혹(?)할만한 아이템이라고 생각해서 블로깅을 하는 것이다. 따지고 보면 꾸미기 상관없이 그냥 블로깅을 해도 된다. 이것은 자기만족이라고 할 수 있다. 좀 깊이 들어가면 UX나 UI적으로는 충분히 쓸만한 아이템이라 생각한다. 과하지만 않는다면 말이다. 최근 사이트들이 많이 사용중이기도(..
티스토리 게시글 NEW 아이콘 변경! 게시글 리스트에 NEW 아이콘을 변경하자! 최근 카테고리의 NEW 아이콘은 변경되었지만 리스트에 NEW 아이콘 변경이 안되서 물어보시는 분들이 있어 블로깅을 한다. 필자는 리스트에 NEW 아이콘이 원래 없는 방식이라 생각을 못했는데 Square(반응형) 스킨을 사용하시는 분들에게 도움이 될만한 정보라고 생각한다. 다른 분들도 사실 요청이 있었는데 필자가 확인해볼수 없는 스킨이라 이번 블로깅을 잘 참고하면 충분히 하실 수 있지 않을까(…) 생각한다. 우선 카테고리의 NEW 아이콘이 변경되지 않았다면 링크를 타고 선행작업을 먼저 하시고 오시길 추천한다. 꼭 먼저 보고 오시길! 이쪽으로 이 부분에서 50% 아쉬워 하시는 분들이 계실분이 많을 것 같다. 카테고리 NEW 아이콘을 보고 왔다면 그렇다면 /body ..
웹사이트 로딩바 만들기 티스토리에 로딩화면을 만들어보자. 우선 이 로딩화면을 추가 할때 단점부터 이야기 하자면 로딩이 필요 없는 부분(?)에서도 로딩화면이 돌기 때문에 사실상 로딩이 더 길어지는 것이 사실이다. 물론 체감상 그리 큰 차이는 아니지만 수치적으로는 그렇다. 즉 바로 보여도 되는 페이지도 로딩화면이 돌기 때문에 그런 단점이 생기는 것인데 로딩 자체 역시 그리 길지 않기 떄문에 체감이 크지 않다고 말할 수 있다. 여하튼 장점과 단점이 확실하기에 이 내용을 포스팅을 할까 말까 하다가 선택은 여러분의 몫으로 남기고 로딩화면이 필요하신분들에겐 좋은 자료가 될 것 같아서 포스팅 한다. 굉장히 간단하니 쉽게 할 수 있을 것이다. HEAD와 /HEAD 사이에 추가 필자가 사용한 로딩화면 CSS 코드다. 여기에서 포인트는 .loa..
스크롤바 꾸미기 티스토리 스크롤바를 꾸며보자! 예전부터 종종 스크롤바를 꾸며진 사이트를 볼 수가 있었다. 사실 스크롤바를 잘 보지 않다보니 깜빡 잊기도 하는데 지금 한번 필자의 블로그 스크롤을 보면 바뀌어져 있는 것을 볼 수 있을 것이다. 작은 디테일 부분을 꾸밀수록 사이트의 완성도를 올리는 것이다. 필자는 가급적 적은 시간을 들여 최대한의 효과를 줄 수 있는 Tip들을 소개하려고 하는데 바로 이 방법 역시 간단한 방법으로 최대의 효과를 볼 수 있을 것으로 보인다. 그럼 한번 방법을 알아보도록 하자. 필자의 스크롤 바 CODE 여기서 자신에게 맞게 바꾸기 위해서 하나씩 설명해 보자면 width 부분은 스크롤 바의 너비다. track은 경주 트랙처럼 스크롤바가 지나다니는 길을 말한다. box-shadow 를 통해 트랙의 ..
구글 애드센스 통과 기준 구글애드센스 광고배너 필자가 티스토리를 하면서 느낀건 정말 많은 사람들이 구글애드센스를 달기 위해서 티스토리를 하고 있는 것 같다. 그것이 나쁘다고는 생각은 하지 않는다. 다만 광고배너만을 위해 별 내용없는 블로깅을 위해 애쓰는 건 애드센스에도 본인에게도 아무 도움이 안된다고 말하고 싶다. 우선 제목과 같이 애드센스 통과 기준에 대해서 궁금할만한 점을 알려드리도록 하겠다. 이는 필자가 2018년 6월 최근에 걸친 내용을 토대로 하니 많은 참고가 되길 바란다. 아마 대부분 이러한 화면때문에 이 블로깅을 보실 것 같다. 이제 궁금증은 애드센스 통과 기준이 무엇인가 일것이다. 필자가 구글애드센스를 달게 된 포스팅 갯수 등을 말씀드리자면 포스팅은 55개 궁금해 하시는 글자수는 1,000자는 넘는것도 아닌것도 많..
티스토리 & 네이버 이웃추가 버튼만들기 티스토리에 이웃추가? 블로그의 재방문과 방문자에게 편리를 제공하는 것은 기본이다. 요즘 티스토리의 상단 메뉴가 없는 스킨이 많아 짐에 따라 이웃추가 하기가 귀찮아졌다. (티스토리를 아예 처음하는 사람들은 이웃추가가 아예 없는줄 아는 경우도 있다.) 이웃추가를 하기 위해서는 관리자에서 "내가링크"를 통해 링크를 추가해야 한다. 그마저도 주소도 직접 입력해야 한다. 이러한 형식은 이웃추가라는 생각도 못하게 된다. 정확히는 이웃추가가 아니고 링크추가 정도되겠다. 이런 부분들을 볼때 아직도 티스토리는 갈길이 멀다고 볼 수 있다(…) 그래서 유저가 직접 커스트마이징을 해야한다. 티스토리 상단메뉴가 있는 스킨메뉴 "이블로그를" 메뉴를 누르면 추가된다. 보통은 이런식으로 해야한다. 1. 티스토리 이웃추가 버튼 만들기..