본문 바로가기

jquery

 (11)
jqeury 클래스추가 유용한 것 같다. 예전에 이 블로그 카테고리 변경하는 것을 알아보다가 우연히 클래스 추가하는 jQuery 함수를 알게 됐다. 클래스 추가는 .addClass라는 것을 사용해주면 되는 것이었다. 그래서 이것을 잊을 것 같아 티스토리에 사용하기로 했다. 참고로 네이버 블로그 등에서 jQuery는 사용할 수 없다고 알고 있으니 사용하지 말았으면 한다. 미리보기 티스토리는 댓글이 많으면 아래 그림을 보듯이 1번과 같은 이전 댓글 더보기라는 생겨 이전 댓글을 숨긴다. 이전 댓글을 보기 위해서 이것을 눌러야 하니 댓글이 삭제했다는 오해를 하지 않았으면 한다. 이 글에서 이전 댓글 더보기 버튼을 클래시 추가로 수정하는 과정을 아래에서 적으려고 한다. 클래스 추가 이 글에서 적을 것이 윗글을 읽었다면 짐작했듯이 jQuery에서 클래스 ..
부모 요소에 CSS를 추가하는 법을 알았다. 내가 알고 싶었던 정보인 부모 요소에 CSS를 추가하는 법을 알아 아래에 적고자 한다. 나에겐 티스토리에서 스킨 수정하거나 만드는 정도만 필요하니 더 깊게 들어가고 싶지 않다. 그러니 jquery를 사용하여 CSS를 자세히 공부하는 사람에게 도움을 되지 않을 것이다. 그런 사람은 이 글을 보고 아마 낚시라고 생각할 것이다. 낚시라고 생각해도 상관없다. 제목대로 부모 요소에 CSS를 추가하는 것에 대한 글이다. 아래 그림과 같은 페이지의 쪽 수 매기는 것을 만들 때 선택된 페이지 쪽 수의 배경색을 변하게 하는 것을 몰랐다. 즉 1번과 같이 3이라는 글자의 배경도 변하게 하는 것이다. 부모 요소에 CSS 추가하는 방법을 몰랐을 때는 3이라는 글자에만 효과를 주었다. 참고로 아래와 같이 쪽 수 매기는 것을 만..
jquery와 CSS3를 사용한 아이콘 나오기 이 블로그의 스킨을 부트스트랩 반응형 스킨으로 변경하고 확인하니 jQuery 를 사용한 것은 제대로 안 되네요. jQuery로 사용한 것은 CSS를 사용한 것처럼 보여야 합니다. 아마 부트스트랩과 충돌하는 것 같습니다. 그리고 스킨을 변경하니 다른 페이지에 있는 jQuery fancybox도 안되더라고요. 몇 년 전에 적었던 2011/12/16 - 티스토리 스킨변경, 적극 권하지 않는 이유라는 글이 생각납니다. 아래처럼 사진에 마우스를 가져갔을 때 보기 아이콘이 나오게 하는 것입니다. 이것은 jquery를 사용한 것으로 익스플로러 8에서도 잘되고 7은 확인하지 않았으니 보기 바랍니다. CSS3로 하는 방법도 있는데 그 방법은 익스플로러 8에서 안 된다는 것을 알았으면 합니다. 아래와 같이 하는 방법은 h..
HTML5와 CSS3, jQuery 사용시 생각할 사항 2 2013/04/16 - 익스플로러,jQuery 사용시 생각할 사항 1에서 우리나라 사람은 익스플로러 6,7,8,9를 사용하는 사람이 많다는 것을 알아야 한다. 여기에서 알아야 할 것이 jQuery 플러그인에서 많이 사용하는 HTML5와 CSS3의 속성중에 익스플로러 6,7,8,9는 지원하지 않는 속성과 선택자를 많이 사용한다는 것이다. 내가 jQuery 플러그인을 만드는 것이 아니라서 익스플로러 6,7,8를 고려하라고 하지는 못한다.아래에서 익스플로러에서 지원하지 않는 속성과 치환자로 jQuery를 사용했을 때 어떻게 보이는지 볼 것이다. 참고로 아래에 더보기를 클릭하면 윈도우별 기본 브라우저에 대해서 적었다.윈도우 XP - 익스플로러 6 : 우리나라 사람이 윈도우7 다음으로 많이 사용하는 윈도우 XP에..
롤오버실험,이미지 안쪽테두리와 CSS3 트랜지션(Transition) 삼성투모로우 블로그(티스토리)를 보고서 롤오버하면 이미지안에 테두리가 생기도록 해 보았다. 그래서 여기에서 소스를 얻어 마우스를 이미지에 가져가면 바같쪽이 아닌 안쪽에 테두리가 생기게 했다. 그런데 삼성투모로우 블로그에 어떻게 했는지 모르겠다.그래서 대강 흉내내기 위해 여기의 소스를 보고 CSS3의 transition(트랜지션)을 이용했다. 그런데 이 효과가 모바일 페이지와 PC 페이지에서 다르게 나온다. 모바일 페이지에서 보니 오른쪽 공간이 생긴다. 무엇이 문제인지 모르겠고, 알면 댓글 부탁한다. 그리고 transition의 시작과 마지막색의 일치하지 않는데 색변화를 조절할 수 있는지 알아봐야겠다. 이것에 대해서도 알면 댓글 부탁한다. CSS3의 트랜지션인 경우는 위 코드에서 파란색 글자처럼 했다. C..
RSS 스크립트,jquery rss 플러그인 포함 이 블로그 하단에 다른 블로그의 RSS 주소를 알아서 아이프레임(iframe)을 사용하여 블로그 하단에 넣었습니다. 티스토리 블로그에 다른 블로그 내용이 나와도 그렇게 하고 싶지는 않았으나 워드프레스를 만지다가 위젯에 RSS 추가라는 것이 있어 해보니 보기가 좋아 관련 스크립트를 찾아보았습니다. 참고로 여기에서 사용한 브라우저는 익스플로러(IE)가 아니고 크롬(Chrome)입니다. 크롬에서는 글의 날짜가 영어로 나왔습니다. 그 이유는 저도 모르겠는데 익스플로러에서는 한글로 나왔거든요. 익스플로러와 크롬을 제외한 브라우저인 사파리에서는 영어로 파이어폭스에서는 한글로 나왔습니다. - 음란물/온라인 게임 중독 예방 - 그래서 스크립트 소스를 찾아 위와 같이 했습니다. 위 그림을 이 블로그 하단에 있는 것이니 ..
jquery 플러그인, 티스토리 플러그인 제한 해결 방법 티스토리 블로그는 스킨을 설치할 수 있고 내 마음대로 스킨의 HTML/CSS 수정을 할 수 있습니다. 그러나 매맘대로 플러그인을 설치할 수 없다는 것은 티스토리 블로그를 해본 사람은 알 것입니다. 티스토리에서 플러그인 설치는 티스토리(다음) 권한이므로 네이버 블로그,다음 블로그라고 생각하면 될 것입니다. 티스토리 블로그에서 플러그인 설정이 아니라 플러그인 설치에 대해서 말하는 것이니 글 전체를 읽지않고 판단하지 마세요. 그러니 티스토리에서 플러그인 설치에 대한 권한이 있으니 실망할 필요 없을 것 같습니다. 여담으로 플러그인 설치는 티스토리 권한이니 마음에 안드는 플러그인이 정말 많았습니다. 제가 별로 사용하지 않는 플러그인을 마음에 들지 않았습니다. 예로 저 같은 경우는 SNS 플러그인을 사용하지 않는지..
모서리 둥글게,CSS가 아닌 jquery로 둥근 모서리 만들기 - 직접 해보기 들어가기 전에 jquery를 사용하여 각진 모서리로 둥글게 하는 것으로 저의 IE 8, IE Tester로 IE 6,7,8에서 보면 모서리가 둥글게 보였습니다. 그리고 PC 방에서 IE 7로 봐도 모서리가 둥글게 보였으니 IE에서 모서리를 둥글게 하지 못하는 것이 아님을 알기 바랍니다. 그리고 아이디명과 클래스명을 알아야 한다고 혹시 CSS로 둥글게 하는 것이 아닌가 생각할 것 같은데 CSS로 둥글게 하는 것이 아닌 jquery로 하는 것입니다. jquery1 둥글게 하고 싶은 div의 아이디명과 클래스명만 알면 모서리를 둥글게 하는 것입니다. 쉽기 때문에 제가 티스토리 블로그에 설치하려는 것을 설명하려고 합니다. CSS를 알 필요도 없고 단지 아이디명과 클래스명만 알면 되고, 네이버 블로그,다음 블로그..

티스토리툴바