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 테마

<div id="container">

    <div class="box">머시기거시기거시기머시기</div>

</div>

위의 내용을 두고

box 를 position:relative 로 두면 container 내부에 영역을 차지하고 box div 사이즈가 커지면

container 요소의 사이즈도 커진다. 하지만 box 요소의 top 값을 조정해 이동시켜도 container 의 사이즈가 커지지는 않는다.

top,bottom,left, right 의 값은 먹힌다.

같은 부모 내부의 relative , static 요소간에는 질서가 유지된다.

(만약 같은 부모이고 자신의 앞부분에 static 이나 relative 요소를 추가하고 top 값을 지정하면

자신의 형제요소인 그 요소를 기준으로 top 이 계산되어진다. 부모의 top 을 기준으로한 top 이 아니라 말이다.)

그림으로 자세히 설명하자면

[[왼쪽소스]]

<div id="container">
    <div class="box">머시기거시기거시기머시기</div>
</div>

[[오른쪽소스]]

<div id="container">
    <div>앞</div>
    <div class="box">머시기거시기거시기머시기</div>
</div>

box 를 기본값인 position:static 으로 두면 container 내부에 영역을 차지하고 box div 사이즈가 커지면
container 요소의 사이즈도 커진다. 

또 top,left,bottom,right 값은 먹지 않는다.

그리고 한 라인을 다 차지한다. 

width, height 값은 적용된다. 

box를 position:absolute; 으로 두면 container 내부에 영역을 차지하지 않고 absolute 흐름으로 편입된다. 

부모가 position:absolute 요소 외에 자식이없다면 부모요소의 높이는 0이된다. 

position:fixed 의 경우 absolute 와 같지만 차이점은

브라우져 스크롤을 올리고 내려도 브라우져 client화면의 left,top 을 기준으로 그자리에 고정된다. 

이런식으로 안드로이드 앱의 레이아웃을 배치하는 방법은 이렇케

___________________________________________________________________________________

___________________________________________________________________________________