워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

티스토리 스킨을 만들기 위해서는 환경을 만들어야합니다. 티스토리 블로그는 원래 태터툴즈 블로그를 기반으로 하기 때문에 태터툴즈 블로그 프로그램을 사용하여 환경을 만들 수도 있고 티스토리 자체에서 별도의 블로그를 개설하여 만들 수도 있습니다. 티스토리는 1계정당 5개까지 블로그를 만들 수 있기 때문에 하나는 운영하는 블로그로, 다른 하나는 시험용 블로그로 운영할 수도 있습니다. 

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 공부하는데 많은 도움이 됩니다. 제 포스팅에서는 이웃 블로거이신 이츠하크님의 요청으로 워드프레스 테마 스킨을 토대로 티스토리 스킨으로 만들 예정입니다. 다행이 워드프레스 스킨이 무료배포용이라서 수정해서 사용해도 무리는 없을 것입니다. 


위 압축파일을 풀면 아주 많은 파일이 있습니다. 티스토리 스킨과 많은 차이가 있죠. images폴더에 들어가면 또 많은 파일들이 있습니다. 여기서 일부를 사용하게 됩니다. 다른 파일은 사용하지 않고 주로 아이콘을 사용하게 됩니다. 

스킨 이미지를 보면 다음과 같습니다.


티스토리 블로그 스킨과 많이 비슷합니다.

댓글 (20)

댓글 목록

느림보별 access_time

따로 블로그를 하나 만들어서 스킨에 대해 이것저것 시험해 보며 공부하면, 진짜 좋겠네요.^^
정말 좋은 팁인 것 같아요.

베누시안 access_time

안녕하세요. 블로그 테스트용으로 만들면 연습하기는 좋죠. 저는 여러개 만들어서 이것저것 테스트하고 있답니다.ㅋ

이츠하크 access_time

베누시안님께서 일단 시작해 주셨군요. 저의 경우 CSS나 HTML의 경우는 베누시안님 블로그에서 해결할 만큼 충분하게 자료를 올려주셔서 가능한데, 아무리 해도 워드프레스 쪽은 뭐가 뭔지 아직도 모르겠더군요. 더 좀 충분히 읽어보고요. 처음부터 차근 차근...감사합니다.^^

베누시안 access_time

워드프레스도 기본적인 다루는 방법을 하고 난 뒤에는 스킨바꾸는 CSS에 대해서도 포스팅하게 됩니다. 그때되면 워드프레스의 구조도 나오죠. 알고보면 티스토리나 워드프레스나 비슷합니다. 더 어려운 것은 드루팔이라는 웹사이트 제작용 프로그램이죠.

The 눈물 access_time

잘보구잇는데 말이 너무어렵게해놧네요 ㅡ.ㅡ

베누시안 access_time

안녕하세요. 반갑습니다. 어떤 부분이 이해가 안되시는지 알려주시면 추가로 다시 작성해드리겠습니다. 다른 분들을 위해서도 지적해 주시면 감사하겠습니다.

The 눈물 access_time

이해는되는데 조금 해깔려서요 wamp 서버설치하다가 조금 해깔렷고요
데이터베이스 처음해본거라서 신긴해서 따라햇봤엇거든요 ㅎㅎ
제가해깔려서그런지 쉽은말은 길게늘려햇는느낌이있어서그런거같아요 ㅎㅎ

베누시안 access_time

그러셨군요. 제가 포스팅하다보면 어려워하시는 분들이 많아서 쉽게 늘려서 설명하다보니 헷갈리는 분도 더러 있나봅니다.

원초아 access_time

똑같이 따라하기만 하면 아무 문제 없군요. 다만 궁금한게 있습니다.
텍스트규브에 작성된 글은 어디로 가는겁니까?;; 제 하드에 저장되나요?

베누시안 access_time

텍스트큐브나 워드프레스를 시험용으로 사용하려면 wamp서버를 설치해서 내 컴퓨터에서 사용할 수가 있습니다. 이곳( http://martian36.tistory.com/757 )을 참고하시면 텍스트큐브 설치하는 방법이 있습니다. 텍스트큐브에서 글을 작성하면 내 컴퓨터의 데이터베이스로 저장됩니다.

L'artiste curieuse access_time

이제 HTML/CSS 공부가 조금 된 것 같아서 티스토리 스킨 만들기에 다시 도전해보려구용! ^ ^
처음 글 부터 찬찬히 보면서 파이팅 해봐야겠습니다~~

베누시안 access_time

블로그에 방문해보니 이미지를 깔끔하고 이쁘게 처리해놓았더군요. 스킨 만들기 따라하시다가 이상한 점이 있거나 의문 나는 것은 질문해주세요. 그리고 모바일 스킨을 도전해보세요. 아직 티스토리는 일방적으로 티스토리용 모바일 스킨이 적용돼서 블로그의 전체 내용이 나오질 않죠. 조만간 사용자가 만든 모바일 스킨이 적용되리라 생각합니다. 관심있으시면 지금 제 블로그의 스킨을 보내드리겠습니다. 아직 틈틈히 작업중이지만 거의 다 완성된 것이고 작은 부분을 장식중이랍니다.
더 관심을 가지시면 워드프레스도 해보세요. 이달 말 경에 책이 나오는데 관심있으시면 제게 배정된 책중 한권 보내드리죠.

L'artiste curieuse access_time

베누시안님! 이렇게 길게 좋은 말씀, 조언, 도움 주셔서 감사합니다! ^0^*
모바일 스킨, 워드프레스 꼭 기억해두고 공부해보겠습니다~!! 무엇이든 보내주시면 대환영이지요~!!
블로그 스킨, 책 모두 주기만 하신다면 열심히 공부해보겠씁니다. ^-^*

베누시안 access_time

열심히 하시는 모습을 보니 활용을 잘 하실 것 같아서요. 이메일 주소를 알려주시고 나중에 집주소도 알려주세요. 책 나오면 출판사에서 바로 보내드리도록 하겠습니다.

access_time

비밀댓글입니다

L'artiste curieuse access_time

베누시안님 말씀대로 이제, 모바일스킨을 도전해보려고 해서 이제 압축을 풀었거든요~!!
그런데, 어디서부터 어떻게 무엇을 해야하는지 잘 모르겠네요. ㅠㅠ

베누시안 access_time

워드프레스 책으로 우선 공부하신 다음에 티스토리 스킨을 만드는 것이 좋을 겁니다. http://martian36.tistory.com/841 이글을 보면 티스토리 스킨 설치방법이 있습니다.

L'artiste curieuse access_time

관리자의 승인을 기다리고 있는 댓글입니다

Netpi access_time

우아우아! 정말 많은글 ! 배울정보가 너무너무 많습니다!
앞으로 자주 들리겠습니다!

난소녀다 access_time

안녕하세요??

http://doqlrpdlf.tistory.com/
여기가 제 블로그인데요, 티스토리에서 무료로 배포하고 있는 스킨입니다.
헤드/타이틀 부분에 사진을 바꾸려 하는데요,
html어디부분을 건들여야 바뀌는지 도통 모르겠네요 ㅜㅜ

Yellow Memo(사용자 수정/업로드) ver.1.0(사용자 수정/업로드)
이 스킨입니다.