대문블로그

Aggregate 테마로 스킨을 변경하였습니다. 새로고침하세요.

demun demun — Sat, 12 May 2012 21:31:31 +0900

이번 티스토리 스킨은 많은 기능을 포함하느라고 자바스크립트가 많습니다.
우선 모든것이 적용이 된것을 확인한후에 적용을 했는데도 대문블로그에서는 안되는것이 있군요.
아무래도 업로드가 완전치가 않은것 같습니다.

여기 이글은 보시는 분은 새로고침을 한두번 해주세요. 그래야 정상적으로 보입니다.

동일한 티스토리에서 충분이 테스트를 했는데.....
먼저 이미지 슬라이더가 안되는군요.
상단에 드롭다운 메뉴에서 이미지 슬라이더를 클릭하면 됩니다.

정상적인 모습.

현재의 비정상적인 모습.

정상적인 모습을 비디오로 담았습니다.

또 한군데는 사이드바에서 실행이 되는 비디오 갤러리입니다.
여러가지 비디오를 올려놓고 원하는것만 선택해서 그자리에서 바로 실행할 수 있는 기능인데......
이것도 잘 되던것인데 여기서는 안되는군요.

또 한군데는 3D 슬라이더 입니다.
여기에서 시간을 많이 보냈습니다.
이것도 로컬컴에서는 잘 되는데 티스토리에 업로드한다음 해보니 안되는군요....

나머지는 거의 정상적으로 보입니다만 역시 완전하게 준비를 해도 손을 봐야하는것이 ....
스킨 변경작업은 손이 많이 가고 제작은 더 많이 가는군요.

티스토리에서도 워드프레스의 모든 기능을 이용해보는것이 저의 목표였는데......
거의 됩니다만 현재는 약간의 버그가 있습니다.
좀더 다듬으면 될거 같아요.....

꼭 새로고침을 하세요....

스샷 남깁니다.

워드프레스 스킨을 티스토리 스킨으로 제작하고 있습니다.

demun demun — Thu, 10 May 2012 08:20:23 +0900

요즘도 워낙 글이 없어 아침에 짧게 시간을 내서 몇가지만 올립니다.
요즘 시간이 나는데로 워드프레스 스킨을 티스토리 용으로 변환을 하고 있는데, 중요한 점은 워드프레스에서 사용하는 좋은 점을 모두 티스토리에서 사용할 수 있도록 노력을 하고 있습니다.

일단 드롭다운의 두가지 형태.
첫째로 1단 드롭다운 형태.

두번째는 2단 드롭다운 형태.

드롭다운은 하위로 계속 늘어날 수 있습니다.

세번째로 슬라이더를 변환을 했습니다.

아래에 보면 섬네일도 제공하고 원하는 그림을 클릭하면 메인창에서 크게 보여지는 형식이고 좌우로 갈수도 있습니다.
슬라이더안에 글과 링크를 제공하며 이동도 합니다.
미디어로그를 편집에서 아예 슬라이더로 나오게 했습니다.

네번째는 이미지 갤러리

섬네일 이미지에 마우스를 올리면 확대창과 해당하는 링크로 이동하는 형태입니다.
아주 좋죠.^^

다섯번째는 글에 관련한 부분입니다.
티스토리도 글이다보니 글에 관련한 부분이 잘 보여져야 하지요....그래서 이 부분도 모두 사용할 수 있도록 해봤습니다.
먼저. 버튼의 모습.

본문에서 보여지는 박스의 모습.

클릭하면 보여지고 감쳐지는 기능의 모습.

다음은 탭을 사용하는 모습입니다.

되도록이면 거의 모든 기능을 이용할 수 있도록 제작중입니다.
한가지 아쉬운것은 컬러피커를 적용하지 못했다는 점인데.....
처음에 div 를 수정하는 바람에 자바스크립트가 변경이 되는 바람에....일이 많아져서 이건 포기했습니다.....이건 다음기회에 적용을 해봐야겠습니다.

현재도 계속 진행중이며 완성되면 제 블로그에 적용해볼 생각입니다.

Delucide 워드프레스 테마 티스토리용으로 변환

demun demun — Wed, 02 May 2012 01:00:00 +0900

워드프레스 스킨중에서 Delucide라는 아주 좋은 스킨을 발견했습니다.
티스토리용으로 변환하여 사용할수 있게 만들어 봤습니다.
요즘은 시간이 없는 관계로 작업을 많이는 못하지만 틈틈이 시간을 내어 만들어 봤습니다.
Delucide 테마의 특징은 아래와 같습니다.

1. 사이드바 관리.

사이드바에서 관리를 할수 있도록 만들었습니다.

위 이미지를 보시면 사이드바 1 이라고 적힌곳에는 반드시 사이드바1 이라는 메뉴가 와야 정상적으로 보입니다.
누구나 알아보기 쉽게 제작하였습니다.

그러므로 메인메뉴와 슬라이더를 넣거나 뺄수 있습니다.
물론 사이드바에 사용하는 사이드바3은 선택적으로 사용할수 있습니다.

2. 드롭다운 메뉴.

jQuery 를 이용한 드롭다운 메뉴입니다.

링크는 html 에서 직접 수정해줘야 합니다.

3. 다양한 테마.

간단하게 이미지 한장만 업로드를 하면 전체적인 테마가 변경이 됩니다.
기본테마를 제외하고 5가지 이미지가 더 있으며 파일업로드를 통해 간단이 5가지 테마를 더 사용할 수 있습니다.

테마의 느낌과 사용방법은 아래의 동영상을 참고하시기 바랍니다. 기본테마를 포함한 총 6개의 스타일중 4가지 테마입니다. 참고하세요.

teal 테마와 기본적인 사용방법의 동영상도 있습니다.
사이트에 가셔서 직접 확인하시기 바랍니다.
블랙 테마와 사용법 => https://vimeo.com/41234081
teal 테마 => https://vimeo.com/41338085

4. 본문 글쓰기.

본문에서 글쓰기를 할때 테마와 어울리는 버튼을 간단이 만들수 있습니다.
또한 Blockquote 도 적용되었습니다.

본문에 이미지나 파일이 첨부될때의 스타일입니다.
또한 본문에서 리스트를 사용할때의 스타일입니다.

참고적으로 전체적인 스샷이 없어 몇장 더 찍어서 올립니다. 참고하시기 바랍니다.
클릭해서 보시면 원본크기로 볼수 있습니다. 페이지상 작게 올립니다.

기본배경과 수정해야 할 부분을 포함한 텍스트 파일이 포함되어 있습니다.
어떤 파일이 있으며 어떤부분을 어떻게 수정해야 하는지 동영상으로 만들어놨으니 참고하시면 됩니다.
index.html 파일을 수정하는 방법.

이 스킨은 대문이 처음으로 배포하는 유료 스킨입니다.
기본적으로 티스토리 스킨을 조금은 사용할 줄 아는분이여야 어려움이 없다고 생각됩니다.
라이센스에 대한 문의는 hjm01@naver.com 으로 메일을 주시기 바랍니다. 댓글 허용안됩니다.

스킨을 미리보기 하는곳이 없어 스샷을 첨부합니다. 더보기를 활용하세요.

티스토리 초대장 배포합니다.

demun demun — Sun, 22 Apr 2012 15:41:04 +0900

티스토리 초대장 배포합니다.
댓글로 신청하세요.

비밀글에 체크하시고 어떤 블로그를 할것인지와 이메일 주소를 알려주세요.
한가지 이전에 하던 블로그가 있으면 주소를 적어주시면 더욱 좋겠습니다

i n v i t a t i o n

티스토리 초대장

+ 남은 초대장 수 : 00

안녕하세요!

티스토리에 보금자리를 마련하시려는 여러분께 초대장을 배포해 드리려고 합니다.

나만의, 내 생각을, 내 기억을 담는 소중한 블로그를 만들고 싶다면 티스토리로 시작해보세요!

티스토리 블로그는 초대에 의해서만 가입이 가능합니다. 원하시는 분은 댓글에 E-mail 주소를 남겨주시면 초대장을 보내드립니다. 남겨주실 때에는 꼭 비밀댓글로 남겨주세요!

초대장을 보내드리고 바로 개설하시지 않으신 분들은 초대장을 회수할 수도 있으니 바로 개설해주세요!

Yes

이런 분들께 드립니다!

1. 다른 블로그를 사용해보셨던 분

2. 이메일 주소가 정상적인 분

3. 블로그를 시작하려는 이유를 남겨주신 분!

이런 분들께 드리지 않아요!

1. 이메일 주소가 의심되는 분!

2. 이메일 주소를 남기지 않으신 분

3. 이유도 없이 달라고 하시는 분!

티스토리 이래서 좋아요!

1. 이미지, 동영상, 오디오, 파일까지! 무한 용량과 강력한 멀티미디어를 올릴 수 있어요!

2. 스킨위자드로 스킨을 내맘대로~ 거기에 기능 확장 플러그인까지!

3. 내가 원하는대로 myID.com으로 블로그 주소를 만들 수 있어요!

워드프레스 테마를 티스토리로 컨버팅하고 있습니다.

demun demun — Sun, 22 Apr 2012 15:39:01 +0900

얼마전에 워드프레스 스킨을 티스토리로 변환을 하였습니다.
http://demun.tistory.com/2092

대략 보시면 아시겠지요...
그래서 이번에는 제 스타일에 맞는 워드프레스 스킨을 하나 골라서 작업을 해보았습니다.

완전이 다 작업이 끝난것은 아니지만 하다가 멈추었습니다.
몇가지 맘에 안드는것이 있어서지요.....

너무 포스팅이 없어 근황을 소개하는 페이지 입니다.
위의 테마도 유료스킨인데 개인적으로 한번 변환을 해봤습니다.
티스토리 스킨도 워드프레스 테마처럼은 아니지만 다양한 스킨이 있었으면 좋겠네요....

워드프레스 Magazine 스킨 사용법

demun demun — Sun, 15 Apr 2012 22:43:13 +0900

개인적인 부탁으로 특정 사이트의 워드프레스 스킨을 티스토리용으로 변환해달라고해서 이틀동안 시간을 내서 마무리를 지었습니다.

만든사람은 잘 알지만 사용상의 편의를 위해서 변경해야할 부분을 사이드바에서 수정할 수 있도록 하였습니다.

변경할 부분은 아래 이미지를 클릭해서 보시면 됩니다.

사진이 너무 커서 더보기를 사용합니다.

스샷보기

위의 이미지를 보시면 1번~5번까지 표시를 한것이 보일겁니다.

사이드바에서 수정할수 있도록 한것이며 관리자화면에서 사이드바 수정화면을 보겠습니다.

정확하게 사이드바 1 에는 사이드바 1-topnav 라고 적힌 것을 넣어줘야 합니다.

앞에 사이드바 1~사이드바 5까지 번호를 넣어놔서 사용하는데는 무리가 없습니다.

사이드바 4번이 우리가 알고 있는 사이드바입니다.

이부분은 넣을것은 넣고 뺄것은 빼면 됩니다.

참고로 1,2,3,5번 모두 넣거나 빼도 레이아웃을 깨지지 않습니다. 다만 사이드바 4번은 4번에 정확하게 하나라도 있어야 합니다.

이 스킨에는 두개의 드롭다운 메뉴가 있습니다.

그것이 1번 2번입니다.

사이드바 1-topnav

사이드바 2-subnav

또 하나는 슬라이더 입니다.

슬라이더의 이미지를 넣으면 크기는 알아서 맞쳐서 나옵니다.

물론 작은것은 크게 못하고 큰것은 작게 보여집니다.

슬라이더의 이미지를 바꿀경우를 대비해서 그것도 사이드바에서 관리하도록 하였습니다.

슬라이더 하단에 버튼이 있는데 이걸 클릭하면 슬라이더를 감출수 있게 하였으며, 필요없으면 사이드바에서 슬라이더를 제거하면 됩니다.

링크 관리 방법

티스토리에서는 사이드바에서 모듈이라는것을 지원합니다.

링크를 수정할때 html 에서 코드를 대략이라도 볼줄 안다면 그대로 수정하면 되지만 만약 모른다면 사이드바에 해당하는 부분을 모듈을 생성해서 사용하면 됩니다.

