블로거의 마음에 쏙 드는 자유도 높은 블로그, 티스토리! 초대장도 받아야 하고 세팅도 약간 어렵게 느껴지셨다구요? IT ProBono@Daum 에서 제공하는 자료를 보시고 티스토리와 쉽게 친해지세요. 멋진 블로그로 한단계 더 도약하세요!

1. Blog+SNS,
티스토리 완전정복
IT ProBono @ Daum 2강 교재
| 비영리단체를 위한 사회공헌 미디어교육 입니다.

2. 2강 미리보기
1) 티스토리 가입 및 계정 세팅
2) 카테고리 설정과 스킨 선택
3) HTML/CSS 레이아웃 설정
4) 플러그인 설정과 사이드바 꾸미기
5) 티스토리 본문이해와 티에디션(첫화면) 설정
6) 모바일 스킨 설정
7) 팀블로그 세팅 (여럿이 함께)

3. 티스토리로 우리 기관 파워블로그 만들기
www.tistory.com

4. 블로그구조이해
IT ProBono
#container
블로그 전체를 둘러싸는 가장 큰 테이블
#header
블로그의 머릿말 부분, 핵심적인 인상을 주는 영역
#sidebar
블로그의 왼쪽, 또는 오른쪽 메뉴 공간
#content
본문영역, 헤더, 사이드바, 푸터 영역은 고정이지만
본문은 상시 바뀜
.article
본문 영역 안에서도 컨텐츠(텍스트, 이미지...)가
들어가는 영역
IT ProBono
#footer
블로그 하단 부분. 보통 기관의 정보를 입력함.

5. 티스토리 가입 및 계정 세팅
01
#Special
리의 ‘아이디’가 됩니다.
초대권을 받았던 ‘메일’이 티스토
들 수 있습니다.
리는 계정당 5개까지 블로그를 만
- 티스토
티스토리는 ‘바로’ 가입할 수가 없고, ‘초대권’이 필요합니다.
1 | IT ProBono @Daum 팀에서 ‘초대권’을 여러분의 ‘메일’로 보내드리면
2 | 메일을 확인해서 ‘초대권’을 수락해요.
3 | 가입화면을 따라서 가입정보를 입력하시면 완료!

6. 티스토리 계정 설정으로 블로그의 정체성을 규정합니다!
#1. 티스토리 관리자 화면으로 가는 방법은
http://0000.tistory.com/admin 을 입력하시거나 본문에서 단축키 ‘Q’ 버튼을 누르시면 되요!
#2. 관리자 화면 > 환경설정 > 기본정보
현재 블로그의 ‘기본정보’ 작성은 매우 중요해요! 블로그 타이틀, 설명, 주소설정 등 중요정보를 입력합니다.
‘블로그 이름’과 ‘설명’은 검색엔진에 색인되고 노출되기 때문에
주요 키워드와 내용을 담아 잘 작성해 주셔야 합니다.
1차 주소는 블로그의 원주소라고 할 수 있구요. 변경 가능해요.
2차 주소는 도메인을 따로 구입한 이후에 ‘연결’할 수 있습니다.
개별글 주소는 ‘숫자’로 설정하시는 것이 관리하기 좋습니다.

7. 카테고리 설정과 스킨 꾸미기
# 관리자 화면 > 글관리 > 카테고리 설정
02
모든 카테고리 설정이 완료한 이후에는 반드시 ‘설정’을 클릭해주세요. 그렇지 않
으면 설정전 기본값으로 돌아가버린답니다!
카테고리의 ‘스타일’, ‘글자색’ 등을
조정하실 수 있어요!
블로그 데이터를 ‘폴더’별로 정리하도록 ‘카테고리’가 있습니다.
맨 위에 있는 최상위폴더는 고정되어 있고 추가가 되지 않아요.
최상위 폴더를 선택하고 ‘추가’ 버튼을 누르면 1차 폴더가,
1차 폴더를 선택하고 ‘추가’버튼을 누르면 2차 폴더가 생겨요.
2차 폴더까지 만들 수 있구요. 폴더들을 생성한 후에는
드레그 앤 드럽으로 자유롭게 위치 이동이 되어
폴더별 글 관리하기 좋아요. 폴더 수정 및 삭제도 가능합니다!
글자길이는 ‘40자’까지 설정가능해요! 그
밖에 기능들을 조정해보세요!
카테고리별 발행도 가능한데
5강에서 더 자세히 소개할께요!!

8. # 관리자 화면 > 꾸미기 > 스킨
현재 사용 중인 ‘블로그 스킨’을 알려주는 곳입니다.
‘스킨위자드’를 통해서 다양한 배경과 사이즈조절을 간단하게
할 수도 있지만 IT ProBono에서는 ‘HTML/CSS’로 조정할 거예요.
나중에 ‘스킨제작’에 관심있는 분들은 ‘스킨등록’을 이용해서
나만의 스킨을 등록하고 다른 유저들과 공유해도 좋아요!
티스토리의 스킨은 계속 업데이트가 되고 있어요!
IT ProBono 실습에서는 ‘기본 스킨’을 공동으로 선택합니다.
HTML/CSS 코드를 이해하고 블로그 구조를 배우기 좋거든요!
‘기본 스킨’은 2단형 > 4번째 줄에 있습니다.
보라색 헤더를 가지고 있는 블로그에요!

