구글 크롬 광고 팝업 차단 확장프로그램 Adblock Plus

원래 내블로그에도 구글 애드센스 광고를 설치하고 있기에..광고 차단에 대해서는 별 특별한 생각 없이 사용을 하고 있습니다. 오늘 코드를 찾다가 어떤 사이트를 방문을 했는데;; 페이지를 새로고침 하고 클릭 할 때마다아예 새 창에서 광고 팝업이 뜨면서 자꾸 화면을 가리길래..(성인 소개팅 광고가 자꾸 뜨더라구요 ㅡㅡ;;) ㅡㅡ짜증나서.. 광고 차단 확장프로그램을 알아보았습니다... [크롬 설정]→[확장 프로그램]→[더 많은 확장 프로그램 다운로드]를 클릭해서 들어가줍니다. 바로가기 URL 주소는https://chrome.google.com/webstore/category/extensions?hl=ko 그리고 확장 프로그램으로 adblock 을 검색 해줍니다.바로가기 URL 주소https://chrome.go..

IT Review/Site,Social,Tech 2016. 3. 21. 02:34

CCZ-CROSS 스킨 상단 site-header 높이 조절하기

예전에 꾸미기 상단헤더 꾸미기 관련해서 간단하게 소개한 적이 있는데 본격적으로 상단 헤더 부분을 수정하는 방법에 대해서 알아보겠습니다. 그중 가장 하이라이트!! 상단 헤더부분의 높이를 변경하는 방법에 대해서 소개해보겠습니다. 우선 CCZ-CROSS 스킨의 site-header 기본 높이는 40px 모바일은 50px 입니다. 모바일화면에서는 적당하지만 PC 화면에서는 조금 작다고 생각되어서 늘려보도록 하겠습니다. 반응형웹이라서 생각보다 조절해야하는 부분이 많아서 잘보고 따라오셔야합니다!! #1 site-header PC화면 40px →50px 으로 늘리기 (바로가기) #2 모바일 화면 50px → 40px로 줄이기 (바로가기) 본격적으로 시작해보자 #0 인트로 - 사전 지식 반응형웹페이지에서 PC화면과 모..

Tistory Blog/Html,Css 편집 2016. 3. 20. 14:37

[HTML]블로그 스킨 캐시 무시하고 페이지 로딩하는 방법

블로그 스킨을 수정하다 보면 javascript 파일과 CSS 파일을 수정할 일이 많습니다. 하지만 브라우저 캐싱(웹 캐시) 때문에 파일을 수정해도 즉시 변경된 사항이 보이지 않는 경우가 많습니다. 예전에도 몇가지 캐시를 삭제하는 방법에 대해서 알려드린 적이 있습니다. 캐시 무시하고 페이지 로드하기 외부 JS파일과 CSS 파일을 수정하면 캐시를 삭제를 해줘야지 정상적으로 바뀌는 것을 확인 할 수 있습니다 Ctrl + ⇧Shift + Delete키를 눌러서 삭제를 하고 봐도.. 로고나 기타 이미지파일은 쉽게 변경되는데 js나 CSS파일은 방법을 해도 바로바로 변하지 않는게 보입니다. 아마 티스토리 서버의 캐시(?) 프록시 캐시(?) 때문인 것으로 보이는데 그럴경우에는 두가지 해결방법이 있습니다. 캐시_무시..

Tistory Blog/Html,Css 편집 2016. 3. 19. 00:42

특정 페이지,카테고리,주소에서만 나오는 콘텐츠(숨기기,class추가)