예를들어.

아래처럼 사이드바 관리에서 카테고리부분을 모듈을 생성한다고 가정합니다.

태그편집기를 클릭해서 사이드바 4 자리에 놓고 편집을 클릭하면 코드를 넣을수 잇는 창이 뜹니다.

이름은 알아보기 쉽게 사이드바 4-카테고리 모듈 이라고 모듈이라는 단어만 추가해줍니다.

그다음 html 을 편집기를 열어서 해당부분 즉 카테고리 부분을 넣어줍니다.

아래의 노랑색 부분이 되겠죠.

넣어줬으면 기존의 사이드바 4--카테고리를 제거합니다.

여기서 제거한다고 해서 없어지는것은 아닙니다.

기존 html 은 그대로 있고 안보여진다는 것입니다.

그럼 이제 생성한 카테고리 모듈을 가지고 링크를 수정하면 됩니다.

html를 모르면 이 방법으로 사이드바의 1,2,3,5 번을 모두 만들어놓고 수정하면 좋습니다.

틀려도 걱정할것 없이 다시 수정하면 되니까요.

스킨은 만지면 만질수록 완성도는 더 높아집니다.

여기서도 더 많지면 더 좋은 스킨이 나오겠지만 그것역시 시간이 허락해야 하지요....

아참 이것은 워드프레스의 유료스킨입니다. 배포하지는 않습니다. 개인적으로 원하는 분이 있어서 컨버팅 한 것입니다.

궁금한 분을 위해 미리보기름 몇일간만 열어놓겠습니다. 구경할 분은 하세요. 여기입니다.

올블릿을 대체 광고비를 언제주는것인지?

demun demun — Tue, 03 Apr 2012 15:19:51 +0900

올블릿을 광고 수입이 그리 많지 않습니다. 하지만 덤으로 생각하고 달아놓고 있습니다.

더군다나 티스토리와 연동이 쉬워 쓰고 있습니다.

하지만 문제점이 있습니다.

다른곳과 비교해서 수입금 지급이 늦습니다.

이번에는 아무이유없이 수입금 지급을 늦추고 있습니다.

공지사항을 보니 아무이유없이 지급일을 늦추고 잇습니다. 해서 해당업체에 전화를 걸어 알아보았습니다.

올블릿을 전화가 없고해서 칵테일에 전화를 해서 알아보니 올블릿 담당자도 없고, 전화를 연결시켜줄수도 없고 무조건적으로 올블릿 홈페이지게 질문을 해보라는것입니다.

질문올리고, 답변받고하는 일련의 과정이 귀찮아 시간내서 전화를 걸었더니.....전화로는 아무것도 할수 없는것이였습니다.

칵테일의 서비스중 하나인 올블릿인데 담당자도, 관련일을 하는 사람도 없다고 무작정 온라인으로만 질문을 하라고 하더군요.

아무이유없이 그냥 지급일을 늦추는 것은 서비스 이용자에 대한 신뢰를 저버리는 것입니다.

IT 무료교육 정보입니다. 스마트폰 개발자와 관련한 분은 꼭 보세요.

demun demun — Fri, 23 Mar 2012 09:17:38 +0900

제가 이전에 배운곳이기도 합니다. 두군데에서 모두 배웠는데요. 현시점에서도 교육생을 모집하는 정보가 잇어 알려드립니다.
돈이 들지 않는 무료 교육이니 꼭 시간을 내서 배워보시기 바랍니다.

또 한군데는 앱 창작터입니다.

티스토리 초대장 배포합니다.

demun demun — Sun, 26 Feb 2012 16:45:01 +0900

티스토리 초대장이 아직 남아 있어 이렇게 배포합니다.
어떤 블로그를 할건지와 본인이 이메일 주소를 댓글로 적어주세요.

i n v i t a t i o n

티스토리 초대장

+ 남은 초대장 수 : 00

안녕하세요!

티스토리에 보금자리를 마련하시려는 여러분께 초대장을 배포해 드리려고 합니다.

나만의, 내 생각을, 내 기억을 담는 소중한 블로그를 만들고 싶다면 티스토리로 시작해보세요!

초대장을 보내드리고 바로 개설하시지 않으신 분들은 초대장을 회수할 수도 있으니 바로 개설해주세요!

Yes

이런 분들께 드립니다!

1. 다른 블로그를 사용해보셨던 분

2. 이메일 주소가 정상적인 분

3. 블로그를 시작하려는 이유를 남겨주신 분!

이런 분들께 드리지 않아요!

1. 이메일 주소가 의심되는 분!

2. 이메일 주소를 남기지 않으신 분

3. 이유도 없이 달라고 하시는 분!

티스토리 이래서 좋아요!

1. 이미지, 동영상, 오디오, 파일까지! 무한 용량과 강력한 멀티미디어를 올릴 수 있어요!

2. 스킨위자드로 스킨을 내맘대로~ 거기에 기능 확장 플러그인까지!

3. 내가 원하는대로 myID.com으로 블로그 주소를 만들 수 있어요!

갑작스런 휘트니 휴스턴 사망소식 알고보니 어두운 진행형?

demun demun — Sun, 12 Feb 2012 17:31:01 +0900

오늘 갑작스런 비보를 접했습니다. 가수 휘트니 휴스톤(Whitney Houston)의 사망소식어였습니다.
개인적으로 휘트니 휴스톤은 여가수 중 최고라고 생각하고 있었습니다.
고음을 멋지게, 그리고 힘있게 쭉~~ 내뿜는 몇 안되는 가수라고 생각하죠.
그런데 갑작스런 사망소식이라니....

미국 연예 전문 매체인 TMZ닷컴에서 미국 캘리포니아주 베벌리힐스의 베벌리힐튼 호텔 욕조 안에서 숨진 채 발견됐다고 합니다.

사망소식을 접하고 나니 그동안의 소식이 들립니다. 그도 그럴것이 정말 좋아하는 매니아가 아니라면 그의 소식을 잘 알수가 없겠죠.
이번 사망소식을 접하고 나니 이런 불미스런 일도 있었구나 하고 생각이 들더군요.

처음에는 불행한 결혼생활과 이은 마약 중독과 음주로 힘들어 했었고, 지인들에게 100달러를 빌려 생활할 정도로 빈곤하게 살았다는 이야기도 있었습니다.

휘트니 휴스톤하면 환상적인 목소리와 파워풀한 성량으로 정말 대단한 가수인데요.
예전에 보디가드라는 영화 아시죠.

그때 정말 대단했었는데요. 그 목소리는 아직 까지 감동입니다.
여가수 중 노래좀 한다 하는 분들은 꼭 이노래를 하곤 하더군요.
저만 그런건가요?

인터넷에 올라있는 휘트니 휴스톤 사진중에서 유독 이 사진이 꼭 무언가를 암시하는 듯 합니다.

고인의 명복을 빕니다.

파일트리를 이용한 접고 펴기 살펴보기(File Tree Expander)

demun demun — Sat, 11 Feb 2012 06:00:00 +0900

jquery 쿡북에 파일트리를 이용해서 접고 펴는 기능이 있습니다. 이 부분을 저도 배울겸 좀 자세하게 살펴보기로 합니다.
마찬가지로 저작권과 예제는 http://jquery-cookbook.com 에 있습니다.
현재 예제는 여기에 있으니 한번 살펴보세요.

다른 부분은 생략하고 jquery 부분만 살펴보겠습니다.
앞 예제에서 핵심은 tree.js 입니다. 이 부분이 제이쿼리로 접고 펴는 기능을 하는 코드가 들어 있습니다.
제가 아주 자세하게 주석을 달아놨으니 그냥 쭉~~ 읽으면 될겁니다.
참고로 들여쓰기를 하니까 블로그에서는 보기가 더 않좋습니다. 그래서 들여쓰기를 제거했습니다.
들여쓰기가 된 tree.js 를 첨부합니다.

tree.js


// 초기화.
function init_tree() {

// 요소가 존재하는가?
if (!$('ul.tree').length) { // tree클래스를 가지고 있는 ul이 길이가 없다면(!)
	return; // 빠져나간다.
}

// 확장과 축소.
$('p.tree_controls a.expand_all, p.tree_controls a.collapse_all').click(function() {
//a.expand_all, a.collapse_all 를 클릭하면 { } 부분을 실행해라.

// 클래스를 확인한다.
if ($(this).hasClass('expand_all')) { 
//만약 클릭한 요소에 클래스 expand_all 있으면(hasClass)

$(this).parent('p').next('ul').find('a.tree_trigger').addClass('tree_trigger_expanded').end().find('ul').addClass('tree_expanded'); 
// $(this) 클릭한 요소의 부모 P[.parent('p')]를 찾고 
// 다음요소인 ul을 찾고[next('ul')] 
// 클래스 .tree_trigger를 가지고있는 a를 찾아[find('a.tree_trigger')]
// 클래스 tree_trigger_expanded를 추가해라[addClass('tree_trigger_expanded')]
// 그다음 하던작업 즉 클래스 추가하는 작업을 중지해라 end()
// 그리고 ul을 찾아서[find('ul')] 
// ul 에 클래스 tree_expanded를 추가해라[addClass('tree_expanded')] 

return false;
} else { 
// 만약 클릭한 요소에 클래스 expand_all 없으면

$(this).parent('p').next('ul').find('a.tree_trigger').removeClass('tree_trigger_expanded').end().find('ul').removeClass('tree_expanded');
// 위와 설명은 같고, 클래스 tree_trigger_expanded 를 삭제해라 [removeClass('tree_trigger_expanded')]
// 위와 설명은 같고, 클래스 tree_expanded 를 삭제해라 [removeClass('tree_expanded')]
}

// 링크로 이동하지 않는다.
this.blur();
return false;

});

// 트리의 클릭 이벤트를 바인딩한다.
$('ul.tree a.tree_trigger').live('click', function() {

// 다음 <ul> 이 hidden인가?
if ($(this).next('ul').is(':hidden')) { 
// 만약 클릭한 요소 즉  a.tree_trigger 의 다음요소 ul이[next('ul')] 감쳐져있다면[is(':hidden')]

$(this).addClass('is(':hidden')').next('ul').addClass('tree_expanded');
// 거기에 클래스를 추가해라[$(this).addClass] 어떤클래스를??
// 감쳐져있는 [is(':hidden')] 다음요소 ul[next('ul')]을 찾아서 tree_expanded 클래스를 추가해라[addClass('tree_expanded');]

} else { 
// 아니면 즉 감쳐져 있지 않으면

$(this).removeClass('tree_trigger_expanded').next('ul').removeClass('tree_expanded');
// 클래스 tree_trigger_expanded를 삭제하고[removeClass('tree_trigger_expanded')]
// 다음요소 ul을 찾아서 클래스 tree_expanded를 삭제해라[next('ul').removeClass('tree_expanded')]
}

// 링크로 이동하지 않는다.
this.blur();
return false;
});

// 마지막 <li>에 클래스를 추가한다.
$('ul.tree li:last-child').addClass('last');
// ul.tree에서 마지막 자식인 li에[$('ul.tree li:last-child')]
// 클래스 last 를 추가해라[addClass('last')]

// 트리거의 상태를 변경한다.
$('ul.tree_expanded').prev('a').addClass('tree_trigger_expanded');
// ul 클래스 tree_expanded의[ul.tree_expanded]
// 앞 요소인 어트리뷰트 a[prev('a')]에
// tree_trigger_expanded 클래스를 추가해라[addClass('tree_trigger_expanded')]

}

// 작업시작.
$(document).ready(function() {
	init_tree();
});

어지간한것은 주석을 달아놨으니 알 수 있을겁니다.
이 부분을 잘 확장해서 이용하면 좀더 좋은 기능을 가진 코드를 만들수 있을것 같습니다.
예제로 코드 전문을 가지고 있는 html 파일을 올려드릴테니 html 을 살펴보시기 바랍니다.

1.html

수평 아코디언 메뉴 살펴보기

demun demun — Fri, 10 Feb 2012 06:00:00 +0900

