jQuery 아코디언 등 거의 모든 것이 가능한 티스토리

우선 다음뷰의 게임 카테고리에 발행하는 분께 죄송합니다. 글을 보듯이 게임과 아무 관련이 없는 글입니다. 제가 실수로 이 글을 게임으로 발행했는데 원래는 인터넷에 발행하려 했습니다. 어제까지 제가 즐겨사용하던 마우스 왼쪽 버튼에 문제가 생겨 다른 마우스 사용에 익숙하지 않아서요. 

티스토리에서 할 수 있는 것

여기서 말할 블로그는 네이버 블로그,다음 블로그,싸이월드 블로그,이글루스을 말하는 것입니다. 그리고 블로그 자체에서 모든 것을 해결하는 것입니다. 이 글에 이의가 있다면 대강이 아닌 정독하고 댓글을 달기 바랍니다.  블로그를 하다보면 어려운 내용의 글은 대충 읽고 태클을 거는 댓글을 다는 사람이 꼭 있습니다. 지적하는 댓글이 글에 있는데 말입니다. 그럴때는 참 답답합니다.

이 페이지에 사용한 스크립트는 이 블로그 추천스킨,공지사항에서도 볼 수 있는 jQuery를 사용한 아코디언(Accordion)입니다. 저는 구글에서 jquery 아코디언 플러그인을 검색할 때 jquery accordion plugin이라고 검색합니다. 저는 영어 페이지를 어느 정도 읽을 수 있는지라 영어 페이지를 검색합니다. 한글 페이지를 검색하고 싶다면 한글을 입력하는데 jquery 아코디언 플러그인이라고 하면 될까 모르겠네요. 한글로 소개한 스크립트의 경우는 익스플로러에서만 되는 스크립트가 많더라고요. 예전에 마우스 오른쪽을 금지하여 메시지를 보여주는 스크립트도 익스플로러에서만 작용하더라고요. 각설은 이 정도로 하고 아래에서 아코디언은 티스토리에서 구현할 수 있다는 글을 적겠습니다.

이 페이지에서 볼 수 있는 아코디언(accordion)을 구현하자면 스킨의 HTML이 수정가능해야 하며 스킨의 HTML에서 자바스크립트를 지원해야 합니다. 그러면 네이버 블로그,다음 블로그의 경우는 HTML이 수정 불가능하고 이글루스의 경우는 스킨의 HTML을 수정할 수 있는데 HTML에서는 자바스크립트를 지원하지 않는다고 알고 있고 자바스크립트를 위젯형태로 삽입해야 한다고 알고 있습니다. 이글루스의 경우는 가능할 수 있겠는데요.  위 그림에서 HTML에 직접 자바스크립트를 사용할 수 있다는 것을 설명합니다.

또한 css,js 파일형식의 파일을 올려야 합니다. 전에 알았는데 윗 그림을 보면 알 수 있듯이 이글루스는 단지 JPG,PNG 등과 같은 이미지 파일만 올릴 수 있다는 것을 알았습니다. 티스토리의 경우는 이미지 파일만 아니라 모든 파일을 올릴 수 있습니다. 그러므로 css,js 파일은 올릴 수 없으니 아코디언을 구현하기 어렵습니다. 혹시 다른 곳에서 css,js 파일을 링크로 가져오면 된다고 말하지 마세요. 파일을 링크형태로 가져오지 않는다면 js를 위젯으로 css는 스킨의 CSS에 넣을 수 있을 것 같습니다.

그밖에 할 수 있는 이 블로그에서 볼 수 있는 것은 아래와 같습니다. 그리고 이 아코디언은 스마트폰에서는 되지 않습니다. jquery 모바일을 사용하면 아코디언이 되는데 문제는 jquery 모바일은 HTML5를 사용하고 익스플로러 7,8은 HTML 5를 지원하지 않으니....

가로 아코디언,각진 모서리를 둥글게 하는 것 .부드럽게 이동하는 것,플로팅 배너(스크롤을 이동할 때 따라오는 이미지),사이드바에서 볼 수 있는 슬라이드(사이드바에 이미지 등록하는 것이 아닙니다), 헤더와 사이드바에서 볼 수 있는 숨기고 감추기입니다. 혹시 글에서 싸이월드 블로그에 대해서 설명하지 않아 섭섭할 것 같은데  싸이월드 블로그는 에디터에서도 HTML 자체를 사용할 수 없습니다. 블로그를 하면서 HTML/CSS/자바스크립트를 보기 싫으면 싸이월드 블로그에 가도 좋을 것입니다.

이의가 있다면 반드시 봐야 할 글

이 글에서 언급한 것은 두가지를 읽으세요. 여기서는 언급한 블로그는 네이버 블로그,다음 블로그,싸이월드 블로그,이글루스이며 타 블로그나 호스팅에 설치하여 하는 워드프레스,텍스트큐브(태터툴즈),텍스타일 블로그가 아닙니다. 그리고 블로그 자체에서 모든 것을 해결하는 것입니다.

이 아코디언을 구현하면서 생각한 점

제목을 클릭하면 펴진 상태로 있는 것이 좋은데 아코디언을 하다보니 제목을 누르면 좁혀지게 만든 것 같습니다. 다른 것을 클릭하면 다른 것도 오픈된 상태가 되게 하는 것에 대한 소스나 옵션을 알아봐야 겠습니다. 지금은 아닌데 예전에 네이버 블로그에서 더보기를 클릭하면 무조건 상단으로 이동했는데 지금은 아닙니다. 처음 글이 길 경우는 화면이 작은 경우는 위로 가야 하니 짜증이다. 블로그위에 있는 추천스킨이나 공지사항은 첫글이 길지 않아 그런 것이 없을 것입니다.  jquery1

무료팩스

BY 엔팩스