[CSS]티스토리 공식 반응형웹스킨#2 아이콘 플러그인 중복 문제 수정

안녕하세요. 오늘은 티스토리 공식 반응형 웹스킨#2 아이콘 플러그인 중복 문제를 수정해보겠습니다. 플러그인 까지 생각을 안했거나, 깜빡하고 지나간 것 같아보이네요. 댓글 및 방명록 사람아이콘이 있지만. ㅠ_ㅠ 기존의 플러그인과 같이 사용하면 중복으로 뜨게됩니다. 우선, 티스토리는 플러그인을 통해 아이콘을 사용 할 수 있습니다. [환경설정] - [기본정보] 에서 아이콘을 설정하고 [플러그인 설정] 에 들어가서 아이콘 사용 설정을 해주면 됩니다.[64x64px 사용을 권장합니다.]그런데 확인을 해보니 ㅡㅡ;;;;;;아이콘이 중복해서 나타나는 문제가 발생하네요...;;;; 이것을 깔끔하게 고쳐보겠습니다. [HTML/CSS] 편집에 들어가 줍니다. 스킨 수정전에는 꼭 스킨 저장을 하시고 문제가 발생시 불러오면 ..

Tistory Blog/Html,Css 편집 2016. 3. 31. 00:05

[jQuery] 애드센스 광고차단(Adblock)시 알림창 만들기(특정 클래스 제외시)

안녕하세요. 특정 클래스 제외 하는 방법을 찾다가 재밌는 코드를 발견해서 소개를 해드릴가 합니다. 아마 애드센스 광고를 설치하는 분들에게는 도움이 될 것 같네요.(ㅠ_ㅠ 임시저장이 날라가버려서 다시 작성하는 글이네요.. 아오 ㅠ_ㅠ) 바로!! 애드센스 광고 차단시 알림창 만들기 적용 방법은 간단합니다.우선 본인의 광고 코드를 .adsense-area 클래스명의 div 태그로 감싸줍니다. 클래스명은 본인이 수정해도 상관없습니다. 본인의 애드센스 광고 code 광고를 본문 상단, 본문 하단, 사이드바 총 3개를 설치 했다면전부 다 할 필요는 없고 본문 상단 광고에만 작업을 해주는 것이 가장 좋습니다.접속하자 마자 바로 보이니까요 위 작업이 끝났다면 위에 스크립트를 추가 해줍니다. 끝입니다 쉽죠? checkA..

Tistory Blog/Html,Css 편집 2016. 3. 30. 17:15

[jQuery]티스토리 반응형스킨 이미지 크기 변경(모바일에서 img src 변경)(진행중)

[jQuery]티스토리 반응형스킨 이미지 크기 변경(모바일에서 img src 변경)(진행중) 안녕하세요. 오늘은 그냥 진행사항을 포스팅으로 남깁니다. 반응형웹을 사용 하면 어떻게 보면 많은 장점도 있지만 단점도 존재합니다. 단점 중에 하나가 바로 모바일 페이지에서 과도한 데이터사용(?)이랄까요? 그래서 대부분의 반응형웹은 매우 가볍게 만들어지기도 합니다. 하지만 본문의 포함된 이미지 크기까지 제어하기는 쉽지가 않습니다. 최근 자주 방문하는 오늘의유머 사이트는 모바일 페이지에서 1MB이상의 이미지는 클릭시에만 보이며, 스크롤이 내려갈때 가시영역에서만 이미지가 로드가 되게 해놓았습니다. jQuery 기반(?)의 플러그인인 lazyload.js를 사용한 것 같은데... 티스토리에 스킨에 적용을 하려고 하니 안..

Tistory Blog/Html,Css 편집 2016. 3. 29. 03:35

[jQuery] 블로그 배경화면 랜덤으로 뜨게 하기(background-image random)

안녕하세요. 블로그 꾸미기 포스팅은 오랜만에 하는 것 같네요 ㅠ_ㅠ 제 블로그의 꾸미기가 거의 다 끝나버려서.. ㅠ 소재고갈..혹시나!! 홈페이지나 블로그 꾸미기 궁금한 점이 있으면!! 언제든지!! 방명록 문의하기를 해주시면저도 열심히 방법을 찾아보도록 할게요. (面ㅅ面) 오늘은 저번에 일정 시간마다 자동으로 페이드인 페이드아웃으로 교체되는 배경화면http://cocosoft.kr/389 - 배경화면 여러개 바꾸기에 이어서 배경화면 시리즈 2편!! 랜덤 배경화면 입니다!! 오늘 만들 것은? 랜덤 배경화면!! 시작해보자 오늘 알아볼 것은 블로그의 배경화면을 랜덤으로 바꿔주는 jQuery 코드입니다. 완성된 예제 -새로고침 누를때마다 랜덤으로 배경화면이 바뀜- iframe을 지원하지 않는 브라우저를 사용하고..