jquery cookbook 에 수평 아코디언 메뉴가 있습니다. 좀더 배우고 익히고자 이렇게 글을 씁니다.
제이쿼리 수평 아코디언 메뉴는 쿡북 예제 사이트에서 코드와 데모 화면을 볼 수 있습니다.

우선 어떤 방식인지 대략 살펴봅니다.
첫번째 화면.

첫화면으로 빨강색으로 펼쳐져있는 모습입니다.

두번째 화면.

Green을 클릭했을때 이동하는 모습입니다.

세번째 화면.

Green이 왼쪽으로 이동완료한 화면.

즉 이미지를 클릭하면 왼쪽, 오른쪽으로 이동하는 아코디언 메뉴입니다.
전체코드는 아래 첨부한 파일을 다운로드 받아서 클릭해보시면 알 수 있습니다.
단 jquery 코드와 이미지 , 그리고 css 설정은 예제사이트의 주소로 했습니다.

horizontalAccordion.html

전체코드는 내용이 길어 생략합니다. 파일을 다운로드 받아서 보시기 바랍니다.
여기서 jquery 부분을 살펴보겠습니다.
먼저 코드를 보시죠.

$.fn.horizontalAccordion = function (speed) {
	return this.each(function () {
		var $accordionHeaders = $(this).find('h3'),
		$open = $accordionHeaders.next().filter(':first'),
		width = $open.outerWidth();
	    
		// initialise the display
		$accordionHeaders.next().filter(':not(:first)').css({ display : 'none', width : 0 });

		$accordionHeaders.click(function () {
			if ($open.prev().get(0) == this) {
				return;
			}

			$open.animate({ width: 0 }, { duration : speed });
			$open = $(this).next().animate({ width : width }, { duration : speed });
		})
	});
};

$(document).ready(function () {
	$('#accordionWrapper').horizontalAccordion(200);
});

설명.

var $accordionHeaders = $(this).find('h3');

$accordionHeaders 에 h3 를 찾아 담습니다. 그리고 아래의 것들도 같이 담습니다.

$open = $accordionHeaders.next().filter(':first')

위에서 담은 즉 h3의 다음요소중에서 첫번째 요소만을 필터링해서 open이라는 변수에 담습니다.

width = $open.outerWidth();

현재 패널의 너비 정보를 담고 있습니다. 이 모든것을 $accordionHeaders 라는 변수에 모두 담았습니다.

$accordionHeaders.next().filter(':not(:first)').css({ display : 'none', width : 0 });

출력을 초기화 합니다.
위에서 필터링한 즉 첫번째 요소만 필터링해서 $open에 담았는데요. 여기서는 안담은 요소 즉 :not 아닌것 뭐가 아닌것??? :first 첫번째가 아닌것만을 필터링해서 선택합니다.
즉 두번째줄 $open .... 에서 필터링한 요소가 아닌 모든것을 말합니다. 이요소를 css 설정으로 안보이게 합니다.
첫번째 패널을 제외한 다른 모든 패널의 너비가 0이여야만 안보이게 됩니다. 즉 첫번째는 보이고 나머지는 감추는 효과입니다.

