티스토리 댓글 시스템이 최근에 업데이트가 되면서 친효스킨도 최신 버전으로 업데이트를 할 수 밖에 없는 상황이었습니다. 문제는 댓글 리스트가 요소로 되어있는데 고정댓글이며 이전글 더보기 항목이 모두 동일한 태그에 포함되어 있는 것이었습니다. 이렇게되면 서로 구별지어 CSS 스타일을 만들기가 상당히 애매합니다. 특히나 저는 최신 댓글을 가장 위로 오게 만들고 싶은데 그렇게되면 고정 댓글이 맨 하단으로 내려가버리는 불상사가 벌어지는 것이었습니다. 따라서 저는 이것을 다시 위로 올리고 싶었습니다. 그러려면 역시 제이쿼리로 할 수 밖에 없겠다는 생각이 들었죠. 제이쿼리에서 태그 순서를 변경하는 매소드로는 제목에도 언급했듯 다음의 옵션들이 있습니다. 사용 방법 $('타겟').after$(('선택자')) : 타겟을 ..
제이쿼리가 무조건 최신 버전이 좋은것은 아닙니다. 하지만 왜인지는 몰라도 최신 버전이라고 하면 뭔가 모든게 다 해결될 것 같은 그런 기분이 들잖아요? 「최신」이라는 키워드가 갖는 선입견이 엄청나게 작용하는 것이겠지요. 하지만 진짜로 최신 버전을 사용하면 왠만한 오류나 버그들은 대부분 해결이 되는것이 현실입니다. 제이쿼리(jQuery)도 마찬가지입니다. 참고로 현재까지 현역으로 쓰이는 가장 인기가 높은 구버전은 1.12.4 와 1.9.1이 있으며 3.6.X 버전이 있습니다. 아무튼 이런 버전 차이에 대해서는 신경쓰고 싶지 않고 그저 최신 버전을 늘 사용하고 싶다면 다음의 제이쿼리 CDN 주소를 적용하고자 하는 HTML 문서의 안에 넣어주시기 바랍니다. 이거 하나면 끝! 이것입니다. 어렵지 않습니다. 기존 ..
티스토리에는 치환자라는 시스템이 있습니다. 티스토리에서만 사용하는 일종의 암구호같은 존재입니다. 치환자에는 값치환자와 그룹치환자가 있습니다. 이 치환자는 정해진 클래스명, 태그명, 텍스트가 있어서 일반적인 HTML에서는 수정이 불가합니다. 즉 이미 뿌려져 출력된 결과값을 다시 한 번 자바스크립트나 제이쿼리로 추적해 수정해야 합니다. 예를 들면 이런 경우입니다. 상황 살펴보기 티스토리 본문을 들어가보면 일반 방문자들은 보이지 않는 관리자 메뉴가 블로거 운영자에게는 보이게 됩니다. 그러면 위의 스크린샷 이미지처럼 비공개로 변경합니다. 라는 텍스트도 보이게 되지요. 개인적으로 좀 통일감이 있으면 좋겠는데 저게 너무 눈엣가시입니다. 잘 보세요. 다른 메뉴들은 모두 단어 하나로 표현되어 있는데 왜 저 녀석만 문장..
제목만 보면 무슨 뜻인지 이해가 잘 되지 않을 수 있으니 간단한 예를 들어보겠습니다. 홈페이지 제작 시 오른쪽 하단에는 보통 TOP 버튼이 만들어져 있습니다. 대부분의 브라우저에서는 이 TOP버튼을 누르면 페이지의 가장 위로 부드럽게 스크롤되며 이동됩니다. 바로 이것입니다. 부드럽게 스크롤이 이동되는 TOP버튼에는 아마 대부분 제이쿼리 스크립트가 심어져 있을 겁니다. 친효스킨만해도 아래의 코드가 스킨에 들어있습니다. $(".rgyTop").click(function () { $('html, body').animate({ scrollTop: 0 }, 500); return false; }); 때문에 스크립트를 사용하려면 당연히 해당 스크립트(제이쿼리-jQuery) CND 주소를 안에 넣어줘야만 동작합니다...
친효스킨2를 한창 만드는 중입니다. 사이드바 작업을 먼저 진행 중인데 사용자가 임의로 등록하는 모듈에 대해서는 별도로 스타일을 지정해줘야 합니다. 예를 들자면 티스토리에서 개인적으로 만든 배너 이미지를 사이드바에 등록 시 html의 구조는 아래처럼 들어가게 됩니다. div가 부모 요소가 되고 클래스명은 두 개가 쓰이게 되는데 각각 module과 module_plugin 입니다. 저는 여기에 제가 임의로 제작한 스타일 클래스명을 하나 더 추가를 하고 싶습니다. rgySideModule 이라고 하는 클래스명을 말입니다. 이 클래스명에는 사이드바 전용 스타일 시트가 들어있습니다. 클래스명을 별도로 추가하려면 스크립트를 써야 하고 대중적으로 많이 알려진 제이쿼리를 사용해서 클래스명을 추가해 보겠습니다. 클래스명..
언제부터인가 자꾸 본문 수정 시 혹은 글 작성 시 태그와 태그에 알 수 없는 속성값이 부여가 되기 시작했습니다. data-ke-size라고 하는 이 녀석은 폰트의 크기를 지정한 값으로 억지로 변경하는 옵션입니다. size16, size20, size24 등등등의 크기값이 큰 따옴표 안에 들어가버리는데 정말이지 여간 귀찮은것이 아닙니다. 물론 해결 방법은 있습니다. 글을 작성할때마다 해당 속성값을 수동으로 모두 지워버리는 것입니다. 이 방법에 대해서는 아래에 더 자세히 언급되어 있으니 한번 시간 괜찮으시면 읽어보시기 바랍니다. 티스토리 업데이트 (2021.5.12) 때문에 발생한 버그 오류 내용 및 해결 방법 티스토리 업데이트 (2021.5.12) 때문에 발생한 버그 오류 내용 및 해결 방법 안녕하세요. ..
자바스크립트 중 하나인 제이쿼리를 활용하여 a href에 URL 링크 주소가 들어가지 않고 그냥 #을 넣었을 경우 클릭을 하게 되면 페이지 맨 위로 올라가는 현상이 있습니다. 가장 기본이 되는 현상인데 이걸 원하지 않고 그냥 클릭했을 경우 아무런 반응이 없는, 즉 페이지가 제자리에 머물러 있게 만들고 싶은 경우 입니다. 두 가지 방법으로 진행이 가능합니다. jQuery 구성가장 먼저 소개하는 방법은 제이쿼리를 이용한 방법 입니다. 이 방법의 장점은 사이트 내 모든 a href="#" 을 사용하는 링크 태그에 클릭 방지를 걸 수 있는 방법입니다. 한 마디로 광역 마법인 샘 입니다. 코드는 다음과 같습니다. 이 스크립트를 안쪽에 그대로 삽입하시면 됩니다. 별도로 세팅할 필요가 없이 아주 간편하게 적용시킬 수..
친효스킨에는 현재 TOP 버튼이 적용되어 있습니다. 하지만 일부 스킨에서는 TOP 버튼이 없을 수 있습니다. 만약 여러분들께서 사용하시는 반응형 스킨에 위로 올라가는 TOP 버튼이 없다면 이 애드온을 통해서 만드실 수 있습니다. 적용하시면 최종적으로 이런 형태의 버튼을 확인하실 수 있습니다. 티스토리 스킨의 오른쪽 하단에 생성되며 가장 맨 위로 스크롤이 되어 있는 경우에는 버튼이 자동으로 사라집니다. 그리고 스크롤을 하단으로 조금만 내려보시면 다니 나타나는것을 확인하실 수 있습니다. 누르면 빠르게 다시 제일 위로 올라갑니다. 이제 세팅 방법을 살펴보겠습니다. jQuery 세팅하기먼저 자바스크립트의 한 종류인 제이쿼리를 세팅해야 합니다. 하나씩 따라해 주시기 바랍니다. 어렵지 않습니다. 먼저 아래의 스크립..
CSS에서는 마우스를 올렸을 경우에 애니메이션을 변경한다던지, CSS3 애니메이션을 사용하여 반복적인 움직임을 만들 수 있습니다. 왜 CSS에서는 클릭 이벤트를 만들지 않았을까요! 정말 너무 아쉬운 순간입니다. 버전이 올라가면서 부디 클릭 속성에 대한 설정 부분도 추가되었으면 좋겠습니다. 자바스크립트가 늘어날수록 웹페이지의 로딩 시간은 그만큼 길어지는데다 오류의 주요 원인이 될 수 있기 때문에 저는 CSS를 좋아할 수 밖에 없습니다. (사실 스크립트를 잘 몰라서...) 구글에서 CSS 관련 클릭 이벤트에 대해 검색해보니 역시 해결하신분들의 경험담을 확인할 수 있었습니다. 단 이 방법은 공식적이지 않으며 지극히 개인적인 방법이라는 것을 염려해 두셨으면 좋겠습니다. 개인적으로는 무척 마음에 들었던 방법입니다..
자바스크립트 언어 중 하나인 제이쿼리를 이용해서 티스토리 블로그나, HTML 관련 사이트에 흔히 볼 수 있는 TOP 버튼을 만들 수 있습니다. 아시다시피 이 버튼을 누르면 화면 맨 위로 자연스럽게 올라가는 것을 확인하실 수 있는데, 어떻게 만들어지는지 한번 알아보겠습니다. 참고로 이 방법은 절대적인 방법이 아니라, 코딩을 마크업 하시는 분들의 개인 취향에 따라 조금씩 내용이 달라질 수 있습니다. 여기에서는 제가 사용한 방법을 말씀드리겠습니다. 제이쿼리 jQuery 링크 걸기 먼저 HTML 문서의 안쪽에 제이쿼리 라이브러리를 불러오도록 만들어야 합니다. 보통은 1.8.1 버전을 많이 이용하지만 혹시모르니, 최신 버전까지 다 가지고 오도록 하겠습니다. 이 두개의 주소를 바로 아래에 붙여주시면 됩니다. 그리고..
스크립트 중 하나인 제이쿼리의 이벤트 중에 마우스와 관련된 내용입니다. 보통 마우스를 올리고 뺄 때 마우스오버(mouseover), 마우스아웃(mouseout)을 사용한다고 배웠습니다. 이와 비슷한 메서드 중에서 마우스엔터(mouseenter)와 마우스리브(mouseleave)가 있는데, 이 두가지의 차이점을 알아보도록 하겠습니다. 먼저 결론부터 말씀드리자면, 자식 요소들까지 영향을 주느냐 안 주느냐의 차이 입니다. 깊이의 차이라고 할 수 있습니다. 마우스가 올라가지는 영역이 지정된 요소 혹은 자신에게만 한정되게 할 것인지, 아니면 자식요소들까지 영역을 확장할 것인지에 대한 차이라고 이해하시면 좋을 것 같습니다. MouseOver/Out : 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 ..
제이쿼리(jQuery)를 활용한 이미지 슬라이드 방법입니다. 엄청 쉽습니다. 자바스크립트를 잘 몰라도 됩니다. 저도 편리하게 이용하고 있습니다. 제이쿼리는 일종의 자바스크립트 꾸러미라고 생각하시면 좋을 것 같습니다. 그리고 수많은 능력자분들이 만든 제이쿼리 꾸러미 중 하나가 바로 오늘 소개해드릴 bxSlider 입니다. BX슬라이더 공식 홈페이지 먼저 bxslider의 설치과정을 거쳐야 합니다. 하지만 설치라고해서 뭐 프로그램을 설치하는 과정이 아닌, html, javasctipt의 외부 링크를 추가하는 것 뿐입니다. 그래야 해당 링크의 주소에서 소스를 불러와 적용할 수 있기 때문입니다. 위에서 보시는 것 처럼 인스톨 버튼을 누르시면 해당 페이지로 이동하시게 됩니다. 두가지를 추가하시면 됩니다. HTML..
오늘도 유익한 자바스크립트를 하나 배웠습니다. CSS로 메뉴 스타일을 꾸미는 방법들은 앞서 2단 및 3단 드롭다운 메뉴를 만드는 부분에서 충분히 설명을 드렸습니다. 이번에는 자연스럽게 아래로 쓸려 내려오는 아코디언 스타일의 2단 메뉴 입니다. MAIN 01 MAIN 02 SUB 01 SUB 02 SUB 03 SUB 04 MAIN 03 SUB 05 SUB 06 SUB 07 먼저 HTML 부분 입니다. 메인 메뉴는 가로 스타일이며, 서브 메뉴는 세로 형태 입니다. 서브메뉴가 길어야 아코디언 효과를 제대로 만끽할 수 있으니까요. 다음은 CSS 스타일 부분 입니다. /*RESET*/ * { margin: 0; padding: 0; } body { font: 17px 'Nanum Gothic', sans-seri..
이 방법은 예전에 한번 말씀드렸던 제이쿼리를 활용하여 티스토리의 티에디션에 나만의 멋진 슬라이드는 넣는 방법과 관련이 깊습니다. 예전 강좌를 한번 살펴보신다음 이 글을 보셔야 이해가 잘 되실겁니다. 또한 단독적으로 선행되는 방법이 아니고, 같이 진행되어야 하니까 전 시간에 말씀드린 이미지 슬라이드 강좌까지 한번에 같이 살펴보시기 바랍니다. 티스토리 반응형 이미지 슬라이드 만들기+링크 거는 방법 (제이쿼리 활용) 이번 시간에는 슬라이드 이미지 위에 글씨를 넣는 방법을 알아보겠습니다. 일종의 자막을 넣는다고 생각하시면 됩니다. 보통 이런 경우는 해당 이미지에 대한 정보를 텍스트로 알리고자 할 때 많이 사용합니다. 주로 온라인 쇼핑몰에서 많이 사용되는 방법이죠. 현재 제가 관리하는 기어베스트코리아 티스토리 공..
제목이 다소 장엄한데 사실별거 없고 그냥 티스토리의 기능 중 하나인 티에디션 상단에 임의로 이미지를 넣어서 멋진 배너를 만드는 방법 중 하나를 소개하고자 한다. 까먹기전에 얼른 써 놔야 나중에 혹시라도 잊어먹어도 이 글을 보고 복습할 수 있기 때문에 철저히 개인위주의 글로 작성해 보고자 한다. 하지만 꼼꼼하게 작성할 것이니, 방문해주신 분들도 똑같이 따라하실 수 있을 것이다. TIP 본 글은 티에디션 전용입니다. 하지만 현재의 티스토리는 티에디션을 지원하지 않습니다. 그냥 참고만 하시면 됩니다. 이걸 해보겠다고 3일을 연구했다. 구글에서 찾고, 또 찾고, 이거 적용시켜보고 저거 적용시켜가면서 정말 끈질긴 노력을 했다. 그 결과 결국 해냈다. 어딘가 조잡한 태그지만, 그래도 최대한 깔끔하게 정리하기 위해서..