Tistory Blog/Html,Css 편집 2016. 3. 27. 05:13

[PBE 서버] 롤 6.7 패치 내용 미리 살펴보기[메카 제로 사이온 로그인 화면]

PBE 롤 6.7 패치 3/25일자 업데이트 내용입니다. 본 내용은 본섭이 아닌 PBE서버 패치 내용입니다. (본섭 업데이트 시 재조정 될 수 있습니다.) 콘텐츠 바로가기 1. 메카 제로 사이온 로​그인 테마 화면 2. 서버 통합 일러스트 업데이트[PBE] Global Splash Updates 3. 파티 기능 추가 Parties Live on PBE! 4. 카시오페아 패치 삭제 예정 5. 기타 챔피언 및 특성 변경 1. 메카 제로 사이온 로​그인 테마 화면 오늘 업데이트에서 메카 제로 사이온과 메카 말파이트가 전투를 벌이는 새로운 로그인 화면이 추가되었습니다. 고화질 일러스트 2. 서버 통합 일러스트 업데이트[PBE] Global Splash Updates 전 서버 통합 일러스트(스플래시 아트) 업데이..

IT Review/Game 2016. 3. 26. 17:32

머티리얼 디자인(Material Design) 색상표 및 쉽게 사용하기

최근 사용하는 스마트폰의 운영체제를 안드로이드 6.0 마시멜로우로 업데이트 했습니다. 마시멜로에서도 머터리얼 디자인이 사용 되었으며 한단계 더 완성도 깊은 디자인(?)의 느낌을 받았습니다. 머터리얼이란, 예전 2013년쯤 애플이 스큐어모피즘을 걷어내고 미니멀리즘 디자인 트렌드를 선도하자 구글도 미니멀리즘을 강조한 머터리얼 디자인을 공개했죠. 2014년 구글 I/O 컨퍼런스에 공개되어 신규 안드로이드 운영체계인 롤리팝(5.0)부터 반영된 디자인 언어이며, 생생한 질감표현과 플랫하고 대담한 컬러의 그래픽 디자인, 매끄럽고 유려한 애니메이션이 특징입니다. 스타일 레이아웃 컴포넌트 등등 사용성규칙이 지정되어있죠.. 심지어 타이포, 컬러 팔레트, 애니메이션의 모션까지도요. 단순히 심플함을 강조하기 보다는 직관성 ..

IT Review/Site,Social,Tech 2016. 3. 25. 16:15

[롤 신스킨]메카 제로 사이온,사이버 소라카,사이버 리산드라 고화질 일러+인게임 영상+출시일

안녕하세요. 오늘은 롤 PBE서버에 새롭게 출시된 신스킨을 소개해보겠습니다. 바로 메카 제로 사이온, 사이버 소라카, 사이버 리산드라3개의 스킨입니다.오랫만에 레전더리 스킨이 나왔네요.특히 메카 제로 사이온의 경우 썸네일샷이 미리 공개되어 많은 궁금증을 안겨주었지만대부분의 유저들이 추측한 것 처럼 사이온이였습니다. 오늘은 3개의 스킨 및 인게임 영상 고화질 일러스트 출시일에 대해서 살펴보겠습니다. ※ PBE 6.7 한국 패치에서 정식 번역명 사이버 소라카 및 사이버 리산드라로 번역 되었습니다. 바로 내려가기(링크)메카 제로 사이온(Mecha Zero Sion)사이버 리산드라(Program Lissandra)사이버 소라카(Program Soraka) 고화질 인게임 영상 플레이 영상 소개 신스킬 출시 예정일..

IT Review/Game 2016. 3. 23. 17:37

[jQuery]html 체크박스 체크시 이벤트 동작 발생

예전에도 input type="checkbox" 의 이벤트 실행해 대해서 포스팅 한 적 있습니다. 개인적으로 체크박스로 만들어 진 것은 제어하기가 편해서 많이 사용 하는 것 같네요. 오늘은 간단하게 체크박스 클릭시 해당 라벨 등에 이벤트를 주는 방식을 알아보겠습니다. 오늘 만들 예시입니다. 체크박스를 체크 또는 라벨(이 문구)을 클릭시 글자가 변합니다. 체크박스를 체크 또는 라벨(이 문구)을 클릭시 글자가 변합니다. 시작 체크박스 설치 우선 간단하게 체크박스를 설치해야겠죠? html영역에 간단하게 삽입을 해줍니다.(jQuery는 2.1.3 버전을 사용 했습니다.) 체크박스를 체크 또는 라벨(이 문구)을 클릭시 글자가 변합니다. 간단하게 체크박스가 설정 되었습니다.이벤트를 실행시키는 방식은 비슷합니다. 다..

Tistory Blog/Html,Css 편집 2016. 3. 23. 01:05

구글 크롬 광고 팝업 차단 확장프로그램 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