1.티스토리 관리화면에서 [HTML/CSS 편집] 버튼을 클릭합니다.


2.오른쪽 HTML 내용중

를 찾아서
분류 전체보기 (59)
패션 (0)
기타 (9)
안드로이드 공작 (3)
css 퍼블리싱 정리 (2)
블로그 기술 (3)
웹개발 (2)
여행 (13)
SI 프로젝트 후기 (8)
식도락 (10)
영화리뷰 (1)
사이트 리뷰 (1)
앱리뷰(ANDROID) (4)
컴퓨터 활용팁 (0)
책리뷰 (0)
건축,인테리어 (1)
로 변경합니다. 





3.오른쪽 내용중 CSS 탭에서 

 #treeComponent table{

cursor:pointer;

 }

를 추가하여 카테고리 위에 마우스 커서 이동시 손가락 모양으로 바뀌도록 합니다.







블로그 이미지

와사비망고

,


SEO 는 "Search Engine Optimization" 의 약자로 자신의 사이트를 구글,네이버, 다음 

등의 검색엔진 사이트에서 검색했을 때 상위에 노출되도록  하는 작업을 말합니다.

SEO 의 목적은 자신의 사이트나 블로그의 방문자를 늘리기 위함입니다.


특히 , 구글 사이트 검색에 최적화된 SEO 작업의 장점은 

단발성이 아닌 지속적이고 꾸준한 검색방문자수를 유지할 수 있다는 점입니다.


보통 검색엔진최적화(SEO)작업이라는게 해당 검색엔진의 검색 알고리즘 로직이 바뀌면 

내 사이트의 검색순위도 바뀌지 않을까 하는 생각들을 합니다.

하지만 전문가들은 말하길 탄탄한 컨텐츠( 유저가 읽고 만족하고, 검색엔진에도 

최적화된 마크업을 가진) 는 검색엔진의 알고리즘이 변하여도 순위의 변동이 

심하지 않다고 말하고있습니다.


<참고할 구글 검색엔진 최적화 가이드라인 문서>


https://www.google.co.kr/intl/ko/webmasters/docs/search-engine-optimization-starter-guide-ko.pdf


가이드 문서 목차

1.명확하고 독창적인 제목 사용

2.description 메타 태그 사용하기

3.페이지의 URL 구조 개선

4.사이트 내에서 이동하기 쉽게 만들기

5.우수품질의 콘텐츠나 서비스 제공하기

6.더 좋은 앵커 텍스트 사용하기

7.이미지 사용의 최적화

8.제목 태그를 적절히 활용

9.robots.txt 를 효과적으로 활용하기

10.ref="nofollow" 링크 속성 사용시 주의사항

11. Google에게 모바일용 사이트 알리기

12. 모바일 사용자 정확하게 안내하기

13. 웹사이트를 올바르게 홍보하기

14. 무료제공 도구 활용



컨텐츠를 퀄리티 있게 작성하고 SEO 최적화를 꾸준히 해나가면 반드시 성과는 나오게됩니다. 

성과가 나오면 그만큼 수익을 얻을 수 있다는 점을 기억하며 꾸준히 즐기며 진행하는게

중요하겠습니다. 


블로그 이미지

와사비망고

,


1. http://prismjs.com/download.html 에 접속합니다.

2. Languages에서 블로그에 출력할 프로그래밍언어를 선택합니다.

3. Plugins 에 

   Line Highlight ,

   Highlight ,

   Line Numbers , 

   Previewer Base ,

   Previewer Color ,

   Show Language 

   옵션들을 선택해줍니다. 

3. 맨 아래 DOWNLOAD JS, DOWNLOAD CSS 클릭으로 

    prism.css , prism.js 를 다운로드 합니다.



4. 블로그상에서 아래 빨간부분들을 순서대로 클릭합니다. 





5. 3번에서 다운로드 했던 prism.css, prism.js 파일을 업로드 해줍니다.







     <link rel="stylesheet" type="text/css" href="prism.css">
     <script src="prism.js"></script>

6. 위 코드를 </head> 안에 추가 해줍니다.


7. 티스토리 글쓰기 에디터에서 HTML 모드로 들어간 후 아래 테스트 코드를 입력합니다.


//▼▼▼▼▼▼▼▼▼▼ 복사할 테스트 코드 ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼


<pre class="line-numbers"><code class="language-markup">

<p>&lt;!doctype html&gt;</p>

<p>...</p>

<p>&lt;!-- html태그 --&gt;</p>

<p>&lt;div class="center123"&gt;</p>

<p style="margin-left: 2em;">&lt;span &gt;망고땡&lt;/span&gt;</p>

<p>&lt;/div&gt;</p>

</code></pre>


  <pre class="line-numbers"><code class="language-css">

/* css */

#c1{ background-color:black}

#block{diaplay:block;background-color:#ff2343}

</code></pre>


<pre class="line-numbers"><code class="language-java">

public static void main(String[] args) throws Exception{

//java 코드

System.out.println("망고땡블로그");

}

</code></pre>


<pre class="line-numbers"><code class="language-csharp">

using System;

using 토니스타크.자비스;

namespace 인공지능

{

public partial class 알파고 : 자비스

{

//C# 코드

public 바둑좌표 get최적의수(int[][] 현재바둑판상황)

{

return CPU1202개_GPU176개로_검색(현재바둑판상황);

}

}

}

</code></pre>

//▲▲▲▲▲▲▲▲▲  복사할 테스트 코드 ▲▲▲▲▲▲▲▲▲▲▲▲▲


다운로드 받을때 선택한 테마(Themes) 에 따라 아래와 같은 스타일이 적용됩니다.



COY 테마

DARK 테마


DEFAULT 테마


FUNKY 테마


OKAIDIA 테마


SOLARIZED 테마


TWILIGHT 테마








블로그 이미지

와사비망고

,