티스토리 블로그를 하다보면 특정 영역에서 콘텐츠를 포함하거나 제외 해야하는 경우가 발생합니다.메인 화면이라든지 특정 게시글, 아님 특정 게시판, 특정 카테고리 등등 워드프레스의 경우에는 카테고리 ID와 슬러그를 이용해서 분류하고 php수정으로 쉽게 설정이 가능하지만 티스토리 블로그는 php지원을 하지 않고 skin.html 하나로만 만들기 때문에 설정하기는 쉽지 않습니다. 1. 특정 페이지, 카테고리, 주소 에서만 나오는 콘텐츠와2. 특정 카테고리안에 있는 글에서만 나오게 하는 방법★★을 알아보겠습니다. 1. 특정 페이지, 주소에서만 나오게 하기 사실 이 방법은 꽤 많이 강좌나 포스팅으로 알려져 있습니다.티스토리 블로그를 메인화면을 티에디션이 아닌 다른 형태로 구현하기 위해서 사용할 때도 많이 사용하고방..

Tistory Blog/Html,Css 편집 2016. 3. 19. 00:01

티스토리 블로그 다음글 이전글 버튼 만들기(직접디자인,진행상황)

안녕하세요. 오늘은 강좌가 아닌 그냥 진행상황 포스팅입니다.생각보다 시간이 오래 걸리네요. ㅠ_ㅠ 이유는 아래 있습니다. 블로그 꾸미기를 하다가 -ㅠ- 이전글 다음글 버튼을 집어려고 했습니다. 초기 디자인은 Readiz님의 fastboot 스킨에서 참고해서 만드려고 했습니다. 제일 초기 디자인 Arrow 버튼 및에 단축키 문구를 추가해서 만드려고 했죠. 티스토리 단축키... 티스토리 블로그는 자체 제공하는 몇가지 단축키가 있습니다. Q: 관리자 (Admin),A: 이전 글,S: 다음 글,Z: 최근에 올라온 글,X: 최근에 달린 댓글,C: 최근에 받은 트랙백 Z, X, C 는 제대로 작동안하는 것 같네요... 근데 그냥 문구를 적으니 뭔가 허접해보여서.. 구글링을 하게 됩니다. 이미지를 빼오기 위해서+_+..

Tistory Blog/Html,Css 편집 2016. 3. 17. 00:02

[SVG]글씨 써지는 효과 코드로 만들기 (jQuery DrawSvg || pure CSS)

안녕하세요. 오늘은 움직이는 로고만들기에 대해서 알아보겠습니다.기존에 로고에 관련해서는 여러개의 포스팅을 진행 한적이 있습니다. ※ 이 것을 먼저 보고 오시면 도움이 이글을 이해하는데 도움이 됩니다. http://cocosoft.kr/386 - 블로그 로고 벡터이미지 svg파일로 만들기 및 사용법일러스트로 벡터 이미지 path 선따는 법을 알고 오시면 정말 재밌습니다. 인트로 우선 저는 웹언어 웹코딩 웹디자인 전문ㅠ 전공자도 아니고 아예 문외한 비전공자입니다.그래서 지식의 깊이가 얇으며, 부족한 점도 많지만.. 잘못 설명하는 점도 있을 수있지만 ㅠ_ㅠ 양해를 해주시고봐주시면 좋을 것 같네요. 사실 지금 글을 적으면서도 이러한 방법으로 하는게 맞는 것인지는 모르겠지만최대한 아는 방법을 설명하겠습니다!! 암..

Tistory Blog/Html,Css 편집 2016. 3. 15. 01:08

[jQuery]티스토리 배경화면 여러개 바꾸기 페이드효과 (background change fade)

