티스토리 스킨을 만들기 위해서는 환경을 만들어야합니다. 티스토리 블로그는 원래 태터툴즈 블로그를 기반으로 하기 때문에 태터툴즈 블로그 프로그램을 사용하여 환경을 만들 수도 있고 티스토리 자체에서 별도의 블로그를 개설하여 만들 수도 있습니다. 티스토리는 1계정당 5개까지 블로그를 만들 수 있기 때문에 하나는 운영하는 블로그로, 다른 하나는 시험용 블로그로 운영할 수도 있습니다.
어떤 방법이 편한지는 두가지가 일장일단이 있습니다. 우선 태터툴즈를 이용하면 WAMP 서버환경 을 만들고 태터툴즈 블로그 프로그램을 설치하는 번거로움이 있지만 스킨을 만들기 위한 중요파일인 skin.html 파일과 style.css파일을 텍스트 에디터에서 직접 편집할 수 있습니다. 텍스트 에디터에서 편집을 하게 되면 해당 텍스트 에디터가 갖고 있는 코드힌트 기능이나 코드의 컬러화 기능 등 여러가지 편리한 기능을 사용할 수 있어서 코딩시 편리합니다. 여기서 편집을 완료한 후에 모든 파일을 티스토리 블로그에 업로드하면 그대로 적용할 수 있습니다.
<텍스트에디터 사용시 화면>
다른 한가지 방법인 티스토리 블로그에서 시험용 블로그를 만들게 되면 환경은 바로 만들어지지만 작은 화면에서 두개의 파일내용을 편집해야하고 원하는 코드 찾기도 힘듭니다.
<티스토리 블로그에서 직접 편집시 화면>
티스토리 시험용 블로그는 스킨을 만들때는 계속 업데이트하면서 편집하기 때문에 간단한 수정이라면 기존의 블로그를 그대로 편집해도 되지만 몇시간 걸리는 편집작업은 방문자에게 불편을 주므로 필요한 것입니다. 완성이 되면 운영중인 블로그로 스킨을 이전하면 한번에 업데이트되는 것이죠. 티스토리 블로그를 추가로 만들려면 처음 블로그 만들때처럼 하면 됩니다.
스킨은 처음부터 새로만드는 것 보다는 기존에 있는 것을 수정해서 편집하는 것이 편합니다. html은 거의 수정할 것이 없고 대부분 css에서 작업이 이루어지며 여기서도 많은 부분은 그대로 보존됩니다. 하지만 스킨을 수정하고나면 전체적인 레이아웃이 전혀 다른 스킨으로 변하게 됩니다. 배경색상과 본문배경만 바꿔도 전혀 다른 스킨이 되기도 합니다. 수정할 스킨은 티스토리 기본스킨인 Basic을 사용합니다.
<사진을 클릭하면 크게 볼 수 있습니다.>
스킨 선택화면에서 2단형을 선택하고 우측의 스크롤 바에 있는 삼각형을 클릭하면 펼쳐집니다. 2의 썸네일을 선택하면 하단에 Basic이라고 나오고 저작권은 자유롭게 수정이 가능하고 배포도 가능하다고 나옵니다. 어떤 스킨은 배포가 자유롭지 못하므로 공유가 안될 수도 있습니다. 메뉴설정기능과 스킨위자드 기능이 있지만 메뉴는 html에서 직접 추가할 수도 있습니다. 특히 스킨위자드는 스킨의 몇가지를 수정할 수 있는데 이미 CSS에서 수정을 하고 나서 7의 스킨위자드 버튼을 클릭하게 되면 스킨 변경화면으로 들어가게 되며 CSS가 초기화되버리기 때문에 절대 클릭하면 안됩니다.
스킨을 선택하고 8의 HTML/CSS 편집을 클릭하면 편집화면으로 갑니다. 9의 파일업로드는 이미지나 제이쿼리 파일등을 업로드할 수 있는 화면으로 갑니다. 10의 스킨 다운로드 버튼을 클릭하여 찾기 쉬운 폴더에 저장합니다. 태터툴즈 환경에서 작업하기 위해서는 이 기본 스킨을 다운받아 설치해야합니다.
이곳 을 참고하여 WAMP환경을 설정하고 이곳 을 참고하여 태터툴즈(텍스트큐브) 블로그 프로그램을 설치합니다. 번거로우면 티스토리 시험용 블로그를 만들어 직접 편집해도 됩니다.
WAMP서버가 설치된 1의 경로로 들어가서 다운받은 스킨을 복사해서 붙여넣고 압축해제합니다. 압축해제한 3의 폴더를 클릭해서 들어가면 파일들이 나옵니다. 스킨 구조가 아주 간단하죠. 그래서 티스토리가 스킨 만들기가 편합니다. 스킨만들때 사용한 이미지는 반드시 images폴더에 저장합니다. 모든 스킨이 완료되면 업로드해야하는데 나중에 스킨 완료후 별도로 설명드리지만 이전 이미지에서 우측 상단의 스킨등록 버튼을 클릭하고 추가버튼을 클릭하여 우선 images폴더를 제외한 파일들을 선택하여 업로드하고난 후에 다시 추가버튼을 클릭하여 images폴더안으로 들어가서 Ctrl+A키를 눌러 모든 파일을 선택하여 업로드하면 완료됩니다.
skin.html파일과 style.css파일을 텍스트에디터에 열면 편집할 준비가 완료됩니다.
텍스트큐브 블로그에 로그인하고 관리자 화면으로 들어가서 꾸미기-스킨선택을 클릭하면 위와같이 나옵니다. Basic 1.0의 적용버튼을 클릭하면 블로그에 바로 적용됩니다. 우측 상단에서 블로그로 이동을 클릭하면 블로그 첫화면이 나옵니다. 우측 사이드바에서 글쓰기를 선택하고 자신의 블로그에 있는 글을 복사하여 붙여 넣습니다. 테스트용으로 글이 있어야 화면이 나오고 레이아웃 편집하기가 좋습니다.
이미지는 붙여넣기하면 나타나지 않으므로 자신의 컴퓨터에 있는 이미지를 파일업로드를 클릭하여 업로드하고 파일을 선택한 다음 4의 아이콘을 클릭하면 글쓰기창에 나타납니다. 티스토리 시험용 블로그를 사용시에는 글 발행을 비공개로 설정해 놓는 것이 좋습니다.
무엇이든 無에서 창조되는 일이 없죠. 다 어디선가 참고해서 만들어집니다. 또한 스킨 만들기를 처음해보시는 분들은 어떤 웹사이트나 블로그의 스킨이 마음에 든다면 같은 스킨을 완벽하게 재현하는 것도 CSS 공부하는데 많은 도움이 됩니다. 제 포스팅에서는 이웃 블로거이신 이츠하크님의 요청으로 워드프레스 테마 스킨을 토대로 티스토리 스킨으로 만들 예정입니다. 다행이 워드프레스 스킨이 무료배포용이라서 수정해서 사용해도 무리는 없을 것입니다.
위 압축파일을 풀면 아주 많은 파일이 있습니다. 티스토리 스킨과 많은 차이가 있죠. images폴더에 들어가면 또 많은 파일들이 있습니다. 여기서 일부를 사용하게 됩니다. 다른 파일은 사용하지 않고 주로 아이콘을 사용하게 됩니다.
스킨 이미지를 보면 다음과 같습니다.
티스토리 블로그 스킨과 많이 비슷합니다.
1. 환경 만들기
어떤 방법이 편한지는 두가지가 일장일단이 있습니다. 우선 태터툴즈를 이용하면 WAMP 서버환경 을 만들고 태터툴즈 블로그 프로그램을 설치하는 번거로움이 있지만 스킨을 만들기 위한 중요파일인 skin.html 파일과 style.css파일을 텍스트 에디터에서 직접 편집할 수 있습니다. 텍스트 에디터에서 편집을 하게 되면 해당 텍스트 에디터가 갖고 있는 코드힌트 기능이나 코드의 컬러화 기능 등 여러가지 편리한 기능을 사용할 수 있어서 코딩시 편리합니다. 여기서 편집을 완료한 후에 모든 파일을 티스토리 블로그에 업로드하면 그대로 적용할 수 있습니다.
다른 한가지 방법인 티스토리 블로그에서 시험용 블로그를 만들게 되면 환경은 바로 만들어지지만 작은 화면에서 두개의 파일내용을 편집해야하고 원하는 코드 찾기도 힘듭니다.
티스토리 시험용 블로그는 스킨을 만들때는 계속 업데이트하면서 편집하기 때문에 간단한 수정이라면 기존의 블로그를 그대로 편집해도 되지만 몇시간 걸리는 편집작업은 방문자에게 불편을 주므로 필요한 것입니다. 완성이 되면 운영중인 블로그로 스킨을 이전하면 한번에 업데이트되는 것이죠. 티스토리 블로그를 추가로 만들려면 처음 블로그 만들때처럼 하면 됩니다.
2. 수정할 스킨 다운로드 후 설치
스킨은 처음부터 새로만드는 것 보다는 기존에 있는 것을 수정해서 편집하는 것이 편합니다. html은 거의 수정할 것이 없고 대부분 css에서 작업이 이루어지며 여기서도 많은 부분은 그대로 보존됩니다. 하지만 스킨을 수정하고나면 전체적인 레이아웃이 전혀 다른 스킨으로 변하게 됩니다. 배경색상과 본문배경만 바꿔도 전혀 다른 스킨이 되기도 합니다. 수정할 스킨은 티스토리 기본스킨인 Basic을 사용합니다.
스킨 선택화면에서 2단형을 선택하고 우측의 스크롤 바에 있는 삼각형을 클릭하면 펼쳐집니다. 2의 썸네일을 선택하면 하단에 Basic이라고 나오고 저작권은 자유롭게 수정이 가능하고 배포도 가능하다고 나옵니다. 어떤 스킨은 배포가 자유롭지 못하므로 공유가 안될 수도 있습니다. 메뉴설정기능과 스킨위자드 기능이 있지만 메뉴는 html에서 직접 추가할 수도 있습니다. 특히 스킨위자드는 스킨의 몇가지를 수정할 수 있는데 이미 CSS에서 수정을 하고 나서 7의 스킨위자드 버튼을 클릭하게 되면 스킨 변경화면으로 들어가게 되며 CSS가 초기화되버리기 때문에 절대 클릭하면 안됩니다.
스킨을 선택하고 8의 HTML/CSS 편집을 클릭하면 편집화면으로 갑니다. 9의 파일업로드는 이미지나 제이쿼리 파일등을 업로드할 수 있는 화면으로 갑니다. 10의 스킨 다운로드 버튼을 클릭하여 찾기 쉬운 폴더에 저장합니다. 태터툴즈 환경에서 작업하기 위해서는 이 기본 스킨을 다운받아 설치해야합니다.
이곳 을 참고하여 WAMP환경을 설정하고 이곳 을 참고하여 태터툴즈(텍스트큐브) 블로그 프로그램을 설치합니다. 번거로우면 티스토리 시험용 블로그를 만들어 직접 편집해도 됩니다.
WAMP서버가 설치된 1의 경로로 들어가서 다운받은 스킨을 복사해서 붙여넣고 압축해제합니다. 압축해제한 3의 폴더를 클릭해서 들어가면 파일들이 나옵니다. 스킨 구조가 아주 간단하죠. 그래서 티스토리가 스킨 만들기가 편합니다. 스킨만들때 사용한 이미지는 반드시 images폴더에 저장합니다. 모든 스킨이 완료되면 업로드해야하는데 나중에 스킨 완료후 별도로 설명드리지만 이전 이미지에서 우측 상단의 스킨등록 버튼을 클릭하고 추가버튼을 클릭하여 우선 images폴더를 제외한 파일들을 선택하여 업로드하고난 후에 다시 추가버튼을 클릭하여 images폴더안으로 들어가서 Ctrl+A키를 눌러 모든 파일을 선택하여 업로드하면 완료됩니다.
skin.html파일과 style.css파일을 텍스트에디터에 열면 편집할 준비가 완료됩니다.
텍스트큐브 블로그에 로그인하고 관리자 화면으로 들어가서 꾸미기-스킨선택을 클릭하면 위와같이 나옵니다. Basic 1.0의 적용버튼을 클릭하면 블로그에 바로 적용됩니다. 우측 상단에서 블로그로 이동을 클릭하면 블로그 첫화면이 나옵니다. 우측 사이드바에서 글쓰기를 선택하고 자신의 블로그에 있는 글을 복사하여 붙여 넣습니다. 테스트용으로 글이 있어야 화면이 나오고 레이아웃 편집하기가 좋습니다.
이미지는 붙여넣기하면 나타나지 않으므로 자신의 컴퓨터에 있는 이미지를 파일업로드를 클릭하여 업로드하고 파일을 선택한 다음 4의 아이콘을 클릭하면 글쓰기창에 나타납니다. 티스토리 시험용 블로그를 사용시에는 글 발행을 비공개로 설정해 놓는 것이 좋습니다.
3. 스킨 견본
무엇이든 無에서 창조되는 일이 없죠. 다 어디선가 참고해서 만들어집니다. 또한 스킨 만들기를 처음해보시는 분들은 어떤 웹사이트나 블로그의 스킨이 마음에 든다면 같은 스킨을 완벽하게 재현하는 것도 CSS 공부하는데 많은 도움이 됩니다. 제 포스팅에서는 이웃 블로거이신 이츠하크님의 요청으로 워드프레스 테마 스킨을 토대로 티스토리 스킨으로 만들 예정입니다. 다행이 워드프레스 스킨이 무료배포용이라서 수정해서 사용해도 무리는 없을 것입니다.
suffusion.3.9.6.zip위 압축파일을 풀면 아주 많은 파일이 있습니다. 티스토리 스킨과 많은 차이가 있죠. images폴더에 들어가면 또 많은 파일들이 있습니다. 여기서 일부를 사용하게 됩니다. 다른 파일은 사용하지 않고 주로 아이콘을 사용하게 됩니다.
스킨 이미지를 보면 다음과 같습니다.
티스토리 블로그 스킨과 많이 비슷합니다.
더보기
'CMS/티스토리 가이드' 카테고리 관련글
