[티스토리 페이지] 스킨파일을 이용해 페이지에 html 넣는 법

기대와 달리 페이지의 내용을 입력하는 에디터에는 html를 입력할 수 없습니다. html모드가 따로 없죠. 페이지 기능이 생겼네! 하고 환희에 찼다가 좌절 모드에 빠집니다. 포스트 작성 에디터에는 있는 기능이 페이지 에디터에는 없습니다. 오히려 페이지 에디터에 더 필요한 기능인 것 같은데...많은 분들이 html 편집모드 업데이트를 원하고 있는 것 같습니다. 티스토리 공식 블로그에 많은 댓글 요청이 있습니다. 이 정도 요청이면 조만간 업데이트가 될 수 있을까요. 어쨋든 현재로선 불가합니다. 그래도 방법은 있습니다. 해당 방법을 활용하려면 html과 css에 대한 기본지식이 조금 필요합니다.

 

skin.html 파일에 페이지에 넣고 싶은 내용을 입력하는 방법입니다.  html과 css를 통해 페이지 내에 넣고 싶은 내용을 스킨파일에 입력하고 특정 페이지가 열렸을 때만 해당 코드가 보이게 하면 됩니다.

 

페이지의 코드 구조

 

 

https://tistory.github.io/document-tistory-skin/contents/page.html

 

 

페이지의 구조는 상단 이미지와 같습니다. 해당 코드 영역을 통해서 페이지가 출력되는데 이 속에 몇가지 꼼수를 넣어주면 페이지 안에도 html코드가 출력되도록 할 수 있습니다. 

 

[티스토리 페이지] 스킨파일을 이용해 페이지에 html 넣는 법 : 특정 페이지에 대한 타이틀 입니다. 페이지 이름을 "a"라고 입력했으면 해당 반환값이 a가 됩니다. 만약 a라는 페이지를 브라우져에서 열었다면 해당 값이 a라는 값을 가지게 됩니다.

 

기대와 달리 페이지의 내용을 입력하는 에디터에는 html를 입력할 수 없습니다. html모드가 따로 없죠. 페이지 기능이 생겼네! 하고 환희에 찼다가 좌절 모드에 빠집니다. 포스트 작성 에디터에는 있는 기능이 페이지 에디터에는 없습니다. 오히려 페이지 에디터에 더 필요한 기능인 것 같은데...많은 분들이 html 편집모드 업데이트를 원하고 있는 것 같습니다. 티스토리 공식 블로그에 많은 댓글 요청이 있습니다. 이 정도 요청이면 조만간 업데이트가 될 수 있을까요. 어쨋든 현재로선 불가합니다. 그래도 방법은 있습니다. 해당 방법을 활용하려면 html과 css에 대한 기본지식이 조금 필요합니다.

 

skin.html 파일에 페이지에 넣고 싶은 내용을 입력하는 방법입니다.  html과 css를 통해 페이지 내에 넣고 싶은 내용을 스킨파일에 입력하고 특정 페이지가 열렸을 때만 해당 코드가 보이게 하면 됩니다.

 

페이지의 코드 구조

 

 

https://tistory.github.io/document-tistory-skin/contents/page.html

 

 

페이지의 구조는 상단 이미지와 같습니다. 해당 코드 영역을 통해서 페이지가 출력되는데 이 속에 몇가지 꼼수를 넣어주면 페이지 안에도 html코드가 출력되도록 할 수 있습니다. 

 

: 특정 페이지에 대한 타이틀 입니다. 페이지 이름을 "a"라고 입력했으면 해당 반환값이 a가 됩니다. 만약 a라는 페이지를 브라우져에서 열었다면 해당 값이 a라는 값을 가지게 됩니다.

 

: 페이지 에디터에 입력한 내용이 내용이 출력되는 치환자입니다. 하지만 이 방법에서는 해당 치환자를 사용하지 않습니다. 에디터에 html 코드가 입력되지 않기 때문입니다. 대신에 해당 치환자가 있는 부분에 페이지에 출력되기 원하는 html, css 등의 코드를 작성해서 넣어줍니다. 그렇게 되면 페이지가 출력될 때 작성한 코드가 보여지게 됩니다. 근데 문제가 있죠! 어떤 페이지를 열어도 해당 코드가 출력됩니다. 그때 를 활용해서 꼼수를 써주면 됩니다.

 

div에 를 id값으로 줘서 a라는 이름의 페이지가 출력되면 id값 속에 있는 특정 코드만 출력되도록 css를 조정해주는 겁니다. 예를 들어 "#a #a01 {display:block;}" 처럼 a페이지에서 #a01에 해당하는 코드만 출력되게 합니다.

 

다만 해당 방법을 이용하면 여러 페이지의 코드를 입력해서 다양하게 설정할 수 있지만, 코드파일이 많이 길어지고 복잡해져서, 너무 많은 페이지를 만드는 사이트에는 적절하지 않을 수 있습니다.

 

 

 

 

 

작성해 본 예시코드

 

 

특정 타이틀 id에서 오직 #txt 파일만 출력되도록 설정합니다.

 

방법 정리

 

#01

skin.html 파일의 <s_page_rep> 영역 속에 원하는 html 파일을 입력
#02

<s_page_rep>의 가장 가까운 div에 <div id="">처럼 id값을 지정
#03

id값이 a일때 a-content 코드가 노출되도록, b일 때 b-content 코드가 노출되도록 코드 작성

