원본


<s_sidebar_element>

<!-- 방문자수 통계그래프~ -->


<div class="widget" style="border:1px solid; padding:10px; background-color:#ffffff;">

<center>

<span class="Today">◇ today:   </span>

<span class="Yesterday">&nbsp;&nbsp;&nbsp;◇ yesterday: </span>

<div class="stati" style="margin:10px 0px 0px 0px; background-color:#ffffff"> 

       

</div>

</center>

</div>

<script id="_wauyd2">var _wau = _wau || []; _wau.push(["dynamic", "xmz1pwpt5m", "yd2", "3d85c6ffffff", "small"]);</script><script async src="//waust.at/d.js" > </script>

</s_sidebar_element>



예시




티스토리 방문자수 플러그인에 있는 통계그래프를 편집해 보려고 합니다.


간단하게 바로 집어넣고 싶으시면 <div class="sidebar">사이에 원본을 복사 붙여넣기 하시면 됩니다.



<div class="sidebar"> </div>.

.

.

.


<s_sidebar_element>

<!-- 방문자수 통계그래프~[각주:1] -->

<div class="widget" style="border:1px solid; padding:10px background-color:#ffffff;">

<center>

<span class="Today">◇ today :   </span>

<span class="Yesterday">&nbsp;&nbsp;&nbsp; ◇ yesterday : </span>

<div class="stati" style="margin:10px 0px 0px 0px; background-color:#ffffff"> 

       

</div>

</center>

</div>

<script id="_wauyd2">var _wau = _wau || []; _wau.push(["dynamic", "xmz1pwpt5m", "yd2", "3d85c6ffffff", "small"]);</script><script async src="//waust.at/d.js" > </script>

</s_sidebar_element>


.

.

.

</div>




&nbsp; = 띄워쓰기 명령어



<script id="_wauyd2">var _wau = _wau || []; _wau.push(["dynamic", "xmz1pwpt5m", "yd2", "3d85c6ffffff", "small"]);</script><script async src="//waust.at/d.js" > </script> 

=> 현제 접속 인원표시 밑 관련 정보 서치사이트와 연결



<div class="widget" style="border:1px solid; padding:10px; bgcolor:#6699FF;">   </div>

=> 네모난 상자로 감싸는 명령어 입니다.  

border - 표(상자)의 두께를 설정합니다

padding - 상자와 다른 부분의 빈 공간을 설정합니다.

background-color - 상자의 배경색상을 지정합니다.




파란색 부분은 원하는대로 수정하셔도 되는 부분으로 글자를 적는 부분 입니다.


핑크색 부분은 빼도 상관없구요.





  1. HTML 에서 어떤 역할을 하고 있는지 설명을 적을 수 있는 부분 [본문으로]
블로그 이미지

로멘

