티스토리에 마크다운 적용하기

* Markdown 이란?

마크다운 (Markdown)은 마크업 언어의 일종으로, 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 만들었다.
읽기도 쓰기도 쉽다는 장점이 있다.
그루버는 마크다운으로 작성한 문서를 HTML로 변환하는 펄 스크립트도 만들었다.
확장자는 .md를 쓴다.

출처: 나무위키

마크다운 적용하기

티스토리에 마크다운을 적용하는 방법은 생각보다 간단합니다.
제대로 나와있는 사이트가 없어서 새로 만든 후 공유 합니다.

1. 관리자를 들어갑니다

2. 다음 그림처럼 HTML/CSS 편집을 들어갑니다

3. 다음 그림처럼 우측 상단의 css를 누릅니다.

4. 그러면 방금 누른 CSS버튼 아래로 기존의 CSS 코드가 있는데, 기존 코드는 지우지 마시고 제 블로그 아래의 코드를 복사해서 기존 코드 맨 밑에다가 추가합니다.

빨간색이 새로 추가한 코드입니다.
위 이미지처럼 아래 코드들을 복사해서 추가해주세요

/* 깃허브 마크다운 css */
 
.area_view body {
  font-family: Helvetica, arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background-color: white !important;
  padding: 30px !important; }
 
.area_view body > *:first-child {
  margin-top: 0 !important; }
.area_view body > *:last-child {
  margin-bottom: 0 !important; }
 
.area_view a {
  color: #4183C4 !important; }
.area_view a.absent {
  color: #cc0000 !important; }
.area_view a.anchor {
  display: block !important;
  padding-left: 30px !important;
  margin-left: -30px !important;
  cursor: pointer !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important; }
 
.area_view h1, .area_view h2, .area_view h3, .area_view h4, .area_view h5, .area_view h6 {
  margin: 20px 0 10px !important;
  padding: 0 !important;
  font-weight: bold !important;
  -webkit-font-smoothing: antialiased !important;
  cursor: text !important;
  position: relative !important; }
 
.area_view h1:hover a.anchor, .area_view h2:hover a.anchor, .area_view h3:hover a.anchor, .area_view h4:hover a.anchor, .area_view h5:hover a.anchor, .area_view h6:hover a.anchor {
  background: url("../../images/modules/styleguide/para.png") no-repeat 10px center !important;
  text-decoration: none !important; }
 
.area_view h1 tt, .area_view h1 code {
  font-size: inherit !important; }
 
.area_view h2 tt, .area_view h2 code {
  font-size: inherit !important; }
 
.area_view h3 tt, .area_view h3 code {
  font-size: inherit !important; }
 
.area_view h4 tt, .area_view h4 code {
  font-size: inherit !important; }
 
.area_view h5 tt, .area_view h5 code {
  font-size: inherit !important; }
 
.area_view h6 tt, .area_view h6 code {
  font-size: inherit !important; }
 
.area_view h1 {
  font-size: 28px !important;
  color: black !important; }
 
.area_view h2 {
  font-size: 24px !important;
  border-bottom: 1px solid #cccccc !important;
  color: black !important; }
 
.area_view h3 {
  font-size: 18px !important; }
 
.area_view h4 {
  font-size: 16px !important; }
 
.area_view h5 {
  font-size: 14px !important; }
 
.area_view h6 {
  color: #777777 !important;
  font-size: 14px !important; }
 
.area_view p, .area_view blockquote, .area_view ul, .area_view ol, .area_view dl, .area_view li, .area_view table, .area_view pre {
  margin: 15px 0 !important; }
 
.area_view hr {
  background: transparent url("../../images/modules/pulls/dirty-shade.png") repeat-x 0 0 !important;
  border: 0 none !important;
  color: #cccccc !important;
  height: 4px !important;
  padding: 0 !important; }
 
.area_view body > h2:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important; }
.area_view body > h1:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important; }
.area_view body > h1:first-child + h2 {
    margin-top: 0 !important;
    padding-top: 0 !important; }
.area_view body > h3:first-child, .area_view body > h4:first-child, .area_view body > h5:first-child, .area_view body > h6:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important; }
 
.area_view a:first-child h1, .area_view a:first-child h2, .area_view a:first-child h3, .area_view a:first-child h4, .area_view a:first-child h5, .area_view a:first-child h6 {
  margin-top: 0 !important;
  padding-top: 0 !important; }
 
.area_view h1 p, .area_view h2 p, .area_view h3 p, .area_view h4 p, .area_view h5 p, .area_view h6 p {
  margin-top: 0 !important; }
 