9. HTML/CSS 레이아웃 설정
03
직접 블로그 레이아웃을 CSS에서 조정해보아요!
4가지만 설정해주시면 됩니다.
#Container > 960
#Content > 700
#Sidebar > 240
.article > 660
Ctrl+F 를 이용해서 ‘레이아웃’을 찾아보시면
다음과 같은 친구들이 나옵니다~
# 관리자 화면 > 꾸미기 > HTML/CSS
반드시 ‘저장’해주세요! 안그러면 ㅠㅠ

10. # 관리자 화면 > 꾸미기 > 화면 설정 > 메뉴
메뉴를 설정하신 후에는 역시 반드시 ‘저장’ 클릭이요!
그렇지 않으면 반영이 되지 않아요!
블로그의 ‘Header’ 부분에 들어가는 메뉴를 설정합니다.
카테고리가 블로그의 ‘내용적 폴더’ 역할을 한다면
Header 부분 메뉴는 블로그 구조의 ‘기능적 폴더’에 가깝습니다.
텍스트로 표기하면 좋은 메뉴들을 이곳에 정리하시면 좋습니다.
메뉴명과 위치 조정은 자유롭게 하실 수 있습니다.
title
HOME | 사진모음 | 여행팁모음 | 오시는 길

11. 플러그인 설정과 사이드바 꾸미기
04
# 관리자 화면 > 플러그인 > 플러그인 설정
플러그인을 통해 다양한 기능을 떼었다 붙였다 할 수 있습니다.
자유로운 사이드바의 메뉴를 위해 실습에서는
플러그인 설정 > 관리 및 통계 로 들어가서
1. 빈 줄 표시 (10px)로 설정해서 활성화
2. 태그 입력기를 설정하고 ‘저장’버튼 누르세요!

12. # 관리자 화면 > 꾸미기 > 사이드바
사이드바를 설정하신 후에는 역시 반드시 ‘저장’ 클릭이요!
그렇지 않으면 반영이 되지 않아요!
태그 입력기의 ‘편집’ 버튼을 누르면
HTML 소스코드 복사 가능해서
다양한 사이드 메뉴를 만들 수 있습니다!
사이드바의 ‘모듈’은 자유롭게 배치 가능해요다양한 메뉴들을 구성하실 수 있어요!
사용자 모듈에 저장을 체크하면
이 컨텐츠를 언제든지 사이드바에서
떼었다 붙였다 자유롭게 구성할 수 있어요!

13. 티스토리 본문이해와 티에디션(첫화면) 설정
# 관리자 화면에서 ‘글쓰기’ 선택
#2. ‘서식’ 작성 기능도 있답니다! (설명참고)
#1. 글쓰기 전에 먼저 ‘폴더선택’ 해주세요!
05
#7. 모든 글은 ‘임시저장’ 됩니다!
#3. 자주쓰는 문서양식,
서식을 불러올 수도 있어요!
#4. 검색 키워드를 위한 태그작성은 꼼꼼휘!
#5. 티스토리만의 공개설정 (설명참고)
#6. CCL을 신경쓰면 멋져요!
#7. 다음뷰랑 연결하면 좋아요!

14. # 관리자 화면 > 화면설정 > 티에디션 (시작하세요.) 그러면 아래와 같이 메인화면에 반영됩니다.
티에디션을 시작하면 항상 메인 화면 오른쪽 상단에 ‘티에디션’ 편집화면으로 가는 버튼이 있어요.
편집모드로 넘어가면 ‘아이템, 글선택, 디자인’을 설정할 수 있는 위젯이 생기고
메인 화면을 신문 편집하듯 아이템별로 다양한 컨텐츠와 디자인으로 수정할 수 있습니다.
2강에서는 ‘시작’만 세팅하고 본문 컨텐츠가 조금 쌓인 이후에 편집하는 시간이 있습니다.

17. 모바일 스킨 설정
06
# 관리자 화면 > 꾸미기 > 모바일웹 스킨
티스토리는 풍부한 모바일웹 스킨 20여가지를 제공하고 있습니다.
사용자들이 모바일로 접속했을 때 뜨는 화면을 이곳에서 설정하면 됩니다.
취향과 기능에 맞게 모바일웹도 다양하게 세팅해보세요!
세팅을 완료한 이후에는 화면 맨 아래에 있는 ‘적용’을 꼭 클릭해주세요!
모바일웹 적용을 확인하려면 아래와 같이 접속하세요!
http://0000.tistory.com/m

18. 팀블로그 세팅 (여럿이 함께)
# 관리자 화면 > 네트워크 > 초대관리 > 팀블로그 관리
티스토리를 사용하는 유저들은 ‘함께’ 공동 블로그 운영이 가능해요.
관리자, 편집자, 필자로 나눠서 권한 부여도 가능합니다.
다양한 웹진 및 팀블로그를 활용한 매체를 기획해보세요
07

19. 감사합니다. 모든 문의와 의견은,
http://itprobono.tistory.com
본 강의안은 IT ProBono@Daum
워크숍 교재로 제작되었으며,
‘저작자(IT ProBono@Daum/SMLab)’을 표시하고
비영리/동일조건(변경금지)로 공유가능합니다.