정보 및 리뷰 블로거 _(^@_

,

요약은 아래쪽으로


열심히 글은 쓰는데 조회수는 왜 늘지 않는지... 오히려 글을 썻는데 조회수가 내려가는 기현상이 벌어지고... 무슨 일인지 알아보기 위해서 유입 로그를 확인했더니..


이게 무슨일이야;; 왜 다음이랑 티스토리 밖에 없지????


여기 저기 알아보니 구글이랑 네이버 등등 포털사이트에서 내 글을 검색어에 검색해도 나오질 않는다.


아니.. 몇 시간을 쓴 글들인데 제목을 그대로 복사 붙여넣기를 해도 나오질 않는거냐?ㅠㅠ


그래서 직접 등록을 하기 위해서 네이버와 구글 웹마스터를 사용해서 내 홈페이지를 


검색할 수 있도록 신청을 진행하였다. 




구글 웹마스터


https://www.google.co.kr/intl/ko/webmasters/#?modal_active=none



일단 구글 웹마스터로 접속해서 로그인!


그 다음 속성 추가를 눌러준다. 그러면....




가 뜬다! 여기에 나의 블로그를 입력해준다!


http://muroy.tistory.com/ <- 내블로그의 경우 이렇게 입력하면 된다. 글에 들어가지말고 블로그 메인의 주소를 입력해 준다.


그러면 다음과 같이 나온다!


권장방법이 아니라 대체방법을 이용하자. T스토리 블로그의 경우 대체방법인 HTML 태그를 사용해서 홈페이지에 메타테그를 등록해주면 된다.


확인을 누르면 아래와 같이 메타테그가 나오는데 이를 복사해서 관리텝에 있는 HTML/CSS편집으로 들어간다.


예시.

<meta name="google-site-verification" content="H6RKQGX0v4UbBwxoqe3A_j759RxuinnwmajLliA9m2Y" />




빨간 줄 <head> ~~~ </head> 영역이 head영역이다. 네이버 웹마스터랑 구글 웹마스터 둘 다 등록하니까 저렇게 많아졌다.ㅋㅋㅋ


저 head영역 아무곳에나 복사한 메타테그를 붙여넣기 해주고 확인 을 눌러주면 끝난다! 라고 말하면 좋겠지만 아직 사이트맵과 rss 등록을 해줘야 한다.


저곳을 누르면 좌측에 크롤링이라는 메뉴가 생성된다.


크롤링 - sitemap으로 들어가서...



빨간색 화살표가 되어 있는 곳을 눌러서 사이트맵과 rss등록을 해주자.


rss등록 -> 


sitemap등록 


이건 조금 복잡한데 우선은 여기 사이트에 접속한다.


http://www.web-site-map.com/


접속하면 이런 창이 보이는데 여기에 추가할 홈페이지를 추가하고.


빨간색으로 표시된 부분을 always로 변경한 뒤 create free xml sitemap을 누르고 조금 기다리면 사이트맵을 만든다.


그리고 html파일을 하나 보내주는데 이 파일을 내T스토리에 글쓰기(비공개)로 업로드 해서 발행을 누르신 뒤 링크주소복사를 눌러주시면 


사이트맵 주소가 나옵니다! 여기서 attachment/~~~~~~~~~~~~~~~~.xml 이라는 부분을 복사하셔서 사이트맵을 등록하시면


됩니다! 


이 주소는 네이버에서 동일하게 제출해야하니까 버리지 마시고 가지고 계셔요.


<8월 16일자 서브도메인이 구글 웹마스터에 등록되지 않으면 오류가 납니다. 제일 아랫 부분의 서브도메인 부분을 체크하여 모두 같이 받도록 합니다. 잘 돌아가던 기존의 사이트맵이 오류가 나고, 가이드라인 미준수 라고 떠서 저기 부분을 체크하시고 다시 발급받아서 제출하니 해결되었습니다.>




네이버 웹마스터 등록!!!


http://webmastertool.naver.com/


우선은 네이버 웹마스터에 접속해서 로그인을 해준다. 


구글과 같은 방법으로 웹마스터를 등록해주시고 현황 을 보시면 사이트맵과 RSS등록이 안되있을 겁니다.


만약 등록이 되있다면 그냥 끝내시면 되구요.


안되있다면 요청 -> RSS제출, 사이트맵 제출


에 들어가셔서 구글이랑 똑같이 제출하시면 됩니다!


이미 했던 거라서 어렵지 않습니다.




방문자가 적어서 왜 그럴까 생각 해봤는데 이런 이유가 있었네요. 


자동으로 등록해주는 줄 알았더니 손수 직접등록을 해야 한다니... 아마 다음을 제외한 다른 웹사이트들도 마찮가지라고 생각 됩니다.


만약 다른 웹사이트도 등록하셔야 한다면 해당 포털사이트 + 웹마스터 를 검색하셔서 같은 방법으로 등록하시면 됩니다.


다들 방문자가 많이오시길 바라겠습니다!





요약 : 구글 웹마스터 접속 후 등록, 그리고 rss를 등록하고 Sitemap 제작 후 등록


         네이버 웹마스터 접속 후 등록 그리고 요청 탭으로 들어가서 rss와 sitemap등록


         rss -> 사이트에 rss만 붙이면 됨  


         sitemap -> http://www.web-site-map.com/ 에 접속해서 frequency를 always로 변경후 생성







공감과 댓글은 작성자에게 큰 힘이 됩니다.




블로그 이미지

로멘

정보 및 리뷰 블로거 _(^@_

,

티스토리 카테고리 꾸미기 [html/css] 편집인데요.


제가 카테고리를 수정하려고 열심히 고민한 결과 꾸미는 방법을


소개해 드립니다.


우선은 티스토리에서 제공하는 치환자를 이용해서 카테고리를 작성하는 방법입니다.



txt.txt

(복사하시기 편하게 텍스트파일 첨부했습니다.)



html편집


우선은 html에 표기하는 방법입니다. html수정 들어가셔서 다음과 같은


문구를 적어주세요. 


치환자 : 티스토리에서 제공하는 html/css 묶음

클래스명 : 원하는대로 수정할 수 있는 값



<div class="category">[##_category_l##]</div>


폴더형 - 티스토리 자체 카테고리 옵션[각주:1]으로 수정이 가능합니다.

따라서 상세한 설정 옵션은 list형만 다루도록 하겠습니다.




<div class="클레스명">

</div>


리스트형 - 이번에 다루게 될 카테고리 옵션입니다. css에서 직접 설정을 해주셔야 하기 때문에 이번에는 list형 카테고리 옵션 수정을 하겠습니다.




카테고리 최상단에 명칭을 넣는 방법입니다. 연녹색 부분에 원하는 명칭을 쓰시면 됩니다.




예시 

사이드바에 카테고리를 추가하는 방법입니다.


<s_sidebar_element>

<!-- 카테고리 모듈 -->

<div class="category2"><h3>카테고리</h3>

</div>

</s_sidebar_element>


여기서 보시면 class를 category로 설정했는데요. 다른 용어로 자유롭게 변경 하셔서


css편집을 진행하시면 됩니다. class를 통해서 css편집과 연결되기 때문에


만약 그냥 category로 설정하시면 스킨에 따라서 다르겠지만 기존에 있던 카테고리와


연결되서 오류나 다른 방향으로 설정될 수도 있습니다.


그래서 이번글에서는 category2로 클레스를 정했다고 가졍하고 css편집을 진행 하겠습니다.




css편집


css편집으로 들어가셔서 아무곳에나 원하는 옵션을 찾으셔서 입력한 뒤 값을 수정해주세요


아무곳이나 라고 말했지만 진짜 아무곳이 아니라 다른 css편집과 구분하기 쉬운 곳에


위치시켜주셔야 다음에 작업할때 편합니다.


아래에는 아무런 꾸밈 없이 카테고리를 삽입 했을떄 나타나는 default값[각주:2] 입니다.


여기서 하나씩 꾸며나가는 방법을 설명하겠습니다 !









아래의 css변경 값을 스킨 css편집에 들어가셔서 입력하시면 됩니다. 원하는 대로 골라서 그대로 적으시면 됩니다. 앞에서 범위를 설정해 주시고 { } <-상세 변경 값을 설정하시면 됩니다.




/*(설명문)*/    


-> css에 설명문을 추가합니다. 설명문이라 적힌 곳에 원하는 말을 쓰시면 되며, 프로그래밍 언어로 인식되지 않아서 오류나 애러가 발생하지 않게합니다.




.category2 {  }


-> 카테고리 클레스 전체 옵션


.category2 ul { }


->카테고리 자체 전체 옵션 


.category2 li { }


->  카테고리 전체의 구분점 이외의 모든 부분 옵션


.category2 a {     } 


-> 모든 카테고리의 글자에 관한 옵션 


.category2 span.c_cnt {        }


->모든 카테고리 옆에 있는 글 수에 대한 옵션





.category2 > ul > li > a {   } 


->"전체"카테고리의 글자 옵션



.category2 > ul > li > a > span.c_cnt {  }


-> "전체"카테고리의 글 수 옵션





.category2 > ul > li > ul > li  > a  {  } 


-> 대분류 카테고리의 글자 옵션


.category2 > ul > li > ul > li  > a > span.c_cnt {  } 


-> 대분류 카테고리의 글 수 옵션





.category2 > ul > li > ul > li > ul > li > a {  } 


->소분류 카테고리 글자 옵션


.category2 > ul > li > ul > li > ul > li > a > span.c_cnt {  } 


->소분류 카테고리 글 수 옵션



.category a:hover {  }


-> 카테고리에 마우스가 올라 갔을 때 옵션


옵션 설정 css용어


padding: 0px 0px;

padding-left: 0px;

padding-light: 0px;

-> 간격 생성, 지정한 범위로 부터의 간격


margin: 0px;

-> 최고 범위에서 부터의 간격


border: 0px;

->margin과 padding 사이의 간격


같은 방식으로 magin 이나 border도 padding처럼 범위를 따로 지정할 수 있습니다.





list-style-type:none;

->none으로 된 곳에 값을 주면 설정한 범위의 텍스트에 라인에 따라서

점이나 사각형 따위의 구분을 준다. 표기는 가능하나 인터넷 브라우져의 종류에따라서 특정한 구분을 지원하지 않는 종류도 있다.


none - 출력하지 않는다

disk - 속이 빈 원

circle -검은 원

square - 사각형

decima - 숫자 (1~)

upper-alpha - 알파벳 대문자

lower-alpha - 알파벳 소문자

upper-roma - 로마자 대문자

lower-roma - 로마자 소문자

initial - 초기화 (기본값)

..... 추가적인 정보를 원하면 list-style-type을 검색하면 아주 많이 나온다.




text-decoration:none;

->글에 꾸밈을 준다. none으로 되어있는 곳에 다른 속성값을 입력한다. 기본 값은 underline으로 잡혀 있어서 아무것도 입력하지 않으면 글 아래 줄이 생긴다.


underline - 글 아래 줄을 친다.

overline - 글 위에 줄을 친다.

line-through - 글 중간에 줄을 친다.

blink - 글자가 깜빡인다. (구글에서 지원x, 익스틀로러x)




color:#fff;

텍스트나 이미지에 색상을 삽입한다.


background-color:#fff;

적용된 범위에 색상을 삽입한다..

http://muroy.tistory.com/8 html색상표 



font-size:0px;





티스토리 카테고리 만들고 꾸민다고 뒤지는 줄 알았네요! 한 10몇시간 걸린듯 ㅋㅋㅋ 저도 잘 몰라서 하나하나 알아보고 했는데 다른 분들도 빠르게 보고 적용할 수 있도록 작성했어요,



다들 카테고리 이쁘게 꾸미세요!



글이 마음에 드시면 댓글과 하트 눌러주셔용~!



  1. "티스토리 - 관리 - 카테고리" 에서 기본적인 설정이 가능하다 [본문으로]
  2. 아무것도 설정하지 않았을 때 나타나는 값 [본문으로]
블로그 이미지

로멘

정보 및 리뷰 블로거 _(^@_

,

HTML / CSS 용어 정리입니다. 필요하신분은 사용하세요. ^^


HTML 

웹문서 편집용 프로그래밍 언어 일반 텍스트와는 달리 웹상에서 가능한 대부분의 기능을 구성할 수 있다.


CSS

HTML로 작성한 혹은 다른 언어로 작성한 웹문서의 스타일을 저장하는 언어이다.

(색상, 크기, 여백 등등등...)



<글 쓰기 관련>


<p> </p>

문단을 의미하고 앞뒤 2줄씩 띄어서 하나의 문단을 만듭니다.

<P> TOPIC </P>



<!-- -->

HTML문서에서 설명문을 추가하기 위해서 쓰이는 글



br

HTML에서 엔터기능을 담당한다 <br>



&nbsp;

띄어쓰기 기능 1번까지는 그냥 가능하지만 2번이상 하려면 해당 언어를 사용해야한다.



h

<h1 align="left, right, center> 과 같은 양식으로 쓰이며

숫자는 글자의 크기, left, right, center는 글의 정렬위치

<h1 align="left, right, center>  </h>



<strong> </strong>

글자를 굵게 만듬



<b> </b>

글자를 굵게 만듬



<i> </i>

글자를 기울임



<em> </em>

글자를 기울임



<pre> </pre>

글을 쓴 그대로 출력해줌 (띄어쓰기, 엔터키 모두 쓴 그대로 적용)




<글의 서식>

사용법 =>  <p><font color=" " size=" " face=" "> 글내용 </font></p>



color="색상"

색상표 참고 ▼

http://muroy.tistory.com/admin/entry/post/?id=8 



size="숫자"

글의 크기를 결정합니다.




face="글꼴"

만약 보는 사람이 해당 글꼴이 없다면 다운받게 된다.

돋움, 굴림, 고딩 등등...





글쓰기 기능은 이정도네요.


이게 전부는 아니지만 기본적으로 쓰이는 용어들 위주로 정리해 보았습니다 ^^!


일단은 기본적인 글쓰기 html을 연습해보시면 어떻게 구성되고 어떤것인지 알게 될거라고 생각합니다! 티스토리의 글쓰기에서 우측 상단의 html모드에 들어가셔서 얼마든지 손쉽게 테스트해 볼 수 있습니다! 잘못 입력한다고 무슨일 안생기니까 걱정말고 써보세요!


물론 스킨 수정할때 함부로 지우시면 문제가 생길 수 있습니다.

블로그 이미지

로멘

정보 및 리뷰 블로거 _(^@_

,

1. 스킨 설정하는 법


스킨 설정의 경우 : 관리 -> 스킨 -> 스킨 종류 선택 -> 적용


그리고 스킨을 적용하셨으면 편집하기전에 "저장하기"버튼을 눌러서 pc에 저장해


줍니다. 만약에 애러가 출력 될 경우 다시금 원상 복구하기위한 조치입니다. 


반드시 해주세요!


http://www.tistory.com/skin  이곳에서 배포중인 스킨들을 볼 수 있습니다.


유료스킨도 있으니 원하신다면 구매하셔서 사용하셔도 됩니다.



2. 스킨 편집하는 방법


기본적인 스킨 편집을 위해서는 아래의 html과 css용어를


기본적으로 숙지하셔야 합니다.


물론 이것만 가지고는 스킨을 새로만든다거나 하기는 힘들지만


기본적인 색상변경이나 크기 변경은 가능합니다.


아마 기본적 내용을 수지하시고 치환자에 관한 설명을 읽어보시면


직접 메뉴를 구성하실 수 있을 겁니다.



html - 웹에서 문서를 작성하는데 사용되는 기본적인 프로그래밍언어입니다. t스토리 블로그에서 뼈대와 살을 구성하는 요소라고 생각하시면 됩니다. 이를 이용해서 다양한 기능을 블로그에 구현이 가능합니다.


css - 웹에서 문서의 전반적인 스타일을 설정해둔 시트입니다. 색상이나 배경색이 이에 포함되겠네요. 블로그에 옷이라고 볼 수 있습니다.


이것 이외에도 티스토리 블로그에서는 치환자도 사용되기 때문에 이에 대한 자세한 설명은 티스토리 공식 도움말을 읽어보시면 도움이 됩니다. 다양한 html언어를 묶어서 이용하기 편하게 만들어두었기 때문에 한번씩 설명을 읽어보시면서 손대보시면 기능들을 구현하는데 편하실 겁니다.




지금부터 나오는 모든 편집은 html/css 편집에서 사용하셔야 합니다.


색상 변경


관련 html 언어


background-color - 배경색 지정


transparent - 투명색


color - 색상



스킨에 있는 배경색을 변경하고 싶다면 -> background-color 를 찾은뒤에 원하는 색상으로 변경해 주시면 됩니다. 보통 css편집에서 수정합니다.



background-color: #fff;


background-color: transparent; border: 0;


background: rgba(0, 0, 0, .0);


color: #fff;


보통 색상 지정의 경우 크게 위의 4가지로 설정이 되어 있습니다. rgb는 (적, 녹, 청, 투명도)로 나타내는 색상을 직접 지정입니다. 그냥 color라고 되어있는 곳은 글자 색상, 메뉴 색상 등을 결정하는 요소입니다. 그리고 해당 부분을 찾으시면 아래의 정리되어 있는 글에서 rgb정보와 색상 html언어를 보시고 양식에 맞게 변경하시면 됩니다. 

#fff... -> 원하는 색상의 html

#rgba(0,0,0.0) -> #rgba(123,231,0.0) 색상의 rgb정보 입력


http://muroy.tistory.com/8  <-원하는 색상을 선택






css편집에 보시면 다음과 같이 해당 html의 구성요소를 설명하는 주석이 붙어있습니다.



/*==================== Bootstrap ====================*/



/* Footer */




해당 설명은 스킨마다 다르지만 영어 의미를 검색하면 대략적으로 감이 오실 겁니다. 만약 나는 이런거 잘 모르겠다~! 귀찮다! 하시는 분들은 일단 저장을 해둔 다음 하나씩 바꿔보시면서 찾으시면 됩니다. 그치만 생각보다 많기 때문에;; 대략적으로 나마 해당 css가 어느부분의 색상을 담당하는지는 알아 두시면 스킨 변경시에 편리합니다. 마지막으로 transparent라고 지정 되어 있는 것은 투명색으로 지정되어 있는 겁니다.




이미지 변경



background:url(".저장된 이미지명(경로까지 표기)") - 배경이미지 설정


<img src="./images/slider_1.png" width="100%" alt="Carousel 01">




만약 스킨에 있는 이미지가 바꾸고 싶으시면 html에 들어가셔서 background:url("  ")부분의 이미지를 변경해주시면 됩니다. 이때 주의하실 점은 파일 업로드를 한뒤 해당 파일의 경로까지 모두 표기해 주셔야 합니다. 간단하게 변경하고 싶으시면 해당 이미지를 삭제하신 뒤 같은 이름으로 이미지를 만드셔서 집어 넣으시면 됩니다.



블로그 스킨 타이틀 변경 및 글 수정


이건 어찌보면 꼼수인데 블로그 타이틀이 적혀있으면 지금 있는 해당 타이틀 및 글을 검색하셔서 (대소문자 구분해서) 타이틀이 적혀있는 부분만 내가 원하는대로 수정하시면 됩니다. 

<정석은 title 치환자 혹은 html를 찾아서 변경해 주어야 합니다.>


http://www.tistory.com/guide/skin/step3#1-2 <- 티스토리 공식 치환자 helper




기본적인 타이틀 및 글 변경 방법, 색상 수정, 이미지 변경 방법을 알아보았습니다. 저도 html/css언어를 수정할 줄 몰라서 한참 돌아다녔는데 다들 이렇게 하세요~ 라는데 찾기가 너무들 힘들어서 최대한 꼼수부려가면서 써보았습니다. 부디 도움이 되시길 바랍니다!







블로그 이미지

로멘

정보 및 리뷰 블로거 _(^@_

,

티스토리 기본 설정들을 이해 하셨다면 스킨 적용에 앞서 우선은


센터 설정입니다! 센터화면에 내가 원하는 정보를 바로 출력 하도록


설정 할 수 있는 기능입니다.


관리 페이지는 블로그를 시작하면 가장 많이 보게 되기 때문에


자신이 자주쓰는 기능은 페널에 추가 하도록 합니다.


센터설정을 하는 방법과 센터설정에 있는 각 항목에 대해서 설명하겠


습니다.



관리페이지로 들어가면 우측 상단에 톱니바퀴 모양이 보입니다. 그것을 눌러서 센터설정으로 바로 들어가 줍니다. 다른 작업을 하다가 다시 관리 페이지로 돌아오고 싶다면 tistory 옆에 있는 "관리"라고 적혀있는 버튼을 누르면 됩니다.



관리센터 설정에서 내가 원하는 페널에 체크하고 난 뒤 원하는 위치로 드래그하여 내가 원하는 곳에 위치 시킵니다.


가장 많이 보는 기능은 아무래도 방문자수, 댓글, 방명록, 통계 수치들이겠죠! 자신의 블로그 스타일에 맞게 설정해 줍니다.



각 항목별 설명입니다.




1. 글목록 - 글의 목록을 보여줍니다. 새로운 글 (기본 : 3일이내 - 설정가능)

이 있을 경우 글 목록 옆에 저 처럼 동그라미에 숫자가 적혀서 나타납니다.



2. 댓글 - 댓글 목록을 보여주며, 등록된 댓글이 있으면 글 목록과 마찮가지로 new표시를 출력해 줍니다.


3. 방명록 - 블로그에 남긴 방명록을 표시합니다. 


4. 알림 - 나에게 날아오는 알림 메시지를 출력합니다. 내가 쓴 댓글에 대한 피드백 또한 여기서 확인 할 수 있습니다.



5. 검색어 통계 - 플러그인 설정에서 설정하는 통계로 플러그인을 활성화 하게되면 어떤 검색어를 통해서 내 블로그로 들어오게 된 것인지 보여줍니다.

6. 유입 키워드 - 내 홈페이지 접속하는데 사용된 메인 키워드를 보여줍니다. 검색어 통계와는 달리 키워드만 보여주는 특징을 가지고 있습니다.



유입 순위 - 어떤 홈페이지를 통해서 내 블로그에 접속하게 되었는지 보여줍니다. t스토리의 경우 대부분 다음에서 접속해서 오게 됩니다.



유립로그 - 내 홈페이지에 어떠한 로그를 통해서 접속하게 되었는지 보여줍니다.

"[검색 키워드] 검색포털or 경유사이트" 식으로 표기됩니다.


방문자 통계 - 어제, 오늘, 주간, 전체 방문자 수를 통계내어 보여줍니다. 동일한 방문자(동일 ip) 가 중복하여 접속하면 카운트가 올라가지 않습니다. 그리고 ip조작으로 계속해서 접속시 방문자수 조작으로 블로그 정지 사유가 됩니다.



블로그 정보 - 블로그에 있는 토탈 정보를 보여줍니다. 총 메일, 총 글, 총 댓글, 방명록 숫자들을 보여줍니다.





티스토리 소식


주제별 - 티스토리에 업데이트되는 주제별 글들을 출력합니다. 관심분야의 블로거 분을 링크하기 편합니다. 혹은 동일 주제라면 방명록에 글을 남겨서 정보를 공유하시는 것 또한 좋습니다.






이벤트 - 티스토리에서 진행하는 이벤트들을 보여줍니다.





댓글 베스트 - 댓글 베스트는 최근 글 중에서 댓글이 가장 많은 글을 보여줍니다. 댓글 많은 만큼 이슈가 되거나 좋은 글을 찾을 수 있으며 활발한 피드벡을 기대할 수 있습니다.



공지사항 - 티스토리에서 발행하는 공지사항을 볼 수 있습니다.



티스토리 센터설정 가이드였습니다.


기본적인 관리페널 조작에 익숙해져야지 블로그 관리 효율이 올라가고 자신의 블로그를 철저하게 분석하고 발전시켜 나갈 수 있으니 기본적인 내용들은 숙지하시면 큰 도움이 되리라 생각합니다 ^^


블로그 이미지

로멘

정보 및 리뷰 블로거 _(^@_

,

html 편집을 하면 가장 먼저 뭘 정리해야 할까 라는 생각을 했는데 


아무래도 색상 변경을 가장 많이 사용한다고 생각해서 정리 하였습니다.







빨간색 계열


 

 


빨간색 계열1 - rgb(255, 0, 0), #ff0000


 


빨간색 계열2 -  rgb(255, 216, 216), #FFD8D8


 


빨간색 계열3 - rgb(255, 167, 167), #FFA7A7

 


빨간색 계열4 - rgb(241, 95, 95), #F15F5F

 


빨간색 계열5- rgb(204, 61, 61)#CC3D3D

 


빨간색 계열6 - rgb(152, 0, 0),#980000

 


빨간색 계열 7 -  rgb(103, 0, 0)#670000




주황색 계열

 


주황색 계열1 - rgb(255, 94, 0), #FF5E00

 


주황색 계열 2 - rgb(250, 224, 212) ,FAE0D4


 


주황색 계열 3 - rgb(255, 193, 158), #FFC19E

 


주황색 게열 4 - rgb(242, 150, 97), #F29661


 


주황색 계열 5 - rgb(204, 114, 61), #CC723D


 


주황색 계열 6 - rgb(153, 56, 0), #993800


 


주황색 계열 7 - rgb(102, 37, 0) ,#662500






오렌지색 계열


 


오렌지색 계열 1 -  rgb(255, 187, 0), #FFBB00


 


오렌지색 계열 2 - rgb(250, 236, 197), #FAECC5


 


오렌지색 계열 3 -  rgb(255, 224, 140), #FFE08C


 


오렌지색 계열 4 - rgb(242, 203, 97)#F2CB61


 


오렌지색 게열 5 -  rgb(204, 166, 61), #CCA63D


 


오렌지색 계열 6 -  rgb(153, 112, 0), #997000


 


오렌지색 계열 7 - rgb(102, 75, 0), #664B00






노란색 계열


 


노란색 계열 1 - rgb(255, 228, 0), #FFE400


 


노란색 계열 2 - rgb(250, 244, 192)#FAF4C0


 


노란색 계열 3rgb(250, 237, 125)#FAED7D


 


노란색 계열 4 - rgb(229, 216, 92), #E5D85C


 


노란색 계열 5 -  rgb(196, 183, 59), #C4B73B


 


노란색 계열 6 - rgb(153, 138, 0), #998A00


 


노란색 계열 7 -  rgb(102, 92, 0), #665C00







연두색 계열


 


연두색 계열 1 -  rgb(171, 242, 0), #ABF200


 


연두색 계열 2 -  rgb(228, 247, 186) ,#E4F7BA


 


연두색 계열 3 - rgb(206, 242, 121), #CEF279


 


연두색 계열 4 - rgb(188, 229, 92)#BCE55C


 


연두색 계열 5 - rgb(159, 201, 60), #9FC93C


 


연두색 계열 6 - rgb(107, 153, 0), #6B9900


 


연두색 계열 7 - rgb(71, 102, 0), #476600






초록색 계열


 


초록색 계열 1 - rgb(31, 218, 17), #1FDA11


 


초록색 계열 2 - rgb(206, 251, 201), #CEFBC9


 


초록색 계열 3 -  rgb(183, 240, 177), #B7F0B1


 


초록색 게열 4 - rgb(134, 229, 127),  #86E57F


 


초록색 계열 5 - rgb(71, 200, 62), #47C83E


 


초록색 계열 6 - rgb(47, 157, 39), #2F9D27


 


초록색 계열 7 - rgb(34, 116, 28), #22741C






하늘색 계열


 


하늘색 계열 1 -  rgb(0, 216, 255), #00D8FF


 


하늘색 계열 2 -  rgb(212, 244, 250), #D4F4FA


 


하늘색 계열 3 -  rgb(178, 235, 244), #B2EBF4


 


하늘색 계열 4 - rgb(92, 209, 229), #5CD1E5


 


하늘색 계열 5 - rgb(61, 183, 204), #3DB7CC


 


하늘색 계열 6 -  rgb(0, 130, 153), #008299


 


하늘색 계열 7 -  rgb(0, 87, 102);, #005766







파란색 계열


 


파란색 계열 1 - rgb(0, 85, 255), #0055FF

 


파란색 계열 2 - rgb(217, 229, 255), #D9E5FF


 


파란색 계열 3 - rgb(178, 204, 255), #B2CCFF


 


파란색 계열 4  rgb(102, 153, 255), #6699FF


 


파란색 계열 5 -  rgb(65, 116, 217), #4174D9


 


파란색 계열 6 -  rgb(0, 51, 153), #003399

 


파란색 계열 7 - rgb(0, 34, 102), #002266







청색 계열


 


청색 계열 1 - rgb(9, 0, 255), #0900FF


 


청색 계열 2 - rgb(218, 217, 255), #DAD9FF


 


청색 계열 3 - rgb(181, 178, 255), #B5B2FF


 


청색 계열 4 - rgb(107, 102, 255)#6B66FF


 


청색 계열 5 - rgb(70, 65, 217), #4641D9


 


청색 계열 6 - rgb(5, 0, 153), #050099


 


청색 계열 7 - rgb(3, 0, 102), #030066







보라색 계열


 


보라색 계열 1 - rgb(102, 0, 255), #6600FF


 


보라색 계열 2 -  rgb(232, 217, 255), #E8D9FF


 


보라색 계열 3 - rgb(209, 178, 255), #D1B2FF


 


보라색 계열 4 - rgb(163, 102, 255), #A366FF


 


보라색 계열 5 -  rgb(126, 65, 217), #7E41D9


 


보라색 계열 6 -  rgb(61, 0, 153), #3D0099


 


보라색 계열 7 -  rgb(41, 0, 102), #290066







핑크색 계열


 


핑크색 게열 1 - rgb(255, 0, 221), #FF00DD


 


핑크색 계열 2 - rgb(255, 217, 250), #FFD9FA


 


핑크색 게열 3 - rgb(255, 178, 245), #FFB2F5


 


핑크색 계열 4 - rgb(242, 97, 223), #F261DF


 


핑크색 계열 5 -  rgb(217, 65, 197), #D941C5


 


핑크색 계열 6 - rgb(153, 0, 133), #990085


 


핑크색 계열 7 - rgb(102, 0, 88), #660058








주홍색 계열


 


주홍색 계열 1 - rgb(255, 0, 127), #FF007F


 


주홍색 계열 2 - rgb(255, 217, 236), #FFD9EC


 


주홍색 계열 3 - rgb(255, 178, 217) #FFB2D9


 


주홍색 계열 4 - rgb(242, 97, 170), #F261AA


 


주홍색 계열 5 - rgb(217, 65, 141), #D9418D


 


주홍색 계열 6 - rgb(153, 0, 76), #99004C


 


주홍색 계열 7 -  rgb(102, 0, 51), #660033








검은색 계열


 


검은색 계열 1 -  rgb(0, 0, 0), #FFFFFF


 


검은색 계열 2 -  rgb(246, 246, 246), #F6F6F6


 


검은색 계열 3 - rgb(213, 213, 213), #D5D5D5


 


검은색 계열 4 - rgb(166, 166, 166), #A6A6A6


 


검은색 게열 5 - rgb(116, 116, 116)#747474


 


검은색 계열 6 - rgb(76, 76, 76), #4C4C4C


 


검은색 계열 7 - rgb(33, 33, 33), #212121


 


백색 계열 - rgb(0, 0, 0), #FFFFFF





후아; 정리하느라 팔 빠질 뻔했네요! 다들 색상 설정 할 때 마다 사이트 찾으러 다닐 필요 없이


한번에 볼 수 있도록 정리 했습니다. 


앞으로 블로그를 꾸밀때 계속 사용해야 하니까 종종 들러서 확인하셔야 합니다.



그럼 긴글 봐주셔서 감사합니다.






블로그 이미지

로멘

정보 및 리뷰 블로거 _(^@_

,

티스토리를 시작해서 제일 먼저 카테고리를 등록 해야합니다. 


왜냐하면 카테고리를 짜보면서 나의 블로그가 어떤 방향으로 


진행할 것인지 상당부분 정해지기 때문이죠! 처음부터 생각


하던 블로그 주제가 있으시다면 그냥 짜시면 되지만 그렇지


못할 경우에는 일단 "만들어" 보라고 말씀드리고 싶습니다.


이것 저것 중구난방으로 포스팅 하시다보면 어느 순간 내가


어떤 특정한 주제를 중심으로 포스팅하고 있다고 느끼시게


되시면서 블로그의 주제나 방향이 나아가게 되는 것이죠.






카테고리 편집에 들어가시면 카테고리 미리보기가 보이는데 여기서 카테고리를 추가하시면 됩니다.


그림에 보시면 간단하게 나와있구요. 카테고리 추가를 누르시면 선택하신 카테고리의 하부항목으로 


카테고리가 생성 됩니다. 여기 설정으로는 하부 카테고리 1번만 설정이 되기 때문에 분류를 잘 나누어서


카테고리를 짜야합니다. 잘 못하면 엉뚱한 하부카테고리가 생기거나 주제와 않맞을 수 있습니다.





이제 항목별로 설명하겠습니다. 



스타일 - 가장 앞쪽에 있는 카테고리를 분류하는 라인과 구분점의 서식입니다. 그림은 문서모양 이지만

폴더나 트리같은 기본적으로 주어지는 스타일이나 HTML/CSS 편집으로 편집이나 추가가 가능합니다.



선택 카테고리 - 사람들이 선택한 카테고리를 어떻게 표시할지 선택합니다.



비 선택 카테고리 - 선택되지 못한 카테고리를 어떻게 표시할지 선택합니다.



글자 길이 제한 - 카테고리에 표시되는 최대 글자 수를 설정합니다. "글 수 표시" 항목을 체크하시면

카테고리의 길이가 다음과 같이 길어지기 때문에 "(1234) <-6자 소모" 처음에는 모자람을 못 느끼시

더라도 나중에가면 모자라서 카테고리 사이에 ...이 나오면 늘려주도록 합니다.



글 수 표시 - 카테고리 안에 몇개의 글이 있는지 표시합니다.



새글 표시 - 해당 카테고리에 새글이 나타나면 카테고리에 표기 여부를 선택합니다 <체크시 표시>



주제 분류 설정 - 카테고리에 글을 쓰면 주제를 자동으로 설정하는 기능 (사용 추천) 일일이 글을

쓸때마다 주제 분류를 하는게 매우 귀찮기 때문에서 설정하시면 좋습니다!




카테고리를 설정하시면서 자신의 블로그의 방향에 대해서 먼저 생각해보시면 좋을 것 같습니다!





블로그 이미지

로멘

정보 및 리뷰 블로거 _(^@_

,

안녕하세요!

 

어떤 글을 가장 먼저 쓸까? 라고 생각하다가

 

제가 티스토리 블로그를 시작하면서 경험하는 난관들과 문제점

 

그리고 수많은 질문들이 생겼습니다. 그래서 일단은 제가 경험

 

하는 문제점들과 어떻게 해결하였는지를 포스팅 한다면 티스토리를

 

대부분 블로그들을 보면 굉장히 쉽게

 

되어 있기도 하지만 다들 능력자들이셔서 제가 이해하기 어려운

 

부분들도 많더라고요! 그래서 저 처럼 처음시작하는 입장에서

 

설명을 드리면 큰 도움이 될 것 같다고 생각해서 이렇게

 

포스팅을 시작해 봅니다.^^

 

힘들게 초대받아서 왔는데 안하면 손해잖아요?

 

 

1. 티스토리 관리

 

위의 사진과 같이 티스토리를 시작하면 좌측 상단에 블로그 닉네임 옆에 있는 화살표를 눌러서 관리모드로 들어


갈 수 있습니다. 그러면 아래와 같은 사진이 나오는데요.

 



글관리


1. 글목록


 글 목록

 블로그에서 쓰인 모든 글을 설정 할 수 있습니다. 

 기능 - 글에 대한 보호/비보호, 공개/비공개 설정이 가능합니다.

 카테고리 설정

  카테고리를 설정합니다. 카테고리 색상, 글자크기, 주제분류, 

  해당 카테고리에 글을 쓸때 자동으로 주제를 분류해주는 기능이   며 블로그의 목차라고 할 수 있습니다.

 글 설정

 글을 쓸때 기본 환경, 저작권 설정, 지도, 공개정책, 댓글 권한, 시  간 설정을 자동으로 해주도록 지정합니다.

 스펨 필터

 특정 사이트나, 글, ip[각주:1], 닉네임을 가지고 있는 사용자가 댓글/방명  록에 기록이 있을 경우 자동으로 알림을 하고 휴지통으로 보내버  립니다.



2. 꾸미기


 스킨

블로그에 스킨을 적용합니다.


 스킨 - 블로그의 서식이라고 생각 하시면 됩니다. 메인 화면, 사이드바 위치, 글 노출 


순서, 방식, 편집기능, 사이드바 메뉴, 배너색상 등등등.. 일체 모든 정보를 포함하고 있는


서식이며 적용시에는 블로그가 스킨에 맞추어 재설정 됩니다. 간혹 스킨 변경시에 기존


에 썻던 글이 오류가 발생하는 경우도 있습니다. 기본 스킨의 경우 관리텝에서 들어가서


볼 수 있지만 예쁜 스킨들은 일반 사용자분들이 배포하시는 경우도 많으니 찾아보시길


 권장 드립니다.


 =>  http://www.tistory.com/skin


html/css 편집

 적용된 스킨의 html/css를 직접 보고 수정이 가능합니다.

단, 저작권 관련하여 임의 수정 금지가 있을 경우 스킨을 임의대로 수정시에 문제가 발생할 수 있으니

수정하시기 전에 해당스킨 배포자의 허가나 라이센스를 잘 살펴보도록 합니다.

MIT lisence 의 경우 수정 및 상업적 이용이 가능함으로 문제가 없습니다.

사이드바

 사이드바 메뉴를 설정합니다. 처음 시작시에는 사이드바가 아래쪽에 있습니다.

스킨 설정 혹은 html/css편집을 통하여서 위치, 색상, 기능 추가 및 변경이 가능합니다.

 화면설정

티에디션, 메뉴, 화면출력 기능을 담당합니다.

티에디션 - 블로그 대문 (첫화면) 편집그능

메뉴설정 - 상단에 위치하는 구분텝 (카테고리, 인기글 등등 다양한 요소로 사용가능)

               단, 메뉴설정을 지원하는 스킨이거나 메뉴치환자[각주:2]를 사용해야한다

화면출력 - 블로그 화면에 동시에 몇개의 글을 띄우는지 같은 화면에 얼마나 출력할지

               설정하는 탭 




3. 플러그인


 플러그인 설정


블로그에 있는 기본 기능이외에 다양한 기능을 구현하고 싶을때 사용하는 설정

ex - google adsense설정, 이전 글 링크삽입, 블로그 아이콘 표시       등등등...

 다양한 기능을 구현 할 수 있으며 끄고 키는게 가능하다. 스킨설  정 및 수정을 통해서 추가하거나 제거하는게 가능하다.

유입 키워드

 내블로그에 유입하는데 사용된 키워드를 보여준다. 내 블로그에  서 어떤 주제의 글이 인기가 있고 어떤것을 찾기위해서 방문하는  지 알 수 있게 해준다.

유입 경로

 어떤 포털사이트나 경로로 내 블로그에 들어오게 되었는지 보여  준다.

방문자 통계

 일별 방문자 수와 통계를 확인할 수 있다.




4. 네트워크

내 링크


 내가 링크한 혹은 나를 링크한 블로거나 사람들을 볼 수 있다.

 이때의 링크란 네버의 이웃과 비슷한 개념이지만 서로이웃이라는  기능이 마땅히  없기 때문에 그 개념은 네이버 블로그의 서로이  웃보다 훨씬 약한 정도를 가진다.

알림

 블로그에 댓글, 방명록, 초대수락여부 (내가 초대를 보냈을 경우)  를 알려준다고 되어있으나 내가 남긴 댓글이나 방명록에 대한 답  글 또한 알림이 온다.

 사실상 대부분의 피드백이나 소통에 대한 정보가 알림창에서 확  인이 가능하다.

초대 관리

초대한 사람에대해서 관리를 진행하거나 블로그를 팀으로 관리하는게 가능하며 이를 팀블로그[각주:3]라 부른다.




5. 환경설정



기본정보


 블로그 정보, 내 프로필, 로그인 기록을 확인 및 수정이 가능하다.

데이터 관리

 블로그의 모든 데이터를 삭제하는 기능 - 복구가 불가능 함으로    주의할 것!


 블로그 폐쇄 기능 - T스토리는 1개의 개정당 5개의 블로그 생성  이 가능한데 마지막 1개의 블로그를 폐쇄할 시 자동으로 회원 탈  퇴가 진행 됨으로 주의할 것.



이상으로 기본적인 TISTORY 관리 메뉴에 대해서 설명이었습니다.


다음은 각 항목별 세부사항에 대해서 설명 하겠습니다.














  1. 인터넷 프로토콜을 사용하는 이동 단말을 위한 기술. 이동 단말이 외부에서 원격지 네트워크에 접속할 때 홈 에이전트(HA)에 현재 네트워크에서 획득한 주소를 등록하면 홈 네트워크가 원격지 네트워크에 있는 단말로 데이터를 보낸다. 부서 이동이 잦거나 이동 근무자가 많은 경우에 IP 주소 관리의 복잡함을 해소하기 위해 IETF가 RFC 2002로 제안하였다. 이 모바일 IP 표준은 모바일 IP 에이전트(mobile IP agents)와 모바일 노드(mobile nodes) 두 부분으로 구성되는데, 모바일 IP 에이전트는 등록된 이동 단말로 패킷을 라우트시키는 가상의 라우팅 서비스를 담당한다. [본문으로]
  2. 치환자 사용 공식가이드 http://www.tistory.com/guide/skin/step3#1-2 [본문으로]
  3. "티스토리 회원"을 초대해서 블로그 하나를 여러명이서 관리하는 기능 [본문으로]
블로그 이미지

로멘

정보 및 리뷰 블로거 _(^@_

,