.area_view li p.first {
  display: inline-block !important; }
 
.area_view ul, .area_view ol {
  padding-left: 30px !important; }
 
.area_view ul :first-child, .area_view ol :first-child {
  margin-top: 0 !important; }
 
.area_view ul :last-child, .area_view ol :last-child {
  margin-bottom: 0 !important; }
 
.area_view dl {
  padding: 0 !important; }
  .area_view dl dt {
    font-size: 14px !important;
    font-weight: bold !important;
    font-style: italic !important;
    padding: 0 !important;
    margin: 15px 0 5px !important; }
    .area_view dl dt:first-child {
      padding: 0 !important; }
    .area_view dl dt > :first-child {
      margin-top: 0 !important; }
    .area_view dl dt > :last-child {
      margin-bottom: 0 !important; }
  .area_view dl dd {
    margin: 0 0 15px !important;
    padding: 0 15px !important; }
    .area_view dl dd > :first-child {
      margin-top: 0 !important; }
    .area_view dl dd > :last-child {
      margin-bottom: 0 !important; }
 
.area_view blockquote {
  border-left: 4px solid #dddddd !important;
  padding: 0 15px !important;
  color: #777777 !important; }
  .area_view blockquote > :first-child {
    margin-top: 0 !important; }
  .area_view blockquote > :last-child {
    margin-bottom: 0 !important; }
 
.area_view table {
  padding: 0 !important; }
  .area_view table tr {
    border-top: 1px solid #cccccc !important;
    background-color: white !important;
    margin: 0 !important;
    padding: 0 !important; }
    .area_view table tr:nth-child(2n) {
      background-color: #f8f8f8 !important; }
    .area_view table tr th {
      font-weight: bold !important;
      border: 1px solid #cccccc !important;
      text-align: left !important;
      margin: 0 !important;
      padding: 6px 13px !important; }
    .area_view table tr td {
      border: 1px solid #cccccc !important;
      text-align: left !important;
      margin: 0 !important;
      padding: 6px 13px !important; }
    .area_view table tr th :first-child, .area_view table tr td :first-child {
      margin-top: 0 !important; }
    .area_view table tr th :last-child, .area_view table tr td :last-child {
      margin-bottom: 0 !important; }
 
.area_view img {
  max-width: 100% !important; }
 
.area_view span.frame {
  display: block !important;
  overflow: hidden !important; }
  .area_view span.frame > span {
    border: 1px solid #dddddd !important;
    display: block !important;
    float: left !important;
    overflow: hidden !important;
    margin: 13px 0 0 !important;
    padding: 7px !important;
    width: auto !important; }
  .area_view span.frame span img {
    display: block !important;
    float: left !important; }
  .area_view span.frame span span {
    clear: both !important;
    color: #333333 !important;
    display: block !important;
    padding: 5px 0 0 !important; }
.area_view span.align-center {
  display: block !important;
  overflow: hidden !important;
  clear: both !important; }
  .area_view span.align-center > span {
    display: block !important;
    overflow: hidden !important;
    margin: 13px auto 0 !important;
    text-align: center !important; }
  .area_view span.align-center span img {
    margin: 0 auto !important;
    text-align: center !important; }
.area_view span.align-right {
  display: block !important;
  overflow: hidden !important;
  clear: both !important; }
  .area_view span.align-right > span {
    display: block !important;
    overflow: hidden !important;
    margin: 13px 0 0 !important;
    text-align: right !important; }
  .area_view span.align-right span img {
    margin: 0 !important;
    text-align: right !important; }
.area_view span.float-left {
  display: block !important;
  margin-right: 13px !important;
  overflow: hidden !important;
  float: left !important; }
  .area_view span.float-left span {
    margin: 13px 0 0 !important; }
.area_view span.float-right {
  display: block !important;
  margin-left: 13px !important;
  overflow: hidden !important;
  float: right !important; }
  .area_view span.float-right > span {
    display: block !important;
    overflow: hidden !important;
    margin: 13px auto 0 !important;
    text-align: right !important; }
 
.area_view code, .area_view tt {
  margin: 0 2px !important;
  padding: 0 5px !important;
  white-space: nowrap !important;
  border: 1px solid #eaeaea !important;
  background-color: #f8f8f8 !important;
  border-radius: 3px !important; }
 
.area_view pre code {
  margin: 0 !important;
  padding: 0 !important;
  white-space: pre !important;
  border: none !important;
  background: transparent !important; }
 
.area_view .highlight pre {
  background-color: #f8f8f8 !important;
  border: 1px solid #cccccc !important;
  font-size: 13px !important;
  line-height: 19px !important;
  overflow: auto !important;
  padding: 6px 10px !important;
  border-radius: 3px !important; }
 
.area_view pre {
  background-color: #f8f8f8 !important;
  border: 1px solid #cccccc !important;
  font-size: 13px !important;
  line-height: 19px !important;
  overflow: auto !important;
  padding: 6px 10px !important;
  border-radius: 3px !important; }
  .area_view pre code, .area_view pre tt {
    background-color: transparent !important;
    border: none !important; }

저장하면 적용되었을 겁니다.
질문사항은 댓글로 남겨주세요 :)

html 안에 script 태그를 어느 위치에 삽입하는것이 가장 좋을까?
문득 궁금해서 찾아보았습니다.
다음은 stackoverflow 에서 가장 추천수가 많은 질문과 답변입니다.
발번역이므로 오역은 댓글로 지적받겠습니다 :)