$accordionHeaders.click(function () {
	if ($open.prev().get(0) == this) {
		return;
	}

부분은 클릭이벤트를 추가합니다. h3로 돌아가기이해 .prev 를 사용해서 앞요소로 이동하며, 클릭된 요소가 현재의 컨텍스트와 동일한지 검사합니다.

$open.animate({ width: 0 }, { duration : speed });
$open = $(this).next().animate({ width : width }, { duration : speed });

위에서 일치하는지 검사한 후 선택된 요소가 열려있는 패널이라면 너비를 0으로하고 애니메이션이 진행됩니다.
만약 열려있지 않다면 패널의 너비는 있는 너비 그대로 애니메이션을 진행합니다.
마지막줄에 제이쿼리를 반환하는데 현재 열리고 있는 패널을 애니메이션하는 중이기에 현재 시점의 패널을 $sopen 변수로 재할당하여 가장 최근의 패널로 설정하고 있습니다.

위 에제의 코드는 여기에서 볼 수 있습니다. 클릭해보시면 이해가 가실겁니다.
저작권과 참고는 http://jquery-cookbook.com 입니다.

jQuery 드롭다운메뉴 사용하는 방법-jquery.droppy.js

demun demun — Thu, 09 Feb 2012 06:00:00 +0900

jQuery 를 사용한 드롭다운 메뉴가 참 많습니다. jquery 가 워낙 성능이 뛰어나다보니 많은 제이쿼리 드롭다운 메뉴를 보셧을 겁니다.
그럼 나도 한번 드롭다운메뉴를 만들어보자...라는 취지에서 예전부터 유명했던 jquery.droppy.js 를 소개할까 합니다.
홈페이지를 보시면 예제와 사용법이 있습니다.

그런데 정작 한글로 된 소개글은 하나도 없더군요. 그래서 겸사겸사 소개합니다.
홈페이지 => http://onehackoranother.com/projects/jquery/droppy/

사용법을 알려들리기 전에 먼저 사이트를 하나더 소개하겠습니다.
위의 홈페이지보다 더 자세히 설명을 해놓은곳이 있어 이걸 예제로 들면 되겠다싶어 소개합니다.
먼저 코드와 예제는 아래의 사이트를 참고하세요.
http://www.css-lecture.com/template/2009/0622/

마우스를 Folder 에 갖다 대시면 하위 메뉴가 펼쳐집니다.

대략 사용법은 위의 사이트에 나와 있습니다.
티스토리에서 사용하시려면 먼저 jquery 를 스킨 편집에서 업로드 시킨다음 jquery 를 링크시켜야 합니다.

jquery.droppy.js

</head>위에 아래의 코드를 넣습니다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="./images/jquery.droppy.js"></script>
<script type="text/javascript">
	$(function() {
		$("#nav").droppy(); 
	});
</script>

그다음 html 마크업은 아래와 같습니다. 약간 수정했습니다.

<div id="globalNavi">
<ul id="nav">
	<li><a href='#'>Top level 1</a></li>
	<li><a href='#'>Folder</a>
		<ul>
			<li><a href='#'>Sub 2-1</a></li>
			<li><a href='#'>Folder</span></a>
				<ul>
					<li><a href='#'>Folder</span></a>
						<ul>
							<li><a href='#'>Sub</a></li>
							<li><a href='#'>Sub</a></li>
							<li><a href='#'>Sub</a></li>
							<li><a href='#'>Sub</a></li>
						</ul>
					</li>
					<li><a href='#'>Sub</a></li>
					<li><a href='#'>Folder</a>
						<ul>
							<li><a href='#'>Sub</a></li>
							<li><a href='#'>Sub</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href='#'>Sub 2-3</a></li>
		</ul>
	</li>
	<li><a href='#'>Top level 3</a></li>
	<li><a href='#'>Top level 4</a></li>
</ul>
</div>

스타일은 아래와 같습니다.
약간 수정했습니다. 수정한것은 아래 추가라고 표기했습니다.

ul,li	{ margin:0; padding:0; }
#globalNavi	{ background:#333; height: 28px; padding-top: 7px; text-align: center; }
#nav { width: 900px; margin: 0 auto; position: relative; line-height:1; text-align: left; }
#nav li { list-style: none; float: left; position: relative; }
#nav ul { display: none; position: absolute; top: 29px; left: 0; }
* html #nav ul { line-height: 0; }
#nav ul li { float: none; }
#nav ul { width: 120px; }
#nav ul ul { top: 0; left: 121px; }
#nav ul a { 
	display: block;
	width: 108px;
	background:#121212;
	padding: 6px;
	color: #FFF;
	border-bottom: 1px solid #FFF;
	opacity: 0.7;
	filter: alpha(opacity=70);
	zoom: 1;
	line-height: 1;
}
#nav ul a.hover { background: #444; }
/* 추가 */
#nav a { padding:5px 10px; color:#fff; }

이걸로 끝입니다.
하위로 무진장 펼쳐지는 드롭다운 메뉴를 볼수 있습니다.
이 jquery.droppy.js 는 사용법이 간단하고 ie6부터 모두 호환이 됩니다.
예전에 나왔지만 현재도 많이 사용합니다.

여기서 중요한것은 ul 의 id 인 #nav 를 jquery 선택자를 사용해서 선택만 한다는 점입니다.

이런식이죠.

$(function() {
	$("#nav").droppy(); 
});

스타일은 약간만 수정하면 확장할 수 있습니다.

플로팅 메뉴에 구글 광고 넣지 마세요.

demun demun — Wed, 08 Feb 2012 06:00:00 +0900

제가 스킨을 제작하면서 사용자들에게 편리함을 제공하기 위해 미리 구글 광고를 플로팅 메뉴에 넣었습니다.
스크롤하면 움직이는 플로팅 메뉴를 말합니다.
플로팅 메뉴는 여러가지가 있지만 제가 얼마전 제작한 스킨에 포함된 플로팅 메뉴는 jquery 로 제작된것이 아닌 순수 자바스크립트로 제작된 플로팅메뉴였습니다.

문제는 플로팅 메뉴에 구글광고를 넣으면 안된다는 점입니다.
제가 구글쪽에서 수신한 이메일을 한번 보시죠.

딱히 제가 구글에드센스 정책을 위반한것은 없고 플로팅 메뉴에 구글광고를 넣은것입니다.
제가 배포하는 스킨에도 예제로 미리 넣어둔 스킨도 있습니다.
현재는 제가 구글코드를 지웠지만 이전에 받아보신분은 이점을 꼭 참고하시고 제것이든, 본인것이든 구글광고는 플로팅 메뉴에 넣지 마시길 바랍니다.

계정 정지 당하기전에 꼭 수정하시기 바랍니다.

Stripe_LavaLamp 티스토리 2단 스킨

demun demun — Tue, 07 Feb 2012 06:00:00 +0900

Stripe_Default 스킨의 메인메뉴 부분을 라바램프 스타일로 수정한 버젼인 Stripe_LavaLamp 티스토리 2단 스킨입니다.
모든 내용은 Stripe_Default 과 똑같습니다.
단지 메인메뉴 부분만 변경된 것입니다. 수정에 어려움이 있는 분들을 대신해 제가 변경해서 배포하는것입니다.

자세한 사항은 Stripe_Default 스킨 배포글을 참고해주시기 바랍니다.

참고

Stripe_Default 티스토리 2단 스킨

메인메뉴 스샷을 첨부합니다.

참고

1. 정상적으로 블로그를 하는 사용자입니다.
2. 스킨을 적용한 다음 현재의 글에 트랙백을 넣어주셔야 합니다.(이것은 다른분에게는 미리보기를 , 적용하신분에게는 트래픽을 제공하니 일석이조입니다.)
3. 신청하실 때 적용할 블로그 주소를 알려주어야 합니다.

위 세가지 조건이 해당되고 스킨을 사용하고 싶다면 저에게 메일로 위의 참고사항을 복사해서 붙여넣기한 후 신청 바랍니다.
hjm01@naver.com

티스토리 스킨 어떤 스타일이 좋은가요?

demun demun — Mon, 06 Feb 2012 12:40:32 +0900

현재 또 스킨을 제작중에 있습니다. 좀 고급스러운 스타일을 만들려고 하는데...잘 안되는군요....
일단 이전 스킨에서 따올것은 따오고 변경할 것은 변경하고해서 스킨을 제작중에 있습니다.

근데 처음 제작했던 스타일이 좀 어두운것 같아서 수정을 하고 있는중인데요....
수정을 한다고 해서 더 좋다고는 말할수 없는거 같아 여러분들한테 의견을 물어봅니다.
쉽게 말해 검정 스타일과 갈색 스타일이라고 해두죠.

맨처음 제작한것이 검정 스타일입니다. 스샷 보고 참고하세요.
이미지를 클릭해서 원본으로 보셔야 정확하게 볼 수 있습니다.

윗 부분

아래부분

아래 CLOSE 라고 적힌 부분을 클릭해서 펼쳐진 경우입니다.
검정 스타일이라고 해두죠.

다음은 수정하는 스타일인데요. 갈색 스타일이라고 해두죠.
스샷 참고하세요.

아래 MORE 라고 적힌 부분을 클릭해서 펼쳐야 하는데 그냥 접힌것도 참고하라고 이번에는 접혀있습니다.
갈색스타일이라고 하고요.....

이 두 스타일중에서 다른점은 색상도 다르지만 네비게이션 부분에 스트라이프가 들어간것도 차이가 납니다.
원래 원하던 스타일은 좀 고급스럽고, 편안한 스타일을 추구할려고 하는데..... 잘 안되는거 같아요...

여러분은 두 스타일중에 어떤 스타일이 좋은가요??
또 왜 그 스타일이 좋은가요?

그냥 편하게 저에게 도움을 주시기 바랍니다. 댓글 부탁해요....

1.7.변경하기 전으로 돌아가기 .end()

demun demun — Mon, 06 Feb 2012 06:00:00 +0900

이전에는 필터링을 해서 요소를 선택하는 방법을 알아 봤습니다.
때로는 filter() 이나 find()를 사용하기 전으로 돌아가야 할 때가 있습니다. 즉, 이전 상황으로 되돌릴수 있는 방법이 필요합니다.
이런 역활을 하는것이 바로 end() 입니다.

먼저 end() 문법을 보세요.

end()

jQuery 커멘트 체인에서 사용하여 이전 확장 집합으로 돌아간다.

매개변수 : 없음.
반환값 : 이전 확장 집합.

예를들어 아래와 같은 구문이 있다고 가정합니다.

$('img').clone().appentTo('#test1').end().addClass('.test2');

이것은 img 를 복사(clone)하여 아이디 test1를 추가(appendTo) 합니다.
그런다음 end()가 나오기 때문에 복사(clone)하기전으로 돌아가서 img 를 선택합니다. 그 img에 클래스(test2)를 추가 (addClass) 합니다.

만약 end() 가 없었다면 test1아이디를 추가하고 바로 test2 클래스도 추가합니다.

이해를 돕기위해 아래의 예제코드를 보세요.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>text</p>
<p class="middle">Middle <span>text</span></p>
<p>text</p>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
	alert(jQuery('p').filter('.middle').length); //1을 출력
	alert(jQuery('p').filter('.middle').end().length); //3을 출력
	alert(jQuery('p').filter('.middle').find('span').end().end().length); //3을 출력
</script>
</body>
</html>

첫번째 구문은 모든 곳에서 p를 검색하고 p에 대해서 클래스 middle 가 있는것만 골라냅니다. 그런다음 .length를 써서 몇개가 있는지 alert 창을 사용하여 확인합니다.
위의 예제에서는 p는 3개가 있지만 middle 라는 클래스를 가지고 있는 p는 하나밖에 없지요. 그래서 1을 출력합니다.

두번째 구문은 middle 클래스를 가지고 잇는 p를 필터링하는 것까지는 같지만 end() 를 사용하여 필터링(filter)하기 전으로 다시 돌아가서 length를 수행합니다. 그래서 총 3개인 p를 찾아 3을 출력합니다.

마지막 3번째 구문은 end()를 두번사용해서 filter() 과 find() 로 변경되기 전으로 돌아갑니다. 그래서 원래의 p 래퍼집합을 반환합니다.

위 예제 파일의 결과는 여기를 클릭해서 확인해 보세요.

참고

DOM 요소 필터링하기(filter)
DOM 요소 선택하기
jQuery 셀렉터

DOM 요소 필터링하기(filter)

demun demun — Sun, 05 Feb 2012 06:00:00 +0900

dom 요소안에서 선택한 요소들중에서 추가적으로 제거하거나 새로운 요소를 만들경우가 있습니다.
이번에는 원하지 않는 요소가 있을경우 필터를 통해 제외하고 선택하는 방법을 알아보겠습니다.
jQuery 에는 filter 이라는 매서드가 있습니다.
이 메서드는 지정된 표현식과 일치하지 않는 요소를 제외하는 역활을 합니다.
먼저 설명을 보겠습니다.

filter

filter(expression)
전달받은 셀렉터 표현식이나 필터링 함수를 이용해서 확장 집합에서 엘리먼트를 필터링한다.

매개변수.
expression(String|Function)
확장집합에서 일치하지 않는 엘리먼트를 모두 제거하고자 jQuery 셀렉터 또는 필터링 조건을 결정하는 함수를 명시한다.
이 함수는 집합에 있는 각 엘리먼트마다 호출된다. 호출된 함수는 해당 시점의 엘리먼트를 함수 콘텍스트인 this로 이용한다. 호출결과로 fals를 반환하는 엘리먼트가 모두 집합에서 제거된다.

아래의 예제는 여러 링크중에서 external 클래스가 부여된 링크만을 필터링해내서 몇개인지를 알아내는 예제 코드입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<a href="#" class="external">link</a>
<a href="#" class="external">link</a>
<a href="#"></a>
<a href="#" class="external">link</a>
<a href="#" class="external">link</a>
<a href="#"></a></li>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
	//집합에는 4개가 남아있다고 출력된다.
	alert(jQuery('a').filter('.external').length + ' external links');
</script>
</body>
</html>

결과는 총 10개의 링크중에서 4개를 필터링하는 메세지가 나옵니다.

filter()메서드는 표현식이 아닌 함수를 전달하는것도 가능한데, 그런 경우에 함수는 래퍼 집합을 필터링하는 동작을 수행해야 합니다. 앞의 예제에서는 문자열 표현식을 filter()메서드에 전달했는데, 함수로 사용하는 방식으로 변경할 경우 아래와 같습니다.

<script type="text/JavaScript">
	//결과는 같음.집합에는 4개가 남아있다고 출력된다.
	alert(
		jQuery('a')
			.filter(function(index){ return $(this).hasClass('external');})
			.length + ' external links'
		);
</script>

filter(function.... 형식을로 나오며 함수의 이름은 없습니다. 이런식으로 익명할수를 사용하며, 함수안에서 $(this)를 사용하는것은 래퍼 집합안에 있는 각각의 DOM요소를 참조하는 것입니다.
집합 안에서 a 요소들이 external 이라는 클래스값을 가지는지(hasClass) 확인하고 있습니다. 만일 true 라면 해당 요소가 집합에 유지되며, false 라면 해당 요소는 집합에서 제거될 것입니다.
예제에서의 index 는 집합안에서 요소의 인덱스를 숫자형식으로 참조하기 위함입니다.

참고

DOM 요소 선택하기
jQuery 셀렉터
jQuery 코드 html에 넣는 방법과 위치

DOM 요소 선택하기

demun demun — Sat, 04 Feb 2012 06:00:00 +0900

jQuery 를 사용하여 DOM에 있는 특정 요소를 선택하는 방법을 알아보겠습니다.
먼저 <a> 요소를 예제로 넣고 어트리뷰트 요소가 몇개가 있는지 찾아보겠습니다.
먼저 전체 예제 코드를 보겠습니다. 참고로 jquery 버젼은 최신버젼이든 예전버젼이든 작동하는데는 별문제 없으니 jquery 를 로드한다는 것만 알아두면 됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/JavaScript">
     //6개의 요소가 있다고 메세지박스를 나타낸다.
     alert('페이지에 <a> 요소가 ' + $('a').length +  '개 있습니다.!');
</script>
</body>
</html>

결과.

6개의 a 요소가 있다고 메세지 창이 떴습니다.
html에는 총 6개의 a 요소가 있습니다.
우선 모든 <a>요소를 선택하도록 $('a') 를 사용했습니다. 마찬가지로 jquery('a') 로 해도 결과는 마찬가지 입니다.
a요소가 몇개 있는지 length 속성을 사용했습니다.

jquery 는 찾고자 하는 선택요소가 더 많이 있을경우 $('a1, a2, a3, #a4, .a5').lenght 식으로 아이디건, 클래스건 쉼표로 지정하기만 하면 모두 찾아줍니다.

jQuery 도 자바스크립트 이므로 아래처럼 해도 똑같은 결과를 얻을수 있습니다.

<script type="text/JavaScript">
     //6개의 요소가 있다고 메세지박스를 나타낸다.
     alert('페이지에 <a> 요소가 ' + $(document.getElementsByTagName('a')).length +  '개 있습니다.!');
</script>

DOM요소의 래퍼 집합 필터링하기.

CSS 표현식을 갖는 jQuery 함수는 두번째 매개변수를 가질수도 있습니다. 이 매개변수는 어떤 컨텍스트에 대해서 표현식을 기반으로 DOM요소를 찾아야 하는지를 jQuery 함수에게 알려주는 역활을 합니다.
이러한 두번째 매개변수는 DOM 참조이거나 jQuery 래퍼 또는 document 일 수도 있습니다.

다음 예제는 총 12개의 input 요소중에서 form 요소를 기반으로 찾는법하고, 배열형식인 .form[0] 을 이용하여 input 요소를 찾는법과 body 요소를 기준으로 찾는 방법의 예제입니다.

전체 예제코드는 아래와 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form>
<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />
</form>

<form>
<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />
</form>

<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />

<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/JavaScript">

 //1.컨텍스트 래퍼를 사용하여 모든 form 요소 안에서 input 요소를 찾는다. 8개의 input을 출력.
 alert('input 요소 ' + jQuery('input',$('form')).length + '개 선택');

 //2.컨텍스트로 DOM참조를 사용하여 첫번째 from요소 안에서 input 요소를 찾는다. 4개의 input을 출력
 alert('input 요소 ' + jQuery('input',document.forms[0]).length + '개 선택');

 //3.표현식을 사용하여 body요소안에 있는 모든 input 요소를 찾는다. 12개의 input을 출력. 
 alert('input 요소 ' + jQuery('input','body').length + '개 선택');

</script>
</body>
</html>

결과는 아래와 같습니다.
첫번째는 form 기준으로해서 input 요소를 8개 찾는 장면입니다.

확인을 클릭하면 document.forms[0].length 를 이용해서 첫번째 form에 있는 요소만 선택해서 4개의 input 가 선택되어진 화면입니다.

또 확인을 클릭하면 세번째인데요. body를 기준으로 모든 input 요소를 찾는 화면입니다.
input 전부인 12개 모두를 선택했습니다.

참고

jQuery 코드 html에 넣는 방법과 위치
jQuery 셀렉터

jQuery 셀렉터

demun demun — Fri, 03 Feb 2012 06:00:00 +0900

jquery의 선택자는 css 선택자오 동일합니다. 그래서 css를 알면 jquery선택자에서 매우 유리합니다.
jquery는 모질라 파이어폭스,인터넷 익스플로러 7, 사파리와 같은 최신브라우져가 지원하는 차세대 CSS를 사용해 고급 셀렉터를 지원합니다.

jQuery가 지원하는 기본 CSS 셀렉터
셀렉터	설명
*	모든 엘리먼트와 일치
E	태그명이 E인 모든 엘리먼트와 일치
E F	E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치
E>F	E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치
E+F	E의 형제 엘리먼트로 바로 다음에 나오는 모든 엘리먼트 F와 일치
E~F	E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치
E:has(F)	태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치
E.C	클래스명이 C를 가지는 모든 엘리먼트 E와 일치. E의 생략은 *.C와 동일함.
E#I	아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함.
E[A]	어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A=V]	값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A~=V]	값이 V로 시작하는 어트리뷰트 A를 가지는 모든 에리리먼트 E와 일치
E[A$=V]	값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A*=V]	값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

때로는 페이지에 있는 엘리먼트 위치나 다른 엘리먼트와 연관된 관계를 기반으로 엘리먼트를 선택햐야 합니다.
예를들어, 페이지에서 첫번째 링크나 홀수 및 짝수번째 문단 또는 리스트마다 자리한 마지막 아이템을 선택하는것과 같은 기법이 필요할 때도 있습니다.
이때 위치를 기반으로 한 셀렉터가 유용합니다.

