이글을 읽기전에 이전 '준비하기' 포스팅을 읽으시면 더욱 도움이 됩니다. (워드프레스 스킨 변환하기-준비하기)
이전 포스팅을 읽고 오셨다면 준비는 모두 끝나셨겠죠? 그럼 WP테마뷰어 사이트에서 자신의 맘에드는 스킨을
발견하셨으리라 생각합니다. 먼저 마음에 드는 스킨파일을 다운로드 하신다음에 그 다운받은 폴더안의 다음
파일들을 복사해서 새로운 폴더로 붙여넣기 합니다. style.css파일과 images폴더 통째를 새로운 폴더로 이동시켜
주세요. 이 새로만든 폴더는 태터툴즈용 스킨을 변환한 작업물을 저장할 장소 입니다.
일단 다운로드해서 해당파일을 옮기셨으면 다시 테마뷰어 사이트로 갑니다. 살펴보시면 TestRun을 할 수 있는데
클릭하셔서 테스트창을 띄워놓으세요. 브라우저는 저번 시간에 말씀드렸던 FireFox로 사용하세요. 그 다음으로는
가장 중요한 확장기능인 firebug를 활성화 시킵니다. 브라우저의 오른쪽하단에 보시면 초록색 원에 흰색 체크
표시가 있는 버튼입니다. 클릭하셔서 활성화 시키시면 다음과 같은 창이 뜹니다.
이전 포스팅을 잘 읽으신 분은 어느정도 사용법을 숙지하고 계실겁니다. 우리가 사용해야할 탭은 Html탭입니다.
어떤 식으로 레이아웃이 짜여져 있는지 알아 볼 수 있습니다. 또한 Inspect를 이용하면 직접 마우스로 클릭해서
어느부분이 어떻게 짜여져 있는지를 손쉽게 알 수 있는 무척이나 유용한 툴입니다. 테스트사이트에서 파이어
버그를 켜놓으시고 Html탭으로 가시면 다음과 같은 창이 또 뜹니다.
왼쪽은 각각 엘리먼트가 어떻게 짜여져 있는지 종속관계로 표시해주고 오른쪽은 그 엘리먼트에 어떤 스타일이
적용되어있는지 바로 보여줍니다. 직접 현재창에서 수정도 가능합니다. 하지만 우리가 사용할 기능은 아닙니다.
우리가 주목해야할 부분은 왼쪽란입니다. 같은 형식으로 레이아웃을 짜줘야 합니다. 헷갈릴수도 있으니 천천히
잘 따라오시길 바랍니다. 우선 엘리먼트중에서 body부분만을 열어 똑같이 레이아웃을 베껴보도록 하겠습니다.
이제 슬슬 텍스트 에디터를 키시면 됩니다.
이 부분 부터는 어느정도 html이나 css에 기본지식이 있어야 합니다. '뒤로가기'버튼을 누르시는 소리가 벌써
여기까지 들리는걸요 ㅠㅠ? 우선 텍스트에디터에 다음과 같은 기본내용을 기입하도록 합시다.
타이틀 부분이 정확하게 출력되지 않습니다. 관련된 댓글을 확인하시고 수정하세요.
기본스타일이등을 규정해주는 부분입니다. 아까 파이어버그에서 본 내용을 <s_t3>~</s_t3>부분 안으로 옮겨
적도록 합시다. 처음엔 큰 덩어리 부터 점차점차 작은 부분까지 손봐줍시다. 제가 작업하는 모습입니다.
머리 아프신가요 ? 어느정도 대략의 레이아웃을 짜여진 모습입니다. Html 하이라이트 기능이 적용되는 에디터를
쓰시면 보기도 편합니다. 코딩시 주의하셔야 하거나 팁이되는 내용을 몇가지 소개하겠습니다.
1.본문은 <s_t3>~</s_t3> 안에 써놓으세요. 태터툴즈상에서 본문이라고 인식하는 부분입니다.
2.들여쓰기를 잘하시면 보기가 편합니다. 종속관계에 따라서 탭한칸정도씩 띄워주시면 수정하기도 보기도
무척이나 편해집니다.
3.엘리먼트의 ID,Class값을 잘 확인하세요. 스타일시트에 연결되는 부분이니까 중요합니다. 가끔가다 Id와 class
를 햇갈려서 난감해 했던적도 많습니다. 주의하세요!
4.닫는태그 뒤에 어떤 엘리먼트를 닫는지 주석을 달아 놓으세요! 중간에 삽입된 내용이 길어지면 혼자 텅하니
빈 닫는태그가 어디 닫는태그인지 헷갈리는 경우가 무척 많습니다. 좋은 에디터를 사용하실경우 여는태그와
닫는태그를 한번에 표시해서 보여주기도 합니다만 아닌경우가 더 많으니까요 :)
5.대강의 내용은 한글로 일단 적어두세요. 태터툴즈의 치환자를 곧 입력하게 될 것 입니다. 제가 코딩한 부분의
헤더부분을 보시면 아직 한글로 어떤 내용이 삽입될 부분인지만을 적어 놓았습니다.
상당히 복잡하고 중요한 코딩작업이 어느정도 끝나셨나요? 아니면 중간에 쉬고 내일 다시하실려구요 ?
모두 괜찮습니다. 자 이 파일을 저장해봅시다. 아까 만들어둔 새로운 폴더에 skin.html 이란 파일명으로
저장을 해봅시다. 그리고 테스트겸 열어봅시다 :) 아직 완벽하진 않지만 어느정도 틀이 잡혔을 겁니다.
이제 오늘의 편인 '기본 레이아웃 짜기'편이 끝났습니다. 기존에 태터툴즈의 스킨파일을 다뤄보신분은 이제
어떻게야 할지 슬슬 감이 오시거나 벌써 알아서 다음작업 하시는 분도 있으리라 믿습니다. 아니신분들은 천천히
음미(?) 하면서 코딩해 나가시길 바랍니다. 그럼 다음편에서 뵙겠습니다! 화이팅!!
이전 포스팅을 읽고 오셨다면 준비는 모두 끝나셨겠죠? 그럼 WP테마뷰어 사이트에서 자신의 맘에드는 스킨을
발견하셨으리라 생각합니다. 먼저 마음에 드는 스킨파일을 다운로드 하신다음에 그 다운받은 폴더안의 다음
파일들을 복사해서 새로운 폴더로 붙여넣기 합니다. style.css파일과 images폴더 통째를 새로운 폴더로 이동시켜
주세요. 이 새로만든 폴더는 태터툴즈용 스킨을 변환한 작업물을 저장할 장소 입니다.
일단 다운로드해서 해당파일을 옮기셨으면 다시 테마뷰어 사이트로 갑니다. 살펴보시면 TestRun을 할 수 있는데
클릭하셔서 테스트창을 띄워놓으세요. 브라우저는 저번 시간에 말씀드렸던 FireFox로 사용하세요. 그 다음으로는
가장 중요한 확장기능인 firebug를 활성화 시킵니다. 브라우저의 오른쪽하단에 보시면 초록색 원에 흰색 체크
표시가 있는 버튼입니다. 클릭하셔서 활성화 시키시면 다음과 같은 창이 뜹니다.
이전 포스팅을 잘 읽으신 분은 어느정도 사용법을 숙지하고 계실겁니다. 우리가 사용해야할 탭은 Html탭입니다.
어떤 식으로 레이아웃이 짜여져 있는지 알아 볼 수 있습니다. 또한 Inspect를 이용하면 직접 마우스로 클릭해서
어느부분이 어떻게 짜여져 있는지를 손쉽게 알 수 있는 무척이나 유용한 툴입니다. 테스트사이트에서 파이어
버그를 켜놓으시고 Html탭으로 가시면 다음과 같은 창이 또 뜹니다.
왼쪽은 각각 엘리먼트가 어떻게 짜여져 있는지 종속관계로 표시해주고 오른쪽은 그 엘리먼트에 어떤 스타일이
적용되어있는지 바로 보여줍니다. 직접 현재창에서 수정도 가능합니다. 하지만 우리가 사용할 기능은 아닙니다.
우리가 주목해야할 부분은 왼쪽란입니다. 같은 형식으로 레이아웃을 짜줘야 합니다. 헷갈릴수도 있으니 천천히
잘 따라오시길 바랍니다. 우선 엘리먼트중에서 body부분만을 열어 똑같이 레이아웃을 베껴보도록 하겠습니다.
이제 슬슬 텍스트 에디터를 키시면 됩니다.
이 부분 부터는 어느정도 html이나 css에 기본지식이 있어야 합니다. '뒤로가기'버튼을 누르시는 소리가 벌써
여기까지 들리는걸요 ㅠㅠ? 우선 텍스트에디터에 다음과 같은 기본내용을 기입하도록 합시다.
타이틀 부분이 정확하게 출력되지 않습니다. 관련된 댓글을 확인하시고 수정하세요.
기본스타일이등을 규정해주는 부분입니다. 아까 파이어버그에서 본 내용을 <s_t3>~</s_t3>부분 안으로 옮겨
적도록 합시다. 처음엔 큰 덩어리 부터 점차점차 작은 부분까지 손봐줍시다. 제가 작업하는 모습입니다.
머리 아프신가요 ? 어느정도 대략의 레이아웃을 짜여진 모습입니다. Html 하이라이트 기능이 적용되는 에디터를
쓰시면 보기도 편합니다. 코딩시 주의하셔야 하거나 팁이되는 내용을 몇가지 소개하겠습니다.
1.본문은 <s_t3>~</s_t3> 안에 써놓으세요. 태터툴즈상에서 본문이라고 인식하는 부분입니다.
2.들여쓰기를 잘하시면 보기가 편합니다. 종속관계에 따라서 탭한칸정도씩 띄워주시면 수정하기도 보기도
무척이나 편해집니다.
3.엘리먼트의 ID,Class값을 잘 확인하세요. 스타일시트에 연결되는 부분이니까 중요합니다. 가끔가다 Id와 class
를 햇갈려서 난감해 했던적도 많습니다. 주의하세요!
4.닫는태그 뒤에 어떤 엘리먼트를 닫는지 주석을 달아 놓으세요! 중간에 삽입된 내용이 길어지면 혼자 텅하니
빈 닫는태그가 어디 닫는태그인지 헷갈리는 경우가 무척 많습니다. 좋은 에디터를 사용하실경우 여는태그와
닫는태그를 한번에 표시해서 보여주기도 합니다만 아닌경우가 더 많으니까요 :)
5.대강의 내용은 한글로 일단 적어두세요. 태터툴즈의 치환자를 곧 입력하게 될 것 입니다. 제가 코딩한 부분의
헤더부분을 보시면 아직 한글로 어떤 내용이 삽입될 부분인지만을 적어 놓았습니다.
상당히 복잡하고 중요한 코딩작업이 어느정도 끝나셨나요? 아니면 중간에 쉬고 내일 다시하실려구요 ?
모두 괜찮습니다. 자 이 파일을 저장해봅시다. 아까 만들어둔 새로운 폴더에 skin.html 이란 파일명으로
저장을 해봅시다. 그리고 테스트겸 열어봅시다 :) 아직 완벽하진 않지만 어느정도 틀이 잡혔을 겁니다.
이제 오늘의 편인 '기본 레이아웃 짜기'편이 끝났습니다. 기존에 태터툴즈의 스킨파일을 다뤄보신분은 이제
어떻게야 할지 슬슬 감이 오시거나 벌써 알아서 다음작업 하시는 분도 있으리라 믿습니다. 아니신분들은 천천히
음미(?) 하면서 코딩해 나가시길 바랍니다. 그럼 다음편에서 뵙겠습니다! 화이팅!!
오늘껀 너무 어렵군요 :)
그런가요 ? ㅠㅠ 열심히 쉽게 써볼려고 했는데 ~ 다음편 부터 더욱 노력해봐야겠습니다 +ㅁ+!
자동으로 변환해 주는 프로그램이 있으면 좋을텐데...
그러게말입니다 ㅠㅠ 그런 어플을 만들어주실 천재 프로그래머(?)분은 어디계실까요~
어머나, 형진님 레퍼드군요... 언제 업글하셨는지... >_<
제 경우에는, 왼쪽에 사이드바가 좀 낯설 더라구요. 좀 작아졌다고 해야하나...
뭐 지금은 그럭저럭 잘 적응하고 있습니다. +_+
지난달 중반에 고민하다가 결국 업글했습니다~ 결과는 대만족 ㅎㅎ 왼쪽 사이드바 저도 업글하자마자 너무 작아져서 놀랐는데 지금은 꽤나 편해요! 특히 다른 윈도우간의 연결도 무척이나 편해져서 Great!!를 외치는중입니다 ㅋㅋ
워프 강의 좋네요.
다음 편도 기대합니다. 호홍
제트님께 칭찬들으니 왠지 기운이 쑥쑥 ^^! 감사합니다
흐어..; 약먹고 찬찬히 살펴봐야겠습니다 +_+
화이팅 인겁니다!!+ㅁ+
머, 머리가 아파온다;; 나중에 읽어야겠어요, 나중에;
아직 저 같은 초보에게는 무리;ㅁ;
저 맨윗사진 무슨프로그램을 이용한건가요
TestRun 이 Preview 인가요? .. 음.. 맞는 것 같은데..
티스토리 기본 스킨 구조 설명하신 저 텍스트에 오류가 있는 건가요? "관련 댓글"도 링크가 없어졌네요..
일단 써 놓으신 걸로 진행해 볼게요.