HTML 문서에 자바 스크립트를 삽입 할 때 <script> 태그와 자바 스크립트를 넣을 수있는 가장 좋은 곳은 어디일까?

사람들은 자바스크립트를 <head> 섹션에 삽입하면 좋지 않다고 하지만, <body> 섹션의 시작 부분에 놓는 것 또한 나쁘다고 합니다.
왜냐하면 자바 스크립트는 페이지가 완전히 렌더링되기 전에 파싱되어야하기 때문입니다.
그럼 <body> 섹션의 끝에 <script> 태그를 놓는 방법만이 남은것 같아 보입니다.
그렇다면 <script> 태그를 넣을 수있는 가장 적합한 곳은 어디일까요?

브라우저가 웹 사이트를 로드 할 때 일어나는 일

1. HTML 페이지 가져 오기 (예 : index.html)

2. HTML 구문 분석을 시작합니다

3. 파서는 외부 스크립트 파일을 참조하는 <script> 태그를 발견합니다.

4. 브라우저가 스크립트 파일을 요청합니다. 한편 파서는 페이지의 다른 HTML을 구문 분석하는 것을 차단합니다.

5. 잠시 후 스크립트가 다운로드 된 후 실행됩니다.

6. 파서는 나머지 HTML 문서를 계속 파싱합니다.

4번은 좋지 않은 사용자 환경을 유발합니다.
웹 사이트는 기본적으로 모든 스크립트를 다운로드 할 때까지 로드를 중지합니다.
사용자는 웹 사이트가 로드 될 때까지 기다리는 것을 싫어합니다.

왜 이런 일이 일어날까요?

모든 스크립트는 document.write () 또는 다른 DOM 조작을 통해 자체 HTML을 삽입 할 수 있습니다.
이는 구문 분석기가 나머지 문서를 안전하게 구문 분석하기 전에 스크립트가 다운로드되고 실행될 때까지 기다려야 함을 의미합니다. 결국 스크립트는 자체 HTML을 문서에 삽입 할 수 있습니다.

그러나 대부분의 개발자는 문서가 로드되는 동안 더 이상 DOM을 조작하지 않습니다. 대신 문서를 수정하기 전에 문서가 로드 될 때까지 대기합니다.

예를 들면:

<!-- index.html -->
<html>
    <head>
        <title>매일매일 커밋하나씩</title>
        <script type="text/javascript" src="my-script.js"></script> 
    </head>
    <body>
        <div id="user-greeting">환영합니다!</div>
    </body>
</html>

Javascript:

// my-script.js 
document.addEventListener("DOMContentLoaded", function() {
    // this function runs when the DOM is ready, i.e. when the document has been parsed 
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

브라우저가 my-script.js가 다운로드되고 실행될 때까지 문서를 수정하지 않는다는 것을 브라우저가 알지 못하기 때문에 파서가 구문 분석을 중단합니다.

고전적인 방법

이 문제를 해결하기위한 이전 접근법은 <body> 맨 아래에 <script> 태그를 두는 것이 었습니다. 이렇게하면 파서가 맨 끝까지 차단되지 않기 때문입니다.

이 접근 방식에는 자체적 인 문제가 있습니다. 브라우저는 전체 문서가 구문 분석 될 때까지 스크립트 다운로드를 시작할 수 없습니다. 큰 스크립트 및 스타일 시트가있는 더 큰 웹 사이트의 경우 가능한 한 빨리 스크립트를 다운로드 할 수있는 것이 성능 향상에 매우 중요합니다. 웹 사이트가 2초 내에 로드되지 않으면 사람들은 다른 웹 사이트로 이동할 것 입니다.

최적의 솔루션에서 브라우저는 가능한 한 빨리 스크립트 다운로드를 시작하는 동시에 문서의 나머지 부분을 파싱합니다.

현대적인 접근법

오늘날 브라우저는 스크립트의 비동기 및 지연 특성을 지원합니다. 이러한 속성은 스크립트가 다운로드되는 동안 계속 구문 분석을하는 것이 안전하다는 것을 브라우저에 알려줍니다.

async

<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>

async 속성이있는 스크립트는 비동기 적으로 실행됩니다. 즉, 스크립트가 다운로드되는 즉시 브라우저가 차단되지 않고 실행됩니다.
이는 스크립트 2가 스크립트 1 이전에 다운로드 및 실행될 수 있음을 의미합니다.

http://caniuse.com/#feat=script-async 에 따르면 모든 브라우저의 90 %가이를 지원합니다.

defer

<script type="text/javascript" src="path/to/script1.js" defer></script>
<script type="text/javascript" src="path/to/script2.js" defer></script>

defer 속성을 가진 스크립트는 순서대로 (즉, 첫 번째 스크립트 1 다음에 스크립트 2) 실행됩니다. 이것은 또한 브라우저를 차단하지 않습니다.

defer는 비동기 스크립트와는 다르게 지연 스크립트는 전체 문서가 로드된 후에만 실행됩니다.

http://caniuse.com/#feat=script-defer 에 따르면 모든 브라우저 중 90 %가이를 지원합니다. 92 %는 적어도 부분적으로 그것을 지원합니다.

브라우저 호환성에 대한 중요한 참고 사항 : 일부 경우 IE <= 9는 지연된 스크립트를 순서대로 실행하지 않을 수 있습니다. 해당 브라우저를 지원해야하는 경우 먼저 읽으십시오!

결론

현재의 최신 기술은 스크립트를 <head> 태그에 넣고 async 또는 defer 속성을 사용하는 것입니다. 이렇게하면 브라우저를 차단하지 않고도 스크립트를 최대한 빨리 다운로드 할 수 있습니다.

좋은 점은 이 속성을 지원하지 않는 브라우저의 20%에서도 웹 사이트가 여전히 올바르게 로드 되며 나머지 80 %는 속도가 빨라진다는 것입니다.

해당 글은 stackoverflow 에서 추천을 많이 받은 글을 발췌했습니다.

오역은 댓글로 피드백주세요:)

스택 오버플로에 질문글이 올라왔다.

jQuery 를 이용해서 다른페이지로 이동할수있나요?

(How can I redirect the user from one page to another using jQuery?)

다음은 추천을 가장 많이 받은 답변이다. (추천 9690개)

jQuery 를 이용해도 더 간단해지지 않습니다.

(One does not simply redirect using jQuery)

jQuery는 필요하지 않으며 window.location.replace(...) 를 사용하는 방법이 http redirect를 가장 잘 나타냅니다

(jQuery is not necessary, and window.location.replace(...) will best simulate an HTTP redirect.)

이 방법은 window.location.href = 을 사용하는것보다 나은데, 왜냐하면 replace() 는 기존 페이지의 세션 정보를 저장하지 않고, 이것은 사용자가 뒤로가기 버튼을 눌렀을 때 정상적으로 이전 페이지를 불러올 수 없다.

(It is better than using window.location.href =, because replace() does not keep the originating page in the session history, meaning the user won't get stuck in a never-ending back-button fiasco.)

만약 단순히 링크를 클릭하는것을 구현하고싶다면 location.href를 사용하고, HTTP redirect 를 구현하고 싶다면 location.replace.을 써라

(If you want to simulate someone clicking on a link, use location.href. If you want to simulate an HTTP redirect, use location.replace.)

다음은 jQuery 로 사용하는 방법을 어떤분이 올려놓은 답변이다

경고 :이 답변은 가능한 해결책으로 제공되었을뿐입니다. 그것은 jQuery를 필요로하기 때문에 분명히 최선의 해결책은 아닙니다. 대신 순수한 JavaScript 솔루션을 선호하십시오.

WARNING: This answer has merely been provided as a possible solution; it is obviously not the best solution, as it requires jQuery. Instead, prefer the pure JavaScript solution.

$(location).attr('href', 'http://stackoverflow.com')

출처 : http://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-page-in-jquery