jQuery가 지원하는 고급위치기반 셀렉터
셀렉터	설명
:first	페이지에서 처음으로 일치하는 엘리먼트. li a:first는 리스트 아이템의 첫번째 링크를 반환한다.
:last	페이지에서 마지막으로 일치하는 엘리먼트. li a:last는 리스트 아이템의 마지막 링크를 반환한다.
:fist-child	첫번째 자식 엘리먼트, li:first-child는 각 리스트의 첫번째 아이템을 반환한다.
:last-child	마지막 자식 엘리먼트. li:last-child는 각 리스트의 마지막 아이템을 반환한다.
:only-child	형제가 없는 모든 엘리먼트를 반환한다.
:nth-child(n)	n번째 자식 엘리먼트. li:nth-child(2)는 각 리스트의 두번째 리스트 아이템을 반환한다.
:nth-child(even\|odd)	짝수 또는 홀수 자식 엘리먼트. li:nth-child(even)은 각 목록의 짝수 번째 자식 엘리먼트를 반환한다.
:nth-child(Xn+Y)	전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인 경우 생략 가능하다. li:nth-child(3n)은 3의 배수번째 아이템을 반환한다. li:nth-child(5n+1)은 5의 배수 +1번째 아이템을 반환한다.
:even / :odd	페이지 전체의 짝수/홀수 번째 엘리먼트. li:even은 모든 짝수 번째 아이템을 반환한다.
:eq(n)	n번째로 일치하는 엘리먼트.
:gt(n)	n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치.
:lt(n)	n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치.

CSS면세만으로는 표현할 수 없는 특성이 있는 엘리먼트를 선택해야 할 때도 있습니다. 이럴때는 정의 셀렉터를 이용하면 편리합니다.

jQuery 정의 필터 셀렉터
셀렉터	설명
:animated	현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다.
:button	모든 버튼을 선택한다. (input[type=submit], input[type=reset], input[button], button)
:checkbox	체크박스 엘리먼트만 선택한다 (input[type=checkbox])
:checked	선택된 체크박스나 라디오 버튼만을 선택한다 (CSS에서 지원)
:contains(foo)	택스트 foo를 포함하는 엘리먼트만 선택한다.
:disabled	인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.
:enabled	인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.
:file	모든 엘리먼트를 선택한다 (input[type="file])
:header	해더 엘리먼트만 선택한다. 예를들어 <h1>부터 </h6>까지의 엘리먼트를 선택한다.
:hidden	감춰진 엘리먼트만 선택한다.
image	폼 이미지를 선택한다.(input[type=image])
:input	폼 엘리먼트만 선택한다.(input, select, textarea, button)
:not(selector)	selectior가 아닌것을 선택한다.괄호안의 조건이 아닌것을 선택한다.
:parent	빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.
:password	패스워드 엘리먼트만 선택한다(input[type=password])
:radio	라디오 버튼 엘리먼트만 선택한다.(input[type=radio])
reset	리셋 버튼을 선택한다.(input[type=reset]이나 button[type=reset])
:selected	선택된 엘리먼트만 선택한다.
:submit	전송 버튼을 선택한다.(button[type=submit] 이나 input[type=submit]
:text	텍스트 엘리먼트만 선택한다.(input[type=text])
:visible	보이는(visible) 엘리먼트만 선택한다.

1.1.jQuery 코드 html에 넣는 방법과 위치

demun demun — Thu, 02 Feb 2012 06:00:00 +0900

jQuery 를 좀더 학습하기 위하여 jQuery 를 연재하기로 하였습니다. 주관련 예제와 학습은 jQuery Cookbook 를 대상으로 하고 설명은 jQuery in Action 과 같이 병행할 생각입니다.
또하나는 티스토리 블로그이니만큼 연관성이 있는것은 같이 다룰려고 합니다.

첫번째 시간으로 jQuery 코드를 html 에 넣는 기본부터 시작합니다.
html 에 jQuery 코드를 넣은 방법은 두가지가 있습니다.
1. jQuery 의 최신 버젼을 삽입하기 위해 구글이 호스팅하는 CDN(content delivery network)를 사용하는 방법.
2. jQuery.com 으로부터 다운로드 받아 직접 서버에 업로드후 호스팅하는 방법입니다.

참고로 구글에서 빠른 호스팅을 하니 CDN을 이용하는 방법을 권장하는 바입니다. 구지 다운로드 받아서 서버에 업로드후 사용하는 방법은 특별이 필요한 경우에만 사용하기 권합니다.
먼저 CDN을 이용하는 방법입니다.

CDN을 이용하는 방법.

jquery.com 에 가시면 Download 버튼을 클릭하면 http://docs.jquery.com/Downloading_jQuery 주소로 갑니다.

아래로 스크롤하면 호스팅하는 주소와 최신버젼을 알 수 있습니다.

구글이 호스팅하는 1.7.1버젼을 사용해보겠습니다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

그럼 이제부터는 jQuery 코드를 맘껏 사용할 수 있습니다.

서버에 업로두 후 사용하는 방법.

jquery.com 에 가면 우측 하단에 다운로드를 받을수 있는 버튼이 있습니다.
현재 버젼은 1.7.1 이라고 나오고 압축된 31KB의 자바스크립트가 체크가 되어 있습니다.
그걸 다운로드 받으면 됩니다.

사용자가 jQuery 코드를 가지고 개발을 할것이 아니고 그냥 사용할 목적이라면 압축된 버젼을 사용하면 됩니다.
즉 버젼/jquery.min.js 이라고 나오죠. min 이 압축된 것을 말합니다.
그러니 사용할때는 압축된 것, 용량이 적을 것을 사용해야 합니다.

다운로드를 클릭하면 코드가 나오고 이걸 복사한후 에디터에 붙여넣기 합니다. 이름은 똑같이 jquery-1.7.1.min.js 를 하고 저장을 합니다.

jquery-1.7.1.min.js

티스토리의 경우, HTML/CSS 편집에 파일업로드를 통해서 jQuery 코드를 업로드 합니다.
그런 다음 아래처럼 사용하면 됩니다.

<script type="text/javascript" src="./images/jquery-1.7.1.min.js"></script>

그럼 이제부터 jQuery 코드를 맘껏 사용하면 됩니다.

jQuery 코드의 삽입위치와 참고사항.

jQuery 도 자바스크립트 파일입니다. 자바스크립트 삽입위치를 </body> 바로 위에 넣기를 권장합니다.
특수한 경우를 제외하고 DOM이 모두 로드되고 자바스크립트가 로드되어야 페이지가 빨리 열립니다.
더군다나 자바스크립트가 여러개일 경우는 더욱 그렇습니다.

또 되도록이면 여러개의 자바스크립트도 하나의 자바스크립트로 합쳐서 사용하면 페이지 향상에 도움이 됩니다.
jQuery 코드를 </head> 위에 작성하고 jQuery 삽입코드를 </body>위에 삽입하면 안됩니다.

즉 jQuery 삽입코드를 먼저 삽입하고 jQuery 코드를 넣어야 합니다. 아래 예제를 보시죠.

.....
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
	//jquery 코드
</script>
</s_t3>
</body>
</html>

다른 자바스크립트도 </body>위에 삽입하기를 권장합니다.

DOM은 로드되었지만 페이지가 로드되기전에 jquery 사용하기

jquery 는 일반적으로 dom 의 document 개체에 바인드되는 사용자 정의 이벤트 처리기인 ready() 메서드를 제공합니다.
ready() 메서드는 단일 매개변수로 함수를 갖는데, 이 함수는 dom 이 탐색 및 조작될 준비가 되면 실행되는 자바스크립트 코드를 갖습니다.
다음 코드는 페이지가 완전이 로드 되진 않았지만 dom 이 준비되었을 경우 alert() 윈도우를 띄우는 예제입니다.

<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
	jquery(document).ready(function(){
		//DOM 이 로드되지 않았기에 ready 이벤트를 사용해야 한다.
		alert(jquery('p').text());
	});
</script>
</head>
<body>   
<s_t3>

이런한 ready() 이벤트는 자바스크립트가 페이지의 흐름상 가장 위쪽인 </head>위에 있을 경우에만 필요합니다.
제가 위에서 언급했듯 </body>위에 작성할 경우는 ready()는 필요없습니다.
</body> 위에 작성할때는 아래처럼 그냥 사용하면 됩니다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
	alert(jquery('p').text());//DOM 이 로드되고 실행된다.
</script>
</s_t3>
</body>
</html>

참고사항.티스토리 플러그인 LiveRe.

티스토리의 소셜 댓글 LiveRe 를 사용하는 경우 자동으로 </head>위에 jQuery 1.4.2 의 코드가 삽입이 됩니다.

그러니 jQuery 플러그인이 필요한 경우가 아니라 간단한 jQuery 코드는 그냥 작성해도 됩니다.
즉 티스토리 소셜 댓글 플러그인인 LiveRe 를 사용하는 경우 </body>위에 그냥 jQuery 코드를 넣어도 됩니다.

Stripe_Default 스킨 사용시 수정해야 하는점

demun demun — Wed, 01 Feb 2012 06:00:00 +0900

Stripe_Default 스킨은 제가 미리 코드를 넣어 놓은것이 몇군데 있습니다.
그래서 사용할 때는 반드시 본인것으로 수정해서 사용해야 합니다.
스프라이프 스킨이 필요하시면 배포글을 참고하세요.

수정 할 부분을 하나 하나 알려드리겠습니다.
1. 구글 메타 태그.
<head>안에 구글 메타태그를 본인것으로 수정하세요.
구글 광고를 안하시는분은 아래 이미지의 한 줄을 그냥 삭제하시면 됩니다.

2. 소셜 링크.
아래 이미지처럼 저의 주소로 모두 되어 있으니 본인것으로 수정하시면 됩니다.
한가지 기본 RSS 주소를 사용한다면 RSS 주소는 그냥 두셔도 됩니다.
만약 피드버너등을 사용한다면 해당 주소로 변경하시면 됩니다.

3. 본문 구글 광고.
본문 위에 보여지는 구글 광고를 본인것으로 수정하세요.
아래 이미지를 보시면 <script type..... 라고 나오는 부분만 본인것으로 수정하면 됩니다.
만약 구글 광고를 안하시면 제가 주석을 다 달아놨으니 본문위 구글광고부터 //본문위 구글광고 끝까지 모두 삭제하시면 됩니다.

4. 플로팅 메뉴.
플로팅 메뉴는 사이드에서 삭제를 해도 됩니다. 사이드바에서 해당 부분을 삭제하거나 하단의 사이드바와 위치를 변경할 경우는 수정한다음 꼭 확인하세요.
이상하게 보여지는 지 확인하시고 수정하시기 바랍니다.

하지만 본인것으로 수정해서 사용하실려면 아래 이미지의 노랑색 부분을 수정해서 사용하세요.

여기까지 수정할 부분입니다.

참고

Stripe_Default 티스토리 2단 스킨 배포
demunWhite1Col-티스토리 1단스킨
demunWhite 2단 스킨
demunWhite 3단 티스토리 스킨
Gray Border - html5로 마크업된 티스토리 스킨

Stripe_Default 티스토리 2단 스킨 배포

demun demun — Wed, 01 Feb 2012 06:00:00 +0900

대문입니다. 제가 이제까지 사용하던 스킨을 배포합니다.
오랫동안 이것 저것 만지며 테스트를 거쳐왔기 때문에 오류가 거의 없지 않나 생각됩니다.
원래 스킨명은 Stripe(스프라이프) 였는데 메인메뉴와 하단의 푸터부분을 수정하면서 그 부분을 추가한 버젼도 필요하면 배포하려고 스킨명을 Stripe_Default 로 정했습니다.

스프라이프로 이름을 정한것은 각각의 배경에 스프라이프가 들어가도록 제작하여 특징을 주었기 때문입니다.
본문의 너비는 구글 광고가 두개 들어가는 사이즈로 680px 입니다.
플로팅 메뉴가 있는 우측 사이드바는 너비가 250px 입니다.
하단에 위치한 사이드바의 너비는 왼쪽과 오른쪽 똑같이 310px 입니다.

이 스킨의 특징을 하나 하나 알려드리겠습니다.

특징.

1. 대표글꼴 - 나눔고딕.
이 스킨에는 웹폰트를 사용하지 않았습니다. 웹폰트를 설치하려면 웹폰트를 사용하는 또 다른 방법(API) 이용을 보시면 됩니다.
대표글꼴로 나눔고딕을 설정했습니다.
그래서 나눔글꼴이 설치되어 있으면 나눔글꼴로 보이며, 맑은고딕, 돋음 ... 순으로 보여집니다.

2. w3c 통과.
html 에서는 마크업을 통과하였습니다.
여기를 클릭하시면 결과를 볼 수 있습니다.
CSS 에서는 티스토리에서 강제로 지정하는 스타일 외에는 오류가 하나도 없습니다. 이것도 여기를 클릭하면 결과를 보실수 있습니다.
w3c의 결과는 나중에 스킨이 변경되면 이 결과도 변경됩니다. 참고하세요.
혹 몰라 스샷을 첨부합니다.

CSS 는 이미지가 너무 길어 생략합니다.

3. 이미지 스트라이프와 품질.
스킨을 최적화 하려고 하나의 이미지에 이미지를 담아 background-position 으로 처리했습니다.

또한 on, hover 을 줘서 가독성을 향상 시켰습니다.

4. 아이콘 배치.
티스토리는 상단에 ttMenubar 라는 항목이 있습니다. 이걸 생각하지 않고 스킨을 만들어도 상관은 없으나 깔끔하게 배치하기 위해 왼쪽으로는 소셜아이콘이 위치하도록 하였습니다.

따로 소셜 아아콘 플러그인을 사용하지 않아도 링크만 수정해주면 사용이 가능합니다.
퀵메뉴에도 아이콘이 있습니다.
이것도 on, hover 을 사용해서 가독성을 향상시켰구요. 마우스를 갖다대보면 압니다.

5. 사이드 플로팅 메뉴.
사이드바처럼 보이지만 아래로 스크롤을 하는순간 따라 다니는 플로팅 메뉴가 적용이 되어 있습니다.
이 부분은 상당이 설명이 필요합니다.

플로팅 메뉴에 있는 모든 메뉴는 수정이 가능하도록 만들었습니다.
아래 이미지를 보시면 아실 겁니다.
플로팅 메뉴와 하단의 사이드바 메뉴는 각각 이동이 가능합니다.
단, 플로팅 메뉴의 세로너비가 한정이 되어있기 때문에 항목을 많이 놓을경우 다 안볼일수도 있습니다.
한두개 정도만 사용하세요.

1). 추천글에 사용하는 링크.
아래 이미지처럼 추천글등에 사용하려고 만들어놓은 링크입니다.
사이드바는 하단에 따로 존재합니다. 플로팅 메뉴를 활용하려고 만들어 놓은 링크입니다.
물론 사이드바 관리에서 삭제, 수정이 가능하도록 만들었습니다.

2) 따라다니는 광고.
구글 광고 사이즈 딱 맞추어서 제작을 했기 때문에 사이즈가 딱 들어갑니다.
물론 이것도 수정 가능합니다.

3) 링크 아이콘.
위에서 잠깐 설명했던 아이콘입니다. 클릭하면 홈, 아래로, 위로, 댓글로, 방명록으로 각각 이동하는 링크 아이콘입니다.