: 페이지 에디터에 입력한 내용이 내용이 출력되는 치환자입니다. 하지만 이 방법에서는 해당 치환자를 사용하지 않습니다. 에디터에 html 코드가 입력되지 않기 때문입니다. 대신에 해당 치환자가 있는 부분에 페이지에 출력되기 원하는 html, css 등의 코드를 작성해서 넣어줍니다. 그렇게 되면 페이지가 출력될 때 작성한 코드가 보여지게 됩니다. 근데 문제가 있죠! 어떤 페이지를 열어도 해당 코드가 출력됩니다. 그때 [티스토리 페이지] 스킨파일을 이용해 페이지에 html 넣는 법를 활용해서 꼼수를 써주면 됩니다.

 

div에

기대와 달리 페이지의 내용을 입력하는 에디터에는 html를 입력할 수 없습니다. html모드가 따로 없죠. 페이지 기능이 생겼네! 하고 환희에 찼다가 좌절 모드에 빠집니다. 포스트 작성 에디터에는 있는 기능이 페이지 에디터에는 없습니다. 오히려 페이지 에디터에 더 필요한 기능인 것 같은데...많은 분들이 html 편집모드 업데이트를 원하고 있는 것 같습니다. 티스토리 공식 블로그에 많은 댓글 요청이 있습니다. 이 정도 요청이면 조만간 업데이트가 될 수 있을까요. 어쨋든 현재로선 불가합니다. 그래도 방법은 있습니다. 해당 방법을 활용하려면 html과 css에 대한 기본지식이 조금 필요합니다.

 

skin.html 파일에 페이지에 넣고 싶은 내용을 입력하는 방법입니다.  html과 css를 통해 페이지 내에 넣고 싶은 내용을 스킨파일에 입력하고 특정 페이지가 열렸을 때만 해당 코드가 보이게 하면 됩니다.

 

페이지의 코드 구조

 

 

https://tistory.github.io/document-tistory-skin/contents/page.html

 

 

페이지의 구조는 상단 이미지와 같습니다. 해당 코드 영역을 통해서 페이지가 출력되는데 이 속에 몇가지 꼼수를 넣어주면 페이지 안에도 html코드가 출력되도록 할 수 있습니다. 

 

: 특정 페이지에 대한 타이틀 입니다. 페이지 이름을 "a"라고 입력했으면 해당 반환값이 a가 됩니다. 만약 a라는 페이지를 브라우져에서 열었다면 해당 값이 a라는 값을 가지게 됩니다.

 

: 페이지 에디터에 입력한 내용이 내용이 출력되는 치환자입니다. 하지만 이 방법에서는 해당 치환자를 사용하지 않습니다. 에디터에 html 코드가 입력되지 않기 때문입니다. 대신에 해당 치환자가 있는 부분에 페이지에 출력되기 원하는 html, css 등의 코드를 작성해서 넣어줍니다. 그렇게 되면 페이지가 출력될 때 작성한 코드가 보여지게 됩니다. 근데 문제가 있죠! 어떤 페이지를 열어도 해당 코드가 출력됩니다. 그때 를 활용해서 꼼수를 써주면 됩니다.

 

div에 를 id값으로 줘서 a라는 이름의 페이지가 출력되면 id값 속에 있는 특정 코드만 출력되도록 css를 조정해주는 겁니다. 예를 들어 "#a #a01 {display:block;}" 처럼 a페이지에서 #a01에 해당하는 코드만 출력되게 합니다.

 

다만 해당 방법을 이용하면 여러 페이지의 코드를 입력해서 다양하게 설정할 수 있지만, 코드파일이 많이 길어지고 복잡해져서, 너무 많은 페이지를 만드는 사이트에는 적절하지 않을 수 있습니다.

 

 

 

 

 

작성해 본 예시코드

 

 

특정 타이틀 id에서 오직 #txt 파일만 출력되도록 설정합니다.

 

방법 정리

 

#01

skin.html 파일의 <s_page_rep> 영역 속에 원하는 html 파일을 입력
#02

<s_page_rep>의 가장 가까운 div에 <div id="">처럼 id값을 지정
#03

id값이 a일때 a-content 코드가 노출되도록, b일 때 b-content 코드가 노출되도록 코드 작성

를 id값으로 줘서 a라는 이름의 페이지가 출력되면 id값 속에 있는 특정 코드만 출력되도록 css를 조정해주는 겁니다. 예를 들어 "#a #a01 {display:block;}" 처럼 a페이지에서 #a01에 해당하는 코드만 출력되게 합니다.

 

다만 해당 방법을 이용하면 여러 페이지의 코드를 입력해서 다양하게 설정할 수 있지만, 코드파일이 많이 길어지고 복잡해져서, 너무 많은 페이지를 만드는 사이트에는 적절하지 않을 수 있습니다.

 

 

 

 

 

작성해 본 예시코드

 

 

특정 타이틀 id에서 오직 #txt 파일만 출력되도록 설정합니다.

 

방법 정리

 

#01

skin.html 파일의 <s_page_rep> 영역 속에 원하는 html 파일을 입력
#02

<s_page_rep>의 가장 가까운 div에 <div id="[티스토리 페이지] 스킨파일을 이용해 페이지에 html 넣는 법">처럼 id값을 지정
#03

id값이 a일때 a-content 코드가 노출되도록, b일 때 b-content 코드가 노출되도록 코드 작성