오늘도 갑자기 쓸데없는게 생각나서.. 우연히 배경을 검색하다가 우주배경 예쁜게 너무많아서 ㅠ_ㅠ 동시에 여러개의 배경을 사용하고 싶어서 포스팅 작성을 시작하게 되었습니다.... 오늘의 목표 여러개의 배경화면은 자동으로 페이드인 페이드아웃 효과를 주면서 교체하는 방법을 알아보겠습니다. 예쁘쥬?? 사실 요즘 애플스타일 같은 페이지가 많이 나타나면서.. 쭉스크롤을 내리면 배경이 바뀌는 스크립트는 많은데 의외로 페이드인 페이드아웃으로 배경이 계속 바뀌는 것은 잘 없더라구요. 우선 PURE CSS!! 아이러브 퓨어시에스에스!!!♡ 로 하는 방법도 있긴합니다. @keyframes background-changer { 0%, 100% { background-image: url(./images/배경1.jpg); } 5..

Tistory Blog/Html,Css 편집 2016. 3. 14. 02:32

티스토리 블로그 꾸미기(블로그 아이콘 파비콘, 상단헤더, 주소창 색상)

티스토리 블로그 꾸미기(주소창 색상, 블로그 아이콘, 상단네비바)오늘 간단하게 아이콘만 제작하려다가 생각 보다 ㅡㅡ;;; 많은 것을 바꾸어 버렸습니다.. 처음시작은.. 블로그 로고를 교체하려고 했습니다.See the Pen 코코소프트 로고2 by JCM (@cocosoft) on CodePen. 하지만 저 것으로 바꾸기에는 외부스크립트도 너무 많이 필요하고귀찮아서 로고 변경을 포기하는데... 갑자기 ㅡㅡ!!!!!!!! 아이콘이 맘에 들지 않아서 교체를 마음 먹습니다. 첫 번째 블로그 아이콘 변경 아이콘은 설정 기본정보에서 교체가 가능합니다. 주로 댓글 작성에서 아이콘 표시가 됩니다. 사실 맨처음에는 아무런 색이나, 배경 없이 타이포그래피 만 사용해서 아이콘을 만들었습니다. 그러던중 댕댕콘이라는 것을 보게..

Tistory Blog/Html,Css 편집 2016. 3. 13. 00:35

블로그 꾸미기 프리로더 및 hover 효과

진짜 진짜 마지막 꾸미기.. ㅠ_ㅠ 더이상은.. NAVER 너무중독이다.. ㅠ_ㅠ 사실 오늘은 너무많은 font-family 사용이되어있어 그 것을 줄여주고 하단 썸네일 hover 효과에 문제가 있어서 수정을 하는 작업을 진행하다가 갑자기 예쁜 프리로더를 추가하고 싶어 설치를 하였는데... 막상 달아보니 너무 난잡했다. 또 페이지 로드가 빨라서 그런지 사각형이 다돌기도 전에 잠깐 나왔다 사라져서.. 처음 방문한 사람이 보면 이게 뭐지(?) 라고 생각할 정도라서.. 결국에는 sub info에 텍스트로 된 로딩 문구를 추가했다 커서형태(로딩중...l)로 만들려다보니 생각보다 귀찮았는데 그냥 하단바(로딩중 _ )로 추가하니 깔끔하게 완료가 되었다. See the Pen 사이트 로딩 코드 by JCM (@coc..

Tistory Blog/Html,Css 편집 2016. 3. 11. 19:30

블로그 로고 벡터이미지 svg파일로 만들기 및 사용법

오늘은 블로그 로고작업을 SVG로 교체하는 작업을 다시 했습니다. 로고파일이 원래 455x299 사이즈의 png 파일인데...이게 사이즈가 크게 해서 로고를 만들 때는 이미지가 깨지지 않는데..너무 작은 부분에 로고를 사이즈를 줄여서 넣으려고 하면 계단현상 즉 이미지가 깨져버리는 현상이 발생합니다. 그래서 이런식으로 그냥 웹폰트를 불러와서 꾸미고 있었죠. 괜히 저폰트 사용도 많이 안하는데.. 계속 있는 것도 보기 안좋고한글 로고가 있는데 영문을 사용하는 것도 맘에 들지 않아서 벡터이미지인 svg 파일로 만들어보기로 했습니다. 벡터이미지와 레스터이미지를 간단하게 알아보자 벡터이미지의 가장큰 장점은 뭐 이미지사이즈를 조절해도 깨지지않고 그대로를 보여줍니다.레스터이미지는 픽셀이고 벡터는 path 선으로 나타나..

Tistory Blog/Html,Css 편집 2016. 3. 10. 01:48