6. 부드러운 링크 이동.
플로팅 메뉴에 위치한 위로, 아래로, 댓글로 이동 버튼과 하단 푸터부분에 위치한 위로 이동 버튼을 클릭할때 부드러운 이동이 되도록 했습니다.
클릭해보시면 압니다.

7. 댓글.
댓글 부분에 신경을 썻습니다. 아이콘을 각각 다르게하여 어떤글이 비밀글이고, 방문자가 작성한 글인지, 그리고 관리자가 댓글에 대한 답글은 어떤글인지 구별하기 쉽게 하였습니다.
아래 이미지는 제가 다른 테스트 블로그에 가서 댓글을 단 모양입니다. demun 이라고 적힌 부분이 방문자 아이콘입니다.

이 아이콘은 방문자가 아이콘이 없을때 표시되는겁니다. 있을때는 방문자의 아이콘으로 표시됩니다. 아래처럼요.

7. 본문에 큰 이미지.
본문에 이미지가 큰것이 있을경우. 자동으로 본문의 사이즈에 맞쳐서 크기를 줄여줍니다.
아시는분은 아시겠지만 overflow:hidden 를 많이 사용합니다. 그럼 작은 이미지는 상관없는데 큰 이미지는 해당폭만큼만 보여지고 나머지는 짤려서 보이지 않게 됩니다.
하지만 이부분을 개선해서 모든 큰 이미지는 자동으로 본문 폭에 맞게 수정이 됩니다.

또 이부분은 ie6에서는 핵을 써야만 하는데 핵을 사용하지 않고 자바스크립트로 완벽하게 모두 지원합니다.

8. 마크업.
저의 경우 마크업 순서는 반드시 본문이 제일 먼저 오도록 합니다. 구글광고와 검색엔진때문에 본문이 사이드바보다 항상 먼저 오도록 마크업 합니다.
또 댓글 창을 먼저 마크업합니다.
방문자가 댓글을 달려고 할때 댓글이 없으면 상관없는데, 댓글이 많을 경우 무한 스크롤을 해야 합니다. 이점까지 저는 전부 알아서 댓글창이 먼저 오도록 마크업을 합니다.
제 블로그에서 댓글을 써보세요. 댓글창은 맨위에 있으니 쓰기 편할겁니다.

이 모든 사항은 크로스 브라우징 환경에 있어 IE6까지 모두 지원합니다.
w3c 테스트등 요건이 있어 CSS3에 해당하는 사항은 하나도 없습니다.그래서 웹폰트도 사용하지 않았구요.
추가적으로 사용할 분은 따로 수정해서 사용하면 됩니다.

이 스킨은 제가 구글광고나 링크등 추가적으로 미리 코드를 넣어놨습니다. 수정할 부분을 찾어서 꼭 수정한 다음 사용하시기 바랍니다.
Stripe_Default 스킨은 티스토리 사용자라면 누구나 무료로 사용할 수 있습니다.
하지만 아래의 조건이 있습니다.

1. 정상적으로 블로그를 하는 사용자입니다.
2. 스킨을 적용한 다음 현재의 글에 트랙백을 넣어주셔야 합니다.(이것은 다른분에게는 미리보기를 , 적용하신분에게는 트래픽을 제공하니 일석이조입니다.)
3. 신청하실 때 적용할 블로그 주소를 알려주어야 합니다.

위 세가지 조건이 해당되고 스킨을 사용하고 싶다면 저에게 메일로 적용할 블로그 주소를 적어서 신청 바랍니다.
hjm01@naver.com

참고

Stripe_Default 스킨 사용시 수정해야 하는점
외부에서 다운로드 받으스킨 적용하는 방법
스킨 변경시 반드시 알아야 할 7가지
스킨 수정 관련 팁 모음

티스토리 초대장 배포합니다.16장

demun demun — Tue, 31 Jan 2012 06:00:00 +0900

티스토리 초대장이 아직 남아 있습니다. 보내드렸는데도 개설하지 않으신분은 선택취소 했습니다.
현재 16장이 남아있으니 신청해주세요.

어떤 블로그를 하실건지와 이메일을 적어주세요.

i n v i t a t i o n

티스토리 초대장

+ 남은 초대장 수 : 00

안녕하세요!

티스토리에 보금자리를 마련하시려는 여러분께 초대장을 배포해 드리려고 합니다.

나만의, 내 생각을, 내 기억을 담는 소중한 블로그를 만들고 싶다면 티스토리로 시작해보세요!

초대장을 보내드리고 바로 개설하시지 않으신 분들은 초대장을 회수할 수도 있으니 바로 개설해주세요!

Yes

이런 분들께 드립니다!

1. 다른 블로그를 사용해보셨던 분

2. 이메일 주소가 정상적인 분

3. 블로그를 시작하려는 이유를 남겨주신 분!

이런 분들께 드리지 않아요!

1. 이메일 주소가 의심되는 분!

2. 이메일 주소를 남기지 않으신 분

3. 이유도 없이 달라고 하시는 분!

티스토리 이래서 좋아요!

1. 이미지, 동영상, 오디오, 파일까지! 무한 용량과 강력한 멀티미디어를 올릴 수 있어요!

2. 스킨위자드로 스킨을 내맘대로~ 거기에 기능 확장 플러그인까지!

3. 내가 원하는대로 myID.com으로 블로그 주소를 만들 수 있어요!

에디터플러스를 이용해서 블로그에 코드 구문강조하기

demun demun — Tue, 31 Jan 2012 06:00:00 +0900

이전에 제가 온라인 구문강조 하는 방법과 자바스크립트를 이용한 구문강조 기능에 관한 글을 쓴적이 있습니다.
이 방법은 위의 방법과는 다른 방법입니다.
특히 에디트플러스를 이용하는 방법입니다. 그리고 이 방법은 티스토리에서만 해당이 되는것이 아니라 네이버, 다음, 파란....등등 어디에서나 활용할 수 있는 방법입니다.

참고

온라인 구문강조 도구 7곳
티스토리 치환자 본문에 표시하는 방법
티스토리 구문강조(코드하이라이팅)하는 4가지 방법
설치없이 구문강조하고 티스토리 치환자 표시하는 방법

에디트플러스를 이용해서 블로그에 코드를 쓸때 구문강조하는 간단한 방법입니다.
에디트플러스를 이용하는 방법이니 에디트 플러스가 있어야겠지요.
있다치고 에디트플러스에서 복사할 코드를 전부 선택을 합니다. 그다음 마우스 우측버튼을 눌러서 HTML으로 복사를 선택합니다.

그런다음 티스토리 글쓰기 창에서 html 에 체크를 하고 붙여넣기를 합니다. 아래는 붙여넣기한 모습입니다.

html 을 체크해제하면 바로 확인도 가능합니다.

이제 저장만 클릭하면 구문강조가 된 코드를 볼 수 있습니다. 이 방법은 티스토리, 네이버... 등 어디에서나 사용할 수 있는 방법입니다.
하지만 여기에도 주의해야 할 점이 있습니다.

주의점.

코드를 그냥 붙여넣기 할 경우 긴 코드의 경우 본문을 벗어나는 경우가 있습니다.
예제 이미지를 보세요.

위코드는 제가 일부러 코드를 줄바꿈하지 않고 그냥 붙여넣기 한 경우 입니다.
그림처럼 코드가 본문을 벗어나 사이드바까지 넘어가는 현상이 발생합니다.
그래서 붙여넣을때 아래처럼 pre 에 style="white-space:pre-wrap" 속성을 추가해주면 간단이 해결이 됩니다.

참고로 white-space 속성이 어떤것인지 알아보려면 여기를 클릭하시면 알 수 있습니다.
그럼 어떻게 보여지는지 한번 볼까요???

참고로 에디터에 설정에서 글꼴을 저처럼 나눔고딕코딩으로 설정한 경우 그대로 글꼴까지 설정이 되서 복사, 붙여넣기가 됩니다.

이런식으로 간단이 에디트플러스에서 복사해서 글쓰기 창에 붙여넣기 하는 방법을 알려드렸습니다.
이러한 방법은 비단 에디트플러스에만 있지는 않습니다. 좋은 에디터에는 있는 기능이니 확인해보세요.

참고

티스토리 리본 제목 서식 만들기 3

demun demun — Sun, 29 Jan 2012 06:00:00 +0900

리본서식으로 첫번째는 둥근형태의 리본을 만들어 봤고, 두번째는 이미지없는 리본형태를 만들어 봤습니다.
이번에는 이미지를 활용한 리본인데요. 많이들 본 형태일겁니다.
먼저 어떤 형태인지 완성작을 한번 보세요.

사이드바에 전형적으로 사용하는 형태인데요. 이미지가 두개로 구성된것입니다.
이 방식의 장점은 너비가 커도 깨지지 않는다는 점입니다.

여기서 잠깐 참고할 점.
이미지가 한개인것은 너비가 유동적이면 사용할 수 없다는 단점이 잇습니다. 하지만 단 하나의 이미지로 사용한다는 간단한것이 장점입니다.
이미지가 두개인것은 너비가 유동적이여도 사용할 수 있다는 장점이 있습니다. 단점은 스타일을 입힐 요소(spna)가 하나 추가되어야 한다는 점입니다.

