티스토리

코코소프트
검색하기

블로그 홈

코코소프트

cocosoft.kr/m

코코소프트(COCOSOFT), 최신IT동향, 게임, html/css등 양질의 콘텐츠 제공.

구독자
2
방명록 방문하기
공지 블로그 업데이트 현황 및 예정 계획 모두보기

주요 글 목록

  • 공백 특수문자 종류 모음 및 가장 호환성 높은 특수문자 유니코드에는 다양한 종류의 공백 문자(Whitespace Characters)가 있으며, 각각 용도와 폭(width)이 다릅니다.1. 일반적인 공백 문자U+0020 ( ): 일반적인 스페이스(space) 키로 입력되는 공백.U+00A0 ( ): Non-breaking space. 줄 바꿈이 되지 않는 공백(HTML에서  ).U+200B (​): Zero-width space. 폭이 없는 공백(줄 바꿈 가능 위치 표시).2. 다양한 폭의 공백 문자U+2000 ( ): En Quad (전각 폭의 절반 정도).U+2001 ( ): Em Quad (전각 폭과 동일).U+2002 ( ): En Space (전각의 절반 폭).U+2003 ( ): Em Space (전각 폭).U+2004 ( ): Three.. 공감수 1 댓글수 0 2025. 4. 11.
  • [JS]티스토리 마우스 우클릭 방지 금지 설정하기 [불펌방지] 강력막기 안녕하세요. 오늘은 티스토리 마우스 우클릭 방지 및 금지 하는 방법에 대해서 알아보겠습니다. 우클릭 해제를 할 수 있는 웬만한 방법들이 통하지 않아 불펌을 방지 할 수 있는 초강력한 방법입니다. Pig Toolbox 와 같은 크롬 확장프로그램으로도, 풀수 없으며, 1) 마우스 우클릭 방지 / 2) 드래그방지 / 3) 키보드방지(Ctrl+c,v 등등) 또한 되었습니다. 만약 크롬 설정에서 자바스크립트 허용을 차단으로 할경우에는 아래의 사이트로 이동시켜버립니다. https://www.enable-javascript.com/ko/#developer 또한 새로고침 (F5) 키와 요소검사(F12) 키도 잠궈서, 크롬 개발자 툴로 접근을 못하도록 하였습니다. 크롬 요소검사 개발자 툴에서 Disable JavaScr.. 공감수 13 댓글수 11 2018. 4. 4.
  • [티스토리] 공감 하트 공유 신고 버튼 가운데 정렬하기 안녕하세요. 오늘은 새롭게 리뉴얼된 티스토리 블로그의 공감 하트 공유 신고 버튼의 가운데 정렬 하는 방법에 대해서 알아보겠습니다. [티스토리] 공감 하트 공유 신고 버튼 가운데 정렬하기 티스토리가 개편 리뉴얼 되면서 관리자 페이지도 변화가 되었고, 공감버튼도 변화가 생겼습니다. 원래 공감 버튼은 발행게시글만 나타났었는데, 이제는 주제를 선택해야지 나타납니다. 기존 공감버튼이 없어지고 아래와 같이 새로운 버튼이 생겨서 좌측정렬이 되어버립니다. 해당영역은 따로 플러그인이나, HTML 수정을 제공하지 않기 때문에 구조 자체 변경은 어려우며, CSS 스타일시트의 수정으로, 위치를 조정해야합니다. 우선 구조를 살펴볼까요?? 복잡하게 보이지만 아주 간단한 구조로 되어있습니다. ... ... ... 이런 구조로 되어.. 공감수 31 댓글수 6 2018. 4. 3.
  • [애드센스]티스토리 네이티브 인피드 광고 설치하기<1편:메인 홈화면> 블로그를 거의 방치 수준으로 놔두고 있다가... 다시 개선을 하려고 하는데.. 요즘 애드센스 광고 개수를 3개를 무시하고 설치되어있는 블로그들이 상당히 눈에 많이 뛰게 되었습니다. 확인해보니.. 광고 개수 제한은 사라졌더군요.. 다만, 광고 콘텐츠 정책 규정은 꼭! 애드센스 고객센터에 방문해서 확인해보는 것을 권장합니다. AdSense 고객센터 Intro - 티스토리의 홈화면 메인 화면에 설치하기 위해서는 티스토리의 특성을 이해해야 합니다. 티스토리 블로그의 경우는 서비스형 블로그임에도 불구하고, Html/Css를 제공합니다. 단 제한적이죠. 단, 한 개의 Html 파일을 가지고 블로그를 구성해야 하기 때문에, 전문적이고, 세세하며 개인 입맛에 맞게 꾸미기를 하긴 힘들어도.. 초보자들도 쉽게 Html/C.. 공감수 3 댓글수 2 2017. 8. 11.
  • 티스토리 공식 블로그 스킨 특정 포스팅 고정 및 티에디션 관련 고찰 안녕하세요. 오늘은 ㅠ_ㅠ.. 회사에서 회식 한잔을 하고 글을 적어서.. 횡성수설 할지 모르지만.. 그래도 기존에 꾸미고 싶고 계획했던 블로그 메인에 대해서 포스팅을 작성하고 고찰을 투고 해볼까합니다. 티스토리 블로그 메인을 꾸미는 방법은 여러가지가 있지만 가장 대표적인 방법이 티에디션을 이용하는 방법입니다. 그외에도 공식 치환자를 사용해서 리스트 썸네일을 만들거나, 특정페이지, 카테고리로로 리다이렉션을 걸어버리거나 등의 방법이 있죠.. 솔찍히 제가 디자인 능력만 있으면.. ㅠ_ㅠ 이미지로 메인 화면을 꾸며버리겠지만.. 그렇지 않아서.. (회사의 디자이너의 솜씨를 보면 정말 예술작품인 것 같아요.. 확실히 디자이너들이 금손..) 아무튼.. 티에디션은 자체적인 메인 화면 꾸미기 위자드 라고 해야할까요? 손.. 공감수 5 댓글수 5 2016. 7. 6.
  • [CSS]웹페이지 웹문서 본문에 워터마크(watermark) 삽입하기 블로그를 운영하다 보면 불펌과의 전쟁이라고 해도 과언이 아닙다. 물론 나도.. 좋은 소스코드 같은 것은 항상.. 뺏기기 벤치마킹 하고 있긴 하다만... 흠흠 -_- 그래도!! 신경써서 직접찍은 이미지가 도용당한다면.. 정말.. 마음이 아픕니다. ㅠ_ㅠ 마우스 우클릭 막는 소스코드가 있긴해도... 크롬확장프로그램 또는 요소검사등으로 다 뚫리게 됩니다.. http://cocosoft.kr/371-마우스 우클릭 방지 및 자동 출처 표시에 대한 고찰 어느 블로그에 가보니 마우스 우클릭 방지 태그에 관한 고찰 중 소스코드 한줄 복사안해본 사람 돌을 던지라는 말을 보고는.. 마우스 우클릭 방지 태그를 삭제 한 적이 있기도 하죠... 암튼 서론은 이쯤하고... 소크코드 뿐만아니라 이미지를 도용 당했을 때는 정말 기분.. 공감수 6 댓글수 3 2016. 7. 3.
  • [HTML/CSS]웹디자인 이미지에 대한 고찰 및 블로그 로고 리뉴얼 인터넷 익스플로러 때문에 대충 임시방편으로 수정 해놓은 로고의 코드를 다시 리뉴얼 작업을 했습니다. 'ㅡ' 여기서 왜 로고의 코드라고 했는지 아래에서 다시 설명하고.. 로고이미지 리뉴얼 작업을 하면서, 이양 하는 김에.. 웹디자인 이미지 사용에 대해서 정리해보는 시간을 가지려고합니다.!! Intro:웹사이트 속도와 이미지 빠르고 쾌적하고 원할한 웹페이지를 만들기 위해서는 코드의 압축이나 정리, 서버등의 방법도 중요하지만 가장 크게 신경이 쓰이는 부분이 바로 이미지 입니다. 우선 우리가 아는 이미지들은 전부가 모두 코드로 되어있죠. JPG, PNG 들도 단순히 각각의 압축방식입니다. 그래서 이미지코드를 하나의 파일로 간단히 만들어 놓고, 뷰어프로그램이나 이미지편집프로그램(그림판,포토샵...등등) 으로 보거.. 공감수 11 댓글수 2 2016. 6. 26.
  • [jQuery]마우스 반응하는 3D팝업 및 click toggle 이벤트 팝업 관련해서 코드를 찾다가 재미있는 3D 팝업을 발견해서 'ㅡ' 소개를 해볼까하네요. 마우스에 반응하는 3D팝업이며, 추가로 버튼을 클릭하면 팝업이 사라지고 나타나게 jQuery의 click 이벤트 toggle를 적용 해놓았습니다. ↓↓↓↓↓↓ I'm a new kind of popup. Move your mouse around ! POPUP Show/Hide I'm a new kind of popup. Move your mouse around ! POPUP Show/Hide var moveForce = 30; // max popup movement in pixels var rotateForce = 20; // max popup rotation in deg $(document).mousemove(fun.. 공감수 1 댓글수 0 2016. 6. 23.
  • [CSS] 이메일 디자인 html에 inline CSS 합치기(combine) 오늘은 inline CSS style 에 대해서 알아보겠습니다. HTML 문서에 CSS를 사용하는 방법은 크게 3가지가 있습니다. 1.외부 스타일 시트(External Style Sheet) *.css 파일을 만들어 html과 링크로 연결해서 사용하는 방식 가장 많이 선호하는 방식이며, 권장되는 방식입니다. html을 일관성있게 수정이 가능하며, 관리하기도 편하고, 웹문서의 크기도 가장 줄일 수 있는 방식(compressor하기도 좋고) 전문적인 홈페이지를 만들 때 효율을 극대화 하는 방식. html5에서도 html과 css는 분리를 권장하고 있음. 다만 css파일이 다수 일 때는 관리가 필요하다는 단점(?) 2.내부 스타일 시트(Internal Style Sheet) 두 번째는 내부 스타일 시트입니다... 공감수 4 댓글수 1 2016. 6. 22.
  • [html/css] table 태그 속성에 대해서 알아보자(부트스트랩 테이블) 오랫만에 블로그 포스팅을 하다 보니 ㅠ_ㅠ 기본 코딩도 자꾸 잊어먹게 된다. 오늘은 table 태그를 사용해서 작업을 하다가 헷갈려서, 이번 기회에 오늘은 table 태그 및 속성에 대해서 알아보겠습니다. table 태그는 HTML5에서는 사용이 권장되지는 않는 태그 요소로 알려져있습니다. 왜냐하면 더럽다고 해야하나.. 브라우저별로 맞추기도 힘들고, 브라우저 또한 많은 자원을 소모해서 구현하기 때문에 비권장되는 요소로 알려져있습니다. 반응형 테이블 태그를 만들 수 있지만 일부 브라우저에는 호환도 되지않고.. 자제가 필요한 태그이지만 어쩔수없이 사용하게 되는 경우가 매우 많은 태그입니다. 예를들어.. 지금 작성하는 블로그 텍스트 편집기에 포함되어있는 [표삽입] 기능으로 표를 집어넣으면 style과 code.. 공감수 1 댓글수 0 2016. 6. 21.
  • CSS-CROSS스킨 신고 기능 글자 깨짐현상 수정 요즘 바빠서 ㅠ_ㅠ 티스토리 스킨 관련해서 자주 글을 작성 못하고있네요. 작성할 세이브 원고는 많이 작성을 해놓고 있는데.. ㅠ_ㅠ 오늘은 스킨에 버그가 발생해서 수정하는 법에 대해서 알아보겠습니다. 티스토리측에서 새롭게 신고 기능을 개선을 하면서 발생하는 문제입니다. 스킨 치환자 와 그리고 이부분이 문제인데요. 바로 이치환자가 들어가는 부분에 강제적으로 신고 버튼이 생기게 됩니다. 우선 아래와 같이 보호 정책에 따라 바뀌는 부분이기 때문에 어쩔 수는 없는 것 같습니다.. 그래도 기존의 치환자를.. 사용해서 일괄적으로 적용시켜버리다니... 뭐 티스토리 측도 어쩔수 없겠죠. 정부에서 하라고 하는거니깐요.. -_-; 암튼 필요한 기능이긴 한데.. 뺄수도 없고.. 빼려면 시간표시를 할 수가 없으니..(치환자만.. 공감수 6 댓글수 1 2016. 6. 13.
  • [CSS]티스토리 사진 이미지 테두리 적용하기 ( 추가 또는 삭제 ) 최근 블로그 글을 쓰다가 보니 집에 있는 모니터로는 확인을 못했는데.. 조금 밝은 모니터로 확인을 해보니 사진과 텍스트 경계선이 구분 되지 않아서 가독성이 많이 불편 하였습니다. 그래서 티스토리 블로그의 이미지, 사진 테두리 설정하는 방법에 대해서 알아보겠습니다. 티스토리 사진 이미지 테두리 적용하기 현재 블로그 이미지에 모든 테두리가 적용이 되어 있습니다. 테두리를 설정하는 방법은 간단합니다. 이미지 태그인 img에다가 border CSS 속성을 설정을 해주면 됩니다. border이 바로 테두리를 정하는 CSS속성이기 때문입니다. 각방향의 테두리 색상도 정할 수 있고 다양한 테두리 무늬도 표현할 수 있습니다. 현재 제블로그는 아래와 같이 설정이 되어 있습니다. img{border:2px outset r.. 공감수 3 댓글수 2 2016. 5. 18.
  • 랜덤 로우폴리 배경화면(Lowpoly Dynamic Background) 랜덤 로우폴리 배경화면 입니다.페이지가 새로고침 될 때마다 새로운 로우폴리 색상과 패턴이 나타납니다. 페이지 새로고침 스킨 HTML 편집에서 위에 붙여넣기 하면 됩니다. PC화면에서만 적용 되게 하려면 if (window.matchMedia('(min-width: 992px)').matches){ ... };위 해당 코드를 사용해 아래처럼 감싸 주면 됩니다. 공감수 9 댓글수 4 2016. 4. 14.
  • [CSS]티스토리 CCZ-CROSS 스킨 본문 넓이 조절 하기 안녕하세요. 오늘은 제가 사용하고 있는 스킨의 본문 넓이를 조절하는 방법에 대해서 알아보겠습니다. 지금은 줄이기 하는 방법을 알아 볼 텐데.. 조절하는 방법만 알면 본문 넓히기도 손쉽게 가능 할 것입니다. 그리고 이스킨만 아니라도 다른스킨도 쉽게 조절이 가능하구요. 우선 기본 구조를 파악 해야합니다. 반응형 웹스킨이기 때문에 그냥 무작정 고치게 되면 나중에 다 틀어지게 됩니다. 본문 좌우 배경을 없애 버리는 방법도 있긴한데 그건 다음포스팅으로!! 블로그 넓이 구조 우슨 main 영역은 1321px 1322px content 영역은 999px 마지막으로 본문 post-content 영역은 857px입니다. 즉 본문 영역인 post-content 영역을 720px로 줄여보겠습니다. 총 3가지의 방법이 있습니.. 공감수 12 댓글수 4 2016. 4. 9.
  • [jQuery]티스토리 댓글 중복 입력 방지하는 방법(버튼 disabled) [jQuery]티스토리 댓글 중복 입력 방지하는 방법(버튼 disabled) 티스토리 댓글은 가끔 폼은 입력 버튼을 누른 다음 몇 초의 딜레이가 발생합니다.그래서 댓글이 정상적으로 입력중이라는 표시가 없기 때문에 방문객들이 댓글 입력 버튼이 제대로 되었는지 판단하기 어렵기 때문에여러번 댓글입력버튼을 클릭 하게 됩니다. 그럼.. 댓글이 중복으로 생겨버리죠;;스팸처럼.. 일일히 지울기도 귀찮고.. 사실 기존에는 http://zzznara2.tistory.com/625 by 꿈꾸는 우림님께서제작 해주신 스크립트를 사용 하고 있었습니다.중복 체크를 막는 기능을 문의 드렸는데 버튼을 disabled 하는 방식으로 좋은 아이디어를 내시고스크립트를 만들어 주셨습니다. Primary button 비활성 Primary .. 공감수 5 댓글수 5 2016. 4. 6.
  • [CSS]티스토리 공식 반응형웹스킨#2 아이콘 플러그인 중복 문제 수정 안녕하세요. 오늘은 티스토리 공식 반응형 웹스킨#2 아이콘 플러그인 중복 문제를 수정해보겠습니다. 플러그인 까지 생각을 안했거나, 깜빡하고 지나간 것 같아보이네요. 댓글 및 방명록 사람아이콘이 있지만. ㅠ_ㅠ 기존의 플러그인과 같이 사용하면 중복으로 뜨게됩니다. 우선, 티스토리는 플러그인을 통해 아이콘을 사용 할 수 있습니다. [환경설정] - [기본정보] 에서 아이콘을 설정하고 [플러그인 설정] 에 들어가서 아이콘 사용 설정을 해주면 됩니다.[64x64px 사용을 권장합니다.]그런데 확인을 해보니 ㅡㅡ;;;;;;아이콘이 중복해서 나타나는 문제가 발생하네요...;;;; 이것을 깔끔하게 고쳐보겠습니다. [HTML/CSS] 편집에 들어가 줍니다. 스킨 수정전에는 꼭 스킨 저장을 하시고 문제가 발생시 불러오면 .. 공감수 13 댓글수 14 2016. 3. 31.
  • [jQuery] 애드센스 광고차단(Adblock)시 알림창 만들기(특정 클래스 제외시) 안녕하세요. 특정 클래스 제외 하는 방법을 찾다가 재밌는 코드를 발견해서 소개를 해드릴가 합니다. 아마 애드센스 광고를 설치하는 분들에게는 도움이 될 것 같네요.(ㅠ_ㅠ 임시저장이 날라가버려서 다시 작성하는 글이네요.. 아오 ㅠ_ㅠ) 바로!! 애드센스 광고 차단시 알림창 만들기 적용 방법은 간단합니다.우선 본인의 광고 코드를 .adsense-area 클래스명의 div 태그로 감싸줍니다. 클래스명은 본인이 수정해도 상관없습니다. 본인의 애드센스 광고 code 광고를 본문 상단, 본문 하단, 사이드바 총 3개를 설치 했다면전부 다 할 필요는 없고 본문 상단 광고에만 작업을 해주는 것이 가장 좋습니다.접속하자 마자 바로 보이니까요 위 작업이 끝났다면 위에 스크립트를 추가 해줍니다. 끝입니다 쉽죠? checkA.. 공감수 5 댓글수 7 2016. 3. 30.
  • [jQuery]티스토리 반응형스킨 이미지 크기 변경(모바일에서 img src 변경)(진행중) [jQuery]티스토리 반응형스킨 이미지 크기 변경(모바일에서 img src 변경)(진행중) 안녕하세요. 오늘은 그냥 진행사항을 포스팅으로 남깁니다. 반응형웹을 사용 하면 어떻게 보면 많은 장점도 있지만 단점도 존재합니다. 단점 중에 하나가 바로 모바일 페이지에서 과도한 데이터사용(?)이랄까요? 그래서 대부분의 반응형웹은 매우 가볍게 만들어지기도 합니다. 하지만 본문의 포함된 이미지 크기까지 제어하기는 쉽지가 않습니다. 최근 자주 방문하는 오늘의유머 사이트는 모바일 페이지에서 1MB이상의 이미지는 클릭시에만 보이며, 스크롤이 내려갈때 가시영역에서만 이미지가 로드가 되게 해놓았습니다. jQuery 기반(?)의 플러그인인 lazyload.js를 사용한 것 같은데... 티스토리에 스킨에 적용을 하려고 하니 안.. 공감수 5 댓글수 1 2016. 3. 29.
  • [jQuery] 블로그 배경화면 랜덤으로 뜨게 하기(background-image random) 안녕하세요. 블로그 꾸미기 포스팅은 오랜만에 하는 것 같네요 ㅠ_ㅠ 제 블로그의 꾸미기가 거의 다 끝나버려서.. ㅠ 소재고갈..혹시나!! 홈페이지나 블로그 꾸미기 궁금한 점이 있으면!! 언제든지!! 방명록 문의하기를 해주시면저도 열심히 방법을 찾아보도록 할게요. (面ㅅ面) 오늘은 저번에 일정 시간마다 자동으로 페이드인 페이드아웃으로 교체되는 배경화면http://cocosoft.kr/389 - 배경화면 여러개 바꾸기에 이어서 배경화면 시리즈 2편!! 랜덤 배경화면 입니다!! 오늘 만들 것은? 랜덤 배경화면!! 시작해보자 오늘 알아볼 것은 블로그의 배경화면을 랜덤으로 바꿔주는 jQuery 코드입니다. 완성된 예제 -새로고침 누를때마다 랜덤으로 배경화면이 바뀜- iframe을 지원하지 않는 브라우저를 사용하고.. 공감수 5 댓글수 7 2016. 3. 27.
  • [jQuery]html 체크박스 체크시 이벤트 동작 발생 예전에도 input type="checkbox" 의 이벤트 실행해 대해서 포스팅 한 적 있습니다. 개인적으로 체크박스로 만들어 진 것은 제어하기가 편해서 많이 사용 하는 것 같네요. 오늘은 간단하게 체크박스 클릭시 해당 라벨 등에 이벤트를 주는 방식을 알아보겠습니다. 오늘 만들 예시입니다. 체크박스를 체크 또는 라벨(이 문구)을 클릭시 글자가 변합니다. 체크박스를 체크 또는 라벨(이 문구)을 클릭시 글자가 변합니다. 시작 체크박스 설치 우선 간단하게 체크박스를 설치해야겠죠? html영역에 간단하게 삽입을 해줍니다.(jQuery는 2.1.3 버전을 사용 했습니다.) 체크박스를 체크 또는 라벨(이 문구)을 클릭시 글자가 변합니다. 간단하게 체크박스가 설정 되었습니다.이벤트를 실행시키는 방식은 비슷합니다. 다.. 공감수 11 댓글수 3 2016. 3. 23.
  • CCZ-CROSS 스킨 상단 site-header 높이 조절하기 예전에 꾸미기 상단헤더 꾸미기 관련해서 간단하게 소개한 적이 있는데 본격적으로 상단 헤더 부분을 수정하는 방법에 대해서 알아보겠습니다. 그중 가장 하이라이트!! 상단 헤더부분의 높이를 변경하는 방법에 대해서 소개해보겠습니다. 우선 CCZ-CROSS 스킨의 site-header 기본 높이는 40px 모바일은 50px 입니다. 모바일화면에서는 적당하지만 PC 화면에서는 조금 작다고 생각되어서 늘려보도록 하겠습니다. 반응형웹이라서 생각보다 조절해야하는 부분이 많아서 잘보고 따라오셔야합니다!! #1 site-header PC화면 40px →50px 으로 늘리기 (바로가기) #2 모바일 화면 50px → 40px로 줄이기 (바로가기) 본격적으로 시작해보자 #0 인트로 - 사전 지식 반응형웹페이지에서 PC화면과 모.. 공감수 10 댓글수 6 2016. 3. 20.
  • [HTML]블로그 스킨 캐시 무시하고 페이지 로딩하는 방법 블로그 스킨을 수정하다 보면 javascript 파일과 CSS 파일을 수정할 일이 많습니다. 하지만 브라우저 캐싱(웹 캐시) 때문에 파일을 수정해도 즉시 변경된 사항이 보이지 않는 경우가 많습니다. 예전에도 몇가지 캐시를 삭제하는 방법에 대해서 알려드린 적이 있습니다. 캐시 무시하고 페이지 로드하기 외부 JS파일과 CSS 파일을 수정하면 캐시를 삭제를 해줘야지 정상적으로 바뀌는 것을 확인 할 수 있습니다 Ctrl + ⇧Shift + Delete키를 눌러서 삭제를 하고 봐도.. 로고나 기타 이미지파일은 쉽게 변경되는데 js나 CSS파일은 방법을 해도 바로바로 변하지 않는게 보입니다. 아마 티스토리 서버의 캐시(?) 프록시 캐시(?) 때문인 것으로 보이는데 그럴경우에는 두가지 해결방법이 있습니다. 캐시_무시.. 공감수 5 댓글수 0 2016. 3. 19.
  • 특정 페이지,카테고리,주소에서만 나오는 콘텐츠(숨기기,class추가) 티스토리 블로그를 하다보면 특정 영역에서 콘텐츠를 포함하거나 제외 해야하는 경우가 발생합니다.메인 화면이라든지 특정 게시글, 아님 특정 게시판, 특정 카테고리 등등 워드프레스의 경우에는 카테고리 ID와 슬러그를 이용해서 분류하고 php수정으로 쉽게 설정이 가능하지만 티스토리 블로그는 php지원을 하지 않고 skin.html 하나로만 만들기 때문에 설정하기는 쉽지 않습니다. 1. 특정 페이지, 카테고리, 주소 에서만 나오는 콘텐츠와2. 특정 카테고리안에 있는 글에서만 나오게 하는 방법★★을 알아보겠습니다. 1. 특정 페이지, 주소에서만 나오게 하기 사실 이 방법은 꽤 많이 강좌나 포스팅으로 알려져 있습니다.티스토리 블로그를 메인화면을 티에디션이 아닌 다른 형태로 구현하기 위해서 사용할 때도 많이 사용하고방.. 공감수 7 댓글수 8 2016. 3. 19.
  • 티스토리 블로그 다음글 이전글 버튼 만들기(직접디자인,진행상황) 안녕하세요. 오늘은 강좌가 아닌 그냥 진행상황 포스팅입니다.생각보다 시간이 오래 걸리네요. ㅠ_ㅠ 이유는 아래 있습니다. 블로그 꾸미기를 하다가 -ㅠ- 이전글 다음글 버튼을 집어려고 했습니다. 초기 디자인은 Readiz님의 fastboot 스킨에서 참고해서 만드려고 했습니다. 제일 초기 디자인 Arrow 버튼 및에 단축키 문구를 추가해서 만드려고 했죠. 티스토리 단축키... 티스토리 블로그는 자체 제공하는 몇가지 단축키가 있습니다. Q: 관리자 (Admin),A: 이전 글,S: 다음 글,Z: 최근에 올라온 글,X: 최근에 달린 댓글,C: 최근에 받은 트랙백 Z, X, C 는 제대로 작동안하는 것 같네요... 근데 그냥 문구를 적으니 뭔가 허접해보여서.. 구글링을 하게 됩니다. 이미지를 빼오기 위해서+_+.. 공감수 12 댓글수 8 2016. 3. 17.
  • [SVG]글씨 써지는 효과 코드로 만들기 (jQuery DrawSvg || pure CSS) 안녕하세요. 오늘은 움직이는 로고만들기에 대해서 알아보겠습니다.기존에 로고에 관련해서는 여러개의 포스팅을 진행 한적이 있습니다. ※ 이 것을 먼저 보고 오시면 도움이 이글을 이해하는데 도움이 됩니다. http://cocosoft.kr/386 - 블로그 로고 벡터이미지 svg파일로 만들기 및 사용법일러스트로 벡터 이미지 path 선따는 법을 알고 오시면 정말 재밌습니다. 인트로 우선 저는 웹언어 웹코딩 웹디자인 전문ㅠ 전공자도 아니고 아예 문외한 비전공자입니다.그래서 지식의 깊이가 얇으며, 부족한 점도 많지만.. 잘못 설명하는 점도 있을 수있지만 ㅠ_ㅠ 양해를 해주시고봐주시면 좋을 것 같네요. 사실 지금 글을 적으면서도 이러한 방법으로 하는게 맞는 것인지는 모르겠지만최대한 아는 방법을 설명하겠습니다!! 암.. 공감수 16 댓글수 13 2016. 3. 15.
  • [jQuery]티스토리 배경화면 여러개 바꾸기 페이드효과 (background change fade) 오늘도 갑자기 쓸데없는게 생각나서.. 우연히 배경을 검색하다가 우주배경 예쁜게 너무많아서 ㅠ_ㅠ 동시에 여러개의 배경을 사용하고 싶어서 포스팅 작성을 시작하게 되었습니다.... 오늘의 목표 여러개의 배경화면은 자동으로 페이드인 페이드아웃 효과를 주면서 교체하는 방법을 알아보겠습니다. 예쁘쥬?? 사실 요즘 애플스타일 같은 페이지가 많이 나타나면서.. 쭉스크롤을 내리면 배경이 바뀌는 스크립트는 많은데 의외로 페이드인 페이드아웃으로 배경이 계속 바뀌는 것은 잘 없더라구요. 우선 PURE CSS!! 아이러브 퓨어시에스에스!!!♡ 로 하는 방법도 있긴합니다. @keyframes background-changer { 0%, 100% { background-image: url(./images/배경1.jpg); } 5.. 공감수 6 댓글수 2 2016. 3. 14.
  • 티스토리 블로그 꾸미기(블로그 아이콘 파비콘, 상단헤더, 주소창 색상) 티스토리 블로그 꾸미기(주소창 색상, 블로그 아이콘, 상단네비바)오늘 간단하게 아이콘만 제작하려다가 생각 보다 ㅡㅡ;;; 많은 것을 바꾸어 버렸습니다.. 처음시작은.. 블로그 로고를 교체하려고 했습니다.See the Pen 코코소프트 로고2 by JCM (@cocosoft) on CodePen. 하지만 저 것으로 바꾸기에는 외부스크립트도 너무 많이 필요하고귀찮아서 로고 변경을 포기하는데... 갑자기 ㅡㅡ!!!!!!!! 아이콘이 맘에 들지 않아서 교체를 마음 먹습니다. 첫 번째 블로그 아이콘 변경 아이콘은 설정 기본정보에서 교체가 가능합니다. 주로 댓글 작성에서 아이콘 표시가 됩니다. 사실 맨처음에는 아무런 색이나, 배경 없이 타이포그래피 만 사용해서 아이콘을 만들었습니다. 그러던중 댕댕콘이라는 것을 보게.. 공감수 8 댓글수 7 2016. 3. 13.
  • 블로그 꾸미기 프리로더 및 hover 효과 진짜 진짜 마지막 꾸미기.. ㅠ_ㅠ 더이상은.. NAVER 너무중독이다.. ㅠ_ㅠ 사실 오늘은 너무많은 font-family 사용이되어있어 그 것을 줄여주고 하단 썸네일 hover 효과에 문제가 있어서 수정을 하는 작업을 진행하다가 갑자기 예쁜 프리로더를 추가하고 싶어 설치를 하였는데... 막상 달아보니 너무 난잡했다. 또 페이지 로드가 빨라서 그런지 사각형이 다돌기도 전에 잠깐 나왔다 사라져서.. 처음 방문한 사람이 보면 이게 뭐지(?) 라고 생각할 정도라서.. 결국에는 sub info에 텍스트로 된 로딩 문구를 추가했다 커서형태(로딩중...l)로 만들려다보니 생각보다 귀찮았는데 그냥 하단바(로딩중 _ )로 추가하니 깔끔하게 완료가 되었다. See the Pen 사이트 로딩 코드 by JCM (@coc.. 공감수 3 댓글수 2 2016. 3. 11.
  • 블로그 로고 벡터이미지 svg파일로 만들기 및 사용법 오늘은 블로그 로고작업을 SVG로 교체하는 작업을 다시 했습니다. 로고파일이 원래 455x299 사이즈의 png 파일인데...이게 사이즈가 크게 해서 로고를 만들 때는 이미지가 깨지지 않는데..너무 작은 부분에 로고를 사이즈를 줄여서 넣으려고 하면 계단현상 즉 이미지가 깨져버리는 현상이 발생합니다. 그래서 이런식으로 그냥 웹폰트를 불러와서 꾸미고 있었죠. 괜히 저폰트 사용도 많이 안하는데.. 계속 있는 것도 보기 안좋고한글 로고가 있는데 영문을 사용하는 것도 맘에 들지 않아서 벡터이미지인 svg 파일로 만들어보기로 했습니다. 벡터이미지와 레스터이미지를 간단하게 알아보자 벡터이미지의 가장큰 장점은 뭐 이미지사이즈를 조절해도 깨지지않고 그대로를 보여줍니다.레스터이미지는 픽셀이고 벡터는 path 선으로 나타나.. 공감수 14 댓글수 7 2016. 3. 10.
  • 라이브리 소셜댓글 LiveRe(신버전) 설치하기 2탄(tab버튼) 오늘은 새로워진 라이브리 소셜 댓글 신버전을 설치를 해볼 건데요. 조금 새롭게 토글 형식을 사용해서 설치를 해보겠습니다. 우선 기본 플러그인 손쉽게 설치를 하고 싶으신 분들은 아래 링크를 참고해주세요. http://cocosoft.kr/380 - 새로워진 라이브리 소셜댓글 LiveRe(신버전) 설치 방법 및 후기(장단점) 사실 라이브리 댓글을 사용하면 가장 큰 문제점이 기존 티스토리 댓글과 동시에 사용하기 매우 힘들다는 점입니다. 그래서 저는 탭형식으로 댓글을 만들었습니다. tab content 를 사용하는 이런식으로 만드는 방법을 소개하겠습니다. 초기 해당 CSS 디자인은 봄나무 스킨을 참고해서 떠올렸습니다. http://allthatcode.com/entry/티스토리-스킨-봄나무를-배포합니다 그리고 .. 공감수 8 댓글수 13 2016. 3. 9.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.