이미지가 두개인것의 장점을 알았다면 이것은 어느 스킨에나 활용할 수 있다는 점입니다.
먼저 준비물인 이미지가 필요하겠지요.
이미지는 디자인 리소스 - 리본 서식 3 에 있습니다.
리본 서식 3 => http://demun.tistory.com/2066

html 마크업.

html 은 제가 테스트로 티스토리에서 사용하는 클래스를 한번 주어서 사용해 봤습니다.
최신글에 해당하는 recentPost 라는 클래스를 주었습니다. 사이드바에 사용하는 방식으로 접근을 했으니 활용이 가능할겁니다.
정상적인 마크업과 다른점은 h3안에 span요소가 들어갔다는 점입니다.

<div class="recentPost">
	<h3>h3 title<span></span></h3>
	<ul>
		<li><a href="#">list 1</a></li>
		<li><a href="#">list 2</a></li>
		<li><a href="#">list 3</a></li>
		<li><a href="#">list 4</a></li>
	</ul>
</div>

티스토리 스킨에 사용하는 형태의 사이드바 마크업입니다.
스타일은 recentPost 와 h3 만 적용을 했습니다. ul 아래로는 전혀 스타일을 주지 않았습니다.
스타일은 아래와 같습니다.

.recentPost { 
	position:relative; 
	width:250px; 
	margin:20px 0 0 0; 
	padding:10px; 
	background:#ccc; 
}
h3 { 
	position:relative; 
	margin:0 -30px 10px 0; 
	padding:0 0 0 40px; 
	line-height:50px; 
	background:url(images/ribbon-left-orange.png) no-repeat;
	*zoom:1; /* ie6,7 */
	color:#222;
	text-shadow:0 1px 0 #fff;
}
h3 span { 
	position:absolute; 
	right:0; 
	top:0; 
	width:20px; 
	height:60px; 
	background:url(images/ribbon-right-orange.png) no-repeat;
	*zoom:1; /* ie6,7 */
}

아래의 파일을 images 폴더와 같이 두고 브라우져로 열어보면 맨위의 이미지처럼 보일겁니다.

ribbon.html

활용하기.

여러개의 이미지를 만든것은 다양하게 활용하기 위함입니다. 하나의 색상만 가지로 사용할수 없는 경우를 대비해서 여러가지를 사용하는 방법입니다.
마크업과 스타일이 약간씩 변형이 됩니다.
먼저 마크업을 한번 보실까요?

<div class="recentPost">
	<h3 class="orange">h3 title<span></span></h3>
	<ul>
		<li><a href="#">list 1</a></li>
	</ul>
</div>

<div class="recentPost">
	<h3 class="red">h3 title<span></span></h3>
	<ul>
		<li><a href="#">list 1</a></li>
	</ul>
</div>

h3에 클래스를 준거 말고는 크게 수정되지 않았습니다.
h3에 원하는 색상만 클래스로 주면 됩니다. 다운받은 모든 이미지를 다 사용하려고 모두 스타일을 지정했습니다.
CSS 코드는 아래와 같습니다.

.recentPost { 
	position:relative; 
	width:250px; 
	margin:20px 0 0 0; 
	padding:10px; 
	background:#ccc; 
}
h3 { 
	position:relative; 
	margin:0 -30px 10px 0; 
	padding:0 0 0 40px; 
	line-height:50px; 
	*zoom:1; /* ie6,7 */

	/* 추가설정 */
	color:#222;
	text-shadow:0 1px 0 #fff;
}
h3 span { 
	position:absolute; 
	right:0; 
	top:0; 
	width:20px; 
	height:60px; 
	*zoom:1; /* ie6,7 */
}

.orange { background:url(images/ribbon-left-orange.png) no-repeat; }
.orange span { background:url(images/ribbon-right-orange.png) no-repeat; }

.red { background:url(images/ribbon-left-red.png) no-repeat; }
.red span { background:url(images/ribbon-right-red.png) no-repeat; }

.blue { background:url(images/ribbon-left-blue.png) no-repeat; }
.blue span { background:url(images/ribbon-right-blue.png) no-repeat; }

.gray { background:url(images/ribbon-left-gray.png) no-repeat; }
.gray span { background:url(images/ribbon-right-gray.png) no-repeat; }

.black { background:url(images/ribbon-left-black.png) no-repeat; }
.black { color:#888; }
.black span { background:url(images/ribbon-right-black.png) no-repeat; }

.green { background:url(images/ribbon-left-green.png) no-repeat; }
.green span { background:url(images/ribbon-right-green.png) no-repeat; }

한가지 추가설정이라고 표시한 부분은 스킨에 모두들 color 이 지정이 되어 있습니다.이럴때는 이 부분은 지정하지 않아도 됩니다.

한가지 유의해서 볼것은 black 은 이미지와 글씨 모두 어두운색상이라 폰트컬러만 color:#888로 따로 설정했습니다.
이런식으로 지정하면 아래처럼 보입니다. 이미지가 길어 더보기를 사용했습니다.

이런식으로 사용이 가능합니다. 잘 아시는분은 아시겠지만 이미지중에서 ribbon-left.png 는 필요이상으로 길게 만들었습니다.
이유는 사이드바에만 사용한것이 아니라 본문에서도 사용하기 위함입니다.

사용하는 방법은 이전글중에서 티스토리 리본 제목 서식 만들기 1편을 보시면 알 수 있습니다.
즉 본문에 h요소에도 사용이 가능하고, 본문에 있는 제목요소에도 사용이 가능합니다.

참고

티스토리 리본 제목 서식 만들기 1
리소스 - 리본 서식 1
티스토리 리본 제목 서식 만들기 2
리소스 - 리본 서식 3

리본 서식 3

demun demun — Sun, 29 Jan 2012 06:00:00 +0900

티스토리에 적용하는 리본 서식을 계속적으로 쓰고 있습니다. 오늘은 그중에서 세번째에 해당하는 겁니다.
이것도 외국사이트에서 본것인데 그럭저럭 좋은 글같아 제가 따라해보고 배포, 공유하는 겁니다.

이미지들은 제가 일단 만들어서 사용해보고, 코딩해본것입니다.
폴더의 안에는 포토샵 파일인 psd 도 포함이 되어 있습니다.

포토샵 파일인 psd 의 경우 아래에 표시된 대로 그라디언트와 리본받침의 색깔만 적절하게 조정하시면 다양하게 사용할 수 있습니다.

다운로드 받아서 압축을 해제해서 사용하세요.

images.rar

참고

티스토리 리본 제목 서식 만들기 3

스킨 수정시 반드시 알아야 할 7가지

demun demun — Sat, 28 Jan 2012 06:00:00 +0900

제가 스킨을 수정하고 제작하고, 그리고 적용하면서 느낀점을 알려드립니다. 이제는 제가 스킨과 코드에 대해서 어느정도 아니까 수정이 가능하고 복구가 가능하지만 블로그를 처음하시거나, 코드를 잘 모르시는분들은 반드시 알고 넘어가야 할 부분입니다.

이점을 반드시 숙지하시고 스킨을 변경하거나 수정하거나 하세요.
이 부분을 간과하면 나중에 꼭 후회하게 됩니다. 꼭 참고하시기 바랍니다.

스킨을 수정하거나 변경하기전 제일 먼저 해야할것은 백업입니다.

1. html, css 코드 복사.

제일먼저 skin.html 과 style.css 를 먼저 에디터에 복사해서 붙여넣으세요. 그리고 알아보기 쉬운 이름으로 저장하세요..
왜냐면 스킨을 변경한 후 코드를 붙여넣기 위함입니다.
스킨을 변경한후 코드를 붙여넣거나 수정해서 넣기위한 것은 아래와 같습니다.

1. RSS 주소.
티스토리에서 제공하는 기본 RSS 주소인 경우는 신경 안써도 됩니다. 스킨 제작자들이 모두 만들어주니까요.
하지만 개인 도메인을 사용하거나 피드버너 등, 개인 RSS 주소를 사용하는분은 스킨을 수정한 후 반드시 RSS 주소도 변경해줘야 합니다.
변경전과 후는 아래와 같습니다.

<head>
....
<!-- 변경전 -->
<link rel="alternate" type="application/rss+xml" href="[#\#_rss_url_##]" title="[#\#_title_##]" />
<!-- 변경후 -->
<link rel="alternate" type="application/rss+xml" href="개인도메인주소" title="[#\#_title_##]" />
....
</head>

RSS 주소는 해더에도 있지만 사이드바에 있는 경우도 많습니다.
이럴때는 사이드바도 반드시 저장한 후 나중에 수정해줘야 합니다.

2. 광고 코드.
블로그에 광고를 하는 경우, 많은 분이 구글광고를 할 겁니다. 구글 광고뿐만 아니라 다른 광고도 마찬가지 입니다. 스킨 이곳 저곳에 넣어놓은 광고 코드와 그에 따른 스타일 코드도 모두 원상복구 시킬려면 반드시 변경하기전 복사해서 저장한후 나중에 다시 변경해줘야 합니다.

3. 서식 , 기타(추천버튼.....), 추가로 지정한 스타일.
블로글 사용하다보면 서식을 사용합니다. 또한 하단에 넣은 추천버튼이나 믹시...등등 추가적으로 수정을 하신분들은 나중에 스킨을 변경한 후 사용하려면 똑같이 복사해서 나중에 스킨을 변경한 후 수정 및 보완해서 붙여넣기 해줘야 합니다.
서식 스타일을 css 에서 지정한 경우와 추천버튼이나 기타 코드등을 css 로 지정한 경우 이것도 복사후 붙여넣기를 해줘야 이전과 똑같이 보여집니다.

저의 경우 jQuery 를 사용하기 때문에 관련 자바스크립트나 스타일이 추가적으로 있습니다. 이전과 똑같이 보일려면 스킨을 변경한후 수정 및 보완해서 붙여넣기를 해줘야 합니다.

4. 스킨에 포함되지 않은 기타 설정 및 스타일.
스킨에는 기본 디폴트 스타일만 지정한 경우가 많습니다.
나중에 추가적으로 스타일을 변경한 경우 입니다.
어떤 경우냐하면 댓글 같은 경우 입니다.

많은 분들이 댓글에 이미지로 스타일을 입히거나, 스타일을 따로 준경우 html 과 관련 css 를 백업해야 합니다. 어디가 어딘지 알고 백업해야 나중에 붙여넣기 할때도 편합니다.
그렇기 때문에 html, css 등을 편집을 할경우에는 반드시 주석을 포함해야 나중에 편합니다.

또 사이드바에도 해당되는 사항이지만 링크같은 경우 기본 스타일이 아닌 다른 스타일로 변경한 경우도 이에 해당이 됩니다.
html 전문을 백업을 한경우는 알아보기 쉬워 나중에 복구할때도 편합니다.

2. 사이드바 모듈 복사 후 저장.

먼저 복사 후 에디터에 붙여넣기 한 후 저장하세요. 그 다음 사이드바 모듈로 또다시 저장하기를 권장합니다.
왜 그러냐면은 스킨을 변경하면 사이드바의 너비가 수정이 되는 경우가 많습니다. 그럴때는 코드또한 수정을 하는 경우가 많습니다.
사이드바에서 모듈을 저장한후 다시 불러와서 수정을 해되 되지만 에디터에서 작업하는것이 무엇보다 편하기 때문입니다.
또 하나의 이유는 티스토리 버그입니다. 저장을 했는데 나중에 불러와지지가 않을때가 있습니다.

이때를 대비하기 위해 에디터에 저장하기를 권장하는 바입니다.
중요한 점은 반드시 저장을 하라는 이야기 입니다.
광고나 기타 코드도 사이드바에 많이들 사용합니다. 이 또한 저장한 후 스킨을 변경한 후에 다시 수정 및 붙여넣기 해야 합니다.

3. 스킨 저장.

티스토리에서는 스킨을 통채로 저장하는 기능이 있습니다. 이것을 제일먼저 소개하지 않은것은 한번 저장하면 코드를 볼 수 없기 때문에 에디터에 저장을 먼저 하라는 이유입니다.
스킨을 저장하고 다른 스킨으로 스킨을 변경하면 이전 스킨코드를 볼수 없습니다. 볼려면 다시 이전스킨으로 롤백해야 볼수가 있습니다.
즉 이전스킨과 현재스킨을 왔다갔다 하지말고 에디터로 저장한것을 참고하라고 에디터에 저장하라고 한것입니다.

저의 경우 워낙 스킨을 많이 만들고 수정하고 하다보니 뭐하나만 수정하면 아예 파일을 따로 만들어놓고 참고합니다.

스킨을 저장하는 방법은 관리자화면의 스킨에서 스킨저장을 클릭하면 됩니다. 적당한 이름을 넣고 저장하면 됩니다.

4. 스킨위자드의 지원 여부

티스토리에서 제공하는 스킨은 모두 스킨 위자드를 지원합니다. 그래서 초보자분들은 관리자화면의 스킨항목에서 추천하는 스킨으로 변경을 할경우 이걸로 쉽게 수정을 할 수 있습니다.

하지만 외부에서 스킨을 받아서 스킨을 변경할때는 그 스킨이 스킨위자드를 지원하는지 한번을 확인을 해야 합니다.
본인이 html,css 등 티스토리 스킨에 대해서 잘 알면 상관이 없지만 모른다면 확인을 하고 넘어가야 합니다.

스킨위자드도 스킨만 변경할때만 유용합니다.
광고 코드나 기타 수정을 하면 지원이 안되는 경우가 많습니다.
그러니 일단 수정을 하게되면 반드시 주석을 달아놓으세요....

5. 본문너비와 블로그의 스타일

본문너비가 상당이 중요합니다.
일단 본문너비가 변경이 되면 거의 모든 광고와 기타 설정들이 변한다고 보면 됩니다.
만약 초보자라면 이부분을 상당이 유의해서 봐야 합니다.
모든 설정을 수정해줘야 합니다.

이와 관련해서 사진을 많이 다루는 블로그의 경우 본문의 너비가 큰걸 사용하는경우가 많습니다.
그래서 본문에 삽입한 이미지가 큰경우도 많습니다.

나중에 변경한 스킨의 본문폭이 작을 경우 본문에 삽입했던 이미지들이 커서 레이아웃이 망가지는 경우가 있습니다.
이부분도 크로스브라우징을 염두해서 코드를 짠경우는 괜찮지만 그렇지 않은경우 레이아웃이 망가지는 경우가 더러 있습니다.

즉 스킨을 변경하기전,
이 스킨이 나에게 필요한가를 반드시 생각해보시고, 이 스킨을 변경함으로써 내가 해야할것들을 한번쯤은 생각해봐야 합니다.
초보자분들이 무턱대고 스킨을 변경한 다음 고생하는 부분이 바로 이런부분입니다.

저또한 스킨에 대해서 몰랐을때는 이런 고생을 했습니다.

6. 테스트용 블로그

스킨을 변경하기전 테스트 블로그에서 스킨을 미리 적용해보세요.

스킨을 제작하고 배포하는 분들이 반드시 먼저 테스트를 해봅니다. 하지만 환경은 다 달라서 모든것을 허용하지는 않습니다.
본인의 블로그에는 많은 글들과 키워드,서식, 이미지, ...... 등등이 있기 때문에 나중에 반드시 수정해야 할 부분이 생깁니다.

이런 부분을 최소화하기위해, 그리고 고생을 들하기위해서는 반드시 테스트용으로 티스토리 블로그를 하나 더 갖고 계세요.
그리고 거기에 먼저 적용을 해보고, 수정해보고, 나중에 다 되면 본인의 블로그에 적용을 하세요.

7. 도움을 청하세요.

만약 외부에서 스킨을 받아서 변경한 경우 스킨제작자에게 어디어디 부분을 수정한다고 정확하게 말씀하세요.
잘 모르는경우 본인이 수정한다고 이것 저것 만지면 시간은 한도없이 갑니다.
하지만 아는사람은 수정할 부분만 정확히 안다면 1분도 안되서 수정이 되는경우가 많습니다.

물어볼때는 반드시 정확하게 물어보세요.
어느부분을 어떻게 수정을 할것인지 정확히만 알려준다면 스킨 제작자는 금방 알려줄겁니다.

만약 안가르쳐주거나 어려움이 있다면 저에게 요청하세요.
시간이 허락하는대로 제가 도와드리겠습니다.

리본서식1이 적용되지 않을때 사용법

demun demun — Fri, 27 Jan 2012 13:00:43 +0900

서식이라는것이 스킨의 스타일에 어느정도는 영향을 받습니다. 그래서 각각 다른 스킨마다 서식이 약간씩 코드를 수정해줘야 합니다.
리본 서식 1 이미지 => http://demun.tistory.com/2065
리본 서식 1 적용법 => http://demun.tistory.com/2061

위의 글에서 적용이 안된다는 분이 있어서 제가 그분의 스킨을 수정해봤습니다.
방법은 두가지가 있는데요. 첫번째것이 가장 확실하고 깔끔합니다.
먼저 리본서식 1 적용법에 대한 글을 먼저 읽어야 이 글을 이해할 수 있습니다.

그럼 방법 중에서 첫번째 방법을 알아보겠습니다.

overflow:hidden 속성 제거

이 서식의 적용방법중 주의해야 하는코드가 바로 아래부분입니다.

h3.tForm {
    margin: 0 0 20px -15px; /* -15px를 본인의 환경에 맞추어서 수정하세요. */
}

이 마진이 왼쪽으로 15px 를 이동하면서 리본의 머리부분이 왼쪽의 라인부분에 걸치는듯한 효과를 주는겁니다.
그런데 문제는 스킨에 따라 왼쪽으로 이동할 경우 리본의 머리가 안보이는 경우가 있습니다.
자 그럼 해결방법을 찾아볼까요??

한 예로 라임님의 스킨을 예로 들겠습니다.
라임님 => http://ilime.tistory.com/

제가 서식을 적용해보니 아래그림 처럼 나왔습니다.

제대로 적용을 했는데도 왼쪽의 화살표쪽을 보시면 리본머리가 보이지 않습니다.
그것은 우측에 overflow:hidden; 이 있기 때문입니다.
이 뜻은 컨텐츠가 폭보다 크면 감춘다는 뜻입니다. 이것은 레이아웃을 잡을때, 즉 스킨을 제작할때 레이아웃이 깨지지 않도록 속성을 추가한것입니다.

이것을 제거해야만 서식리본이 왼쪽으로 갔을때 보여집니다.
제거한 후를 볼까요.

리본이 정상적으로 보입니다.
여기서 참고할 점.
overflow:hidden 속성은 큰 디비젼(div)에 주로 적용합니다. 위의 경우 container 만 보여줬지만 각 div 를 확인해야 합니다.
즉 위의 경우 container, mainShadow, main 이렇게 상위 디비젼에 overflow 속성이 적용이 되어 있습니다.
이 속성을 제거 해야 정상적으로 보여집니다.

overflow:hidden 속성을 제거하지 않고 사용하는 방법은 아래 두번째를 참고하세요.

h3를 감싸는 div 추가.

이 서식의 중요한 포인트는 리본이 왼쪽으로 걸리는듯한 효과입니다.
그러기 위해서는 왼쪽에 선(라인)같은 것이 보여줘야 그럴싸하게 보입니다.

위처럼 overflow 속성을 제거하지 않고 본문에서 사용할 경우는 h3 를 감싸는 div 를 하나 추가하고 거기에 약간의 스타일을 입히는 경우입니다.
즉 아래처럼 보여지는 경우죠.

본문왼쪽으로 리본이 나가서 걸치는 듯한 효과를 주는것이 아니라 본문안에 하나의 div 여기서는 hForm 을 하나 만드는 것입니다.
그리고 거기에 약간의 스타일을 주는것이지요. 코드는 이미지를 보시면 아실겁니다.

이 방법의 장점은 기본의 코드를 건드리지 않고 사용할 수 있다는 점입니다.
코드는 미리 서식을 정해놓고 불러와서 사용하면 됩니다.

그럼 매번 코드를 작성하지 않아도 되고 제목만 입력하면 되지요.
이것이 두번째 방법입니다.

제가 배포한 글에 이상한 점이 있으면 댓글 달아주세요. 그리고 물어보세요.
시간이 허락하는한 도와드리겠습니다.

참고

리본 서식 1
티스토리 리본 제목 서식 만들기 1
티스토리 리본 제목 서식 만들기 2
티스토리 리본 제목 서식 만들기 3(2012.1.29)

티스토리 리본 제목 서식 만들기 2

demun demun — Fri, 27 Jan 2012 06:00:00 +0900

이번에는 이미지를 사용하지 않고 제목 서식에 사용하기 좋은 방법을 알려드리겠습니다.
이 방법은 외국 사이트에 올라온 것중에서 코드만으로 스타일을 설정하는 방법이 좋아 소개합니다.
출처는 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-practical-css-shapes/ 입니다.

제가 일단 적용을 해봤습니다.
제 블로그 제목에 보면 이것이 설정되어 있습니다. 한번 보시죠.

이 방법의 장점은 이미지를 사용하지 않기 때문에 글씨가 길어져도 스타일이 깨지지 않고 그대로 적용할 수 있다는 점입니다.
반면 단점은 CSS 7이하는 지원되지 않는다는 점입니다. 그렇다고 해도 깨지거나 하지는 않으니 적용할만 합니다.
일단 IE6에서 어떻게 보여지는지 한번 보겠습니다.

깨지지는 않지만 리본형태의 왼쪽이 젼혀 나오지 않습니다.
마찬가지로 IE7은 어떨까요?

마찬가지로 왼쪽이 안보입니다. 이건 배경을 적용하는것이 아니라 border 로 적용하는것이라 하위 브라우져는 적용이 안됩니다.
자 이제 적용하는 방법을 알아보겠습니다.
위에서 알려준 사이트에는 제목에 해당되는 어트리뷰트가 h1 이지만 티스토리에서는 각 스킨마다 다를수 있으니 꼭 확인하고 적용하기 바랍니다.
저의 경우는 아래 이미지에 보시다시피 h2 에 적용이 되어 있습니다.

이런식으로 잘 모를경우 파이어폭스의 firebug 를 이용하세요.
이제 html을 수정해보겠습니다.

titleWrap h2 에 제목이 설정되어 있으니 아래처럼 설정하면 됩니다.

html 수정하기.

html에서 span 요소인 arrow 를 추가해줘야 합니다.

<!-- 
치환자인 [#\#_article_rep_title_##] 를 검색하셔서 아래처럼 수정해주세요.
-->
<h2><a href="[#\#_article_rep_link_##]">[#\#_article_rep_title_##]</a><span class="arrow"></span></h2>

티스토리에서는 똑같은 치환자를 여러군데 사용합니다. 예를들어 공지사항, 비밀글....등에 사용하니 치환자가 있는 곳에서 h2 인지 확인하시고 전부 arrow 를 넣어주세요.

또 하나 수정해야 할곳이 있습니다.
비디오를 잘 보신분은 아시겠지만 버그가 있으니 </head>위에 아래처럼 코드를 넣어주세요.

.....
<!--[if IE]>
	<style>
		.arrow { top: 100%; }
	</style>
<![endif]-->
......
</head>

이것으로 html 수정은 끝입니다.

css 수정하기

css 편집에서 아래의 코드를 붙여넣기 해주세요.

.titleWrap h2 { 
	 background: #e3e3e3;
	 background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
	 background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
	 padding:5px 20px 10px 40px;
	 margin:0 0 0 -35px;
	 position: relative;
	-moz-box-shadow: 1px 1px 3px #292929;
	-webkit-box-shadow: 1px 1px 3px #292929;
	box-shadow: 1px 1px 3px #292929;
	color: #454545;
	text-shadow: 0 1px 0 white;
}
.arrow {
	 width: 0; height: 0;
	 line-height: 0;
	 border-left: 20px solid transparent;
	 border-top: 10px solid #c8c8c8;
	 top: 104%;
	 left: 0;
	 position: absolute;
}

이제 모든것은 끝입니다. 본인의 스킨에 제목부분에 스타일을 한번 보시고 수정할것이 있다면 수정하세요.

참고

티스토리에 리본 제목 서식 만들기 1