코딩/Javascript

티스토리 HTML 스킨 편집하기

드리프트 2020. 12. 31. 22:26
728x170

 

 

안녕하세요?

 

티스토리 블로그 사용자입니다.

 

티스토리 블로그는 네이버 블로그보다 좀 더 사용자 친화적이며, 잘 설계된 정적 사이트 제너레이터라고 볼 수 있습니다.

 

정적 사이트 제너레이터 즉, Static Site Generator의 종류는 많습니다.

 

Node 쪽에는 GhostJS가 유명하고, Golang 쪽에서는 Hugo 가 유명하고, C++ 및 기타 언어로도 많은 종류가 있습니다.

 

본인은 GhostJS 를 라즈베리파이에 한번 설치해서 블로그 운영 기초를 한번 배웠었는데요.

 

아래 링크를 참조하시면 정적 사이트 제너레이터가 어떻게 작동하는지 이해하실 수 있을 겁니다.

 

https://cpro95.tistory.com/2

 

라즈베리파이에 고스트 블로그 설치하기

라즈베리파이에 고스트(GhostJS) 블로그 설치하기 - 1편 유명 포털의 블로그 시스템을 이용하기 보다 직접 만들고 싶다는 마음때문에 React로 이것 저것 만들어 봤는데요 그중에 NextJS, GatsbyJS, Navi 등

cpro95.tistory.com

https://cpro95.tistory.com/5

 

라즈베리파이에 고스트(GhostJS) 블로그 설치하기 - 2편

지난 시간에 이어 고스트 블로그 설치를 계속해 보겠습니다. 1편에서는 설치후 실행까지 살펴보았는데 이제는 본격적으로 사용하는 방법에 대해 알아보겠습니다. 테마 설정하기 기본 테마보다

cpro95.tistory.com

 

서론이 조금 길었는데요.

 

티스토리는 무슨 언어로 만들었지는 모르지만 나름 사용자가 커스터마이징 할 수 있게 여러 편의 사항을 제공합니다.

 

그중 제일 좋은 점은 HTML 파일을 직접 편집할 수 있게 해 주죠.

 

생각해 보면 정말 좋은 기능입니다. HTML 파일을 직접 편집할 수 있다면 구글 애널리틱스나 구글 애드센스 등 여러 플러그인을 본인 입맛에 맞게 편집할 수 있어 그 효과가 대단합니다.

 

네이버 블로그가 구글 애드센스가 안 되는 이유가 바로 이 때문입니다.

 

그럼 티스토리 HTML 파일을 편집해야 하는데 상당히 복잡하게 되어 있습니다.

 

이번 글에서는 티스토리 HTML 파일의 구조를 단계별로 분석하여 좀 더 이해하기 쉽게 풀어보도록 하겠습니다.

 

사전 지식인 HTML 마크업 랭귀지를 조금은 알고 있다고 전제하겠습니다.

 

먼저 HTML 파일의 전체적인 구조는 아래와 같습니다.

<html>

	<head>
    	<!-- 헤더부분 -->
	</head>

	<body>
    	<!-- 바디부분 -->
	</body>

</html>

<html></html> 이란 태그로 전체를 감싸고 있습니다.

 

그 안에 <head></head> 태그와 <body></body> 태그가 있습니다.

 

<head></head> 태그 안에는 html 파일에 필요한 각종 정보를 나열합니다.

 

예를 들어, 이 html 파일의 제목(title)이나 검색엔진이 찾을 수 있는 각종 메타(meta) 정보, html 파일의 스타일을 지정하는 CSS 파일 등 시스템적인 역할을 <head></head> 태그 안에서 해결합니다.

 

<body></body> 태그가 우리의 글 내용이 들어가는 공간입니다.

 

우리는 <head></head> 부분보다 <body></body> 부분에 집중하면서 티스토리 정적 사이트 제너레이터의 작동 방식에 대해 알아볼 예정입니다.

 

<body></body> 태그 안에는 아래 그림과 같이 크게 세 개의 중요한 부분으로 나뉘어 있습니다.

 

<body></body> 태그의 시작에서 보듯이 <body id="tt-body-page" class=class=".....처럼 id와 class라고 있는데 지금은 무시하고 전체적인 구조만 보겠습니다.

 

<body> 안에 일단 <s_t3>라는 태그가 있습니다. 이 <s_t3>라는 태그는 뭐하는 태그인지 모르지만 <body> 태그 전체를 감싸는 걸로 봐서 티스토리 버전 3의 코드 같습니다.

 

일단 모든 코드가 <s_t3> 안에 위치하기 때문에 이 코드는 무시해도 됩니다.

 

그럼 이 <s_t3> 안에는 뭐가 있나요?

 

위 그림에서 보듯이 <div> 태그가 있으며 이 <div> 태그가 전체를 커버하고 있습니다.

 

그래서 이 태그도 무시해도 됩니다.

 

그럼 이 <div> 태그 안에는 뭐가 있나요?

 

바로 전체적인 세 개의 구조인 <header>, <div>, <footer>가 있습니다.

 

말 그대로 티스토리 홈페이지에서 헤더 역할을 하는 <header> 태그, 푸터역할(화면 맨 아래에 표시되는 거)을 하는 <footer> 태그, 그리고 가운데에 있는 <div> 태그가 있습니다.

 

HTML 마크업 랭귀지에서는 본문을 세 가지로 나누는 걸 권장합니다.

 

<header> <main> <footer> 태그가 그것인데요, 티스토리는 <main> 태그를 안 쓰고 블록을 나타내는 가장 일반적인 <div> 태그를 썼습니다.

 

<main> 태그를 안 쓸 거면 <header> 나 <footer> 도 <div> 태그로 쓸 것이지 약간 통일성이 없네요.

 

하지만 프로그래머 마음입니다. <div>를 쓰나 <header> <main> <footer>를 쓰나 결과는 동일하거든요, 단지 HTML 코드를 분석할 때 용이할 수 있을 뿐입니다.

 

<div> 태그 위아래로 이 표시가 보이시죠?

 

이 표시는 카카오 광고입니다. 광고는 헤더 다음, 푸터 전에 표시되는 게 구조적으로 가장 좋기 때문입니다.

 

 

첫 번째, HEADER tag

 

그럼 전체적으로 3가지 구조를 봤기 때문에 일단 첫번째 구역인 <header></header> 태그에 대해 좀 더 알아보겠습니다.

 

 

일단 <header> 태그에는 두 개의 <div> 구역이 있습니다.

 

첫 번째 <div> 태그에는 class 만 있고 내용이 없습니다. 보통 이런 경우 이 구역의 스타일을 조정하기 위해 사용하는 방식일 수 있습니다.

 

실제 class 내용을 봐도 "line-bottom display-none"입니다.

 

라인 아래쪽이라고 알리면서 디스플레이하지 말라는 뜻입니다.

 

즉 보이지는 않는다는 얘기죠. 스타일을 위한 <div> 니까 다음 <div>로 넘어가겠습니다.

 

두 번째 <div> 구역은 class 가 inner-header입니다. 그리고 이 <div> 구역이 전부입니다.

 

 

즉, <header> 내용은 이 <div> 안에 다 있다는 얘기죠.

 

그럼 이 <div>를 좀 더 파헤쳐 보겠습니다.

 

위 그림에서 처럼 "inner-header" <div> 안에는 또 두 개의 <div> 구역이 있습니다.

 

한 개는 "box-header"라는 <div>와 "area-align"이라는 <div>가 있습니다.

 

"box-header" <div>를 분석해 봅시다.

 

 

html 코드를 보면 홈페이지의 타이틀 로고와 타이틀을 표시하고 있으며,

 

마지막으로는 서치바(PC 화면일 경우)를 위한 코드가 있습니다.

 

여기는 쉽게 이해도 되고 우리가 여기서 고칠 게 없기 때문에 이런 거다라고 넘어가겠습니다.

 

두 번째, "area-align" <div> 구역을 보겠습니다.

 

 

총 4개의 구역으로 나누어져 있습니다.

 

첫 번째는 "header slogun title"입니다.

 

쉬운 말로 "머리말 슬로건 타이틀"입니다.

 

슬로건 영어 철자가 잘 못 됐네요.

 

slogan 이 맞는 철자 같습니다. ㅎㅎ

 

두 번째는 "area-gnb"입니다. 이 곳은 티스토리 화면에서 카테고리를 보여주는 곳입니다.

 

 

제 티스토리 블로그를 기준으로 첫 화면에 카테고리를 쭉 나열할 수 있는데 "area-gnb"는 이 역할을 합니다.

 

실제 "area-gnb"에는 <nav> 태그가 있어서 카테고리를 쭉 나열하고 있습니다.

 

세 번째는 <button> 태그입니다. 이게 뭐하는지는 좀 더 알아보겠습니다.

 

지금은 어떤 역할인지 모르겠네요.

 

네 번째는 "header banner image"입니다.

 

쉬운 말로 "머리말 배너 이미지"를 위한 공간입니다.

 

우리가 블로그 속성에서 배너 이미지를 설정하면 이곳에서 처리한다는 뜻입니다.

 

이제 전체적으로 <header> <div id="container"> <footer> 태그 3개 중 <header> 태그가 끝났습니다.

 

 

 

 

 

두 번째, 컨테이너 DIV

 

다음으로 가장 중요한 <div id="container"> 태그 안을 살펴보겠습니다.

 

 

ㅎㅎ, 드디어 나왔습니다.

 

<main> 태그 말입니다.

 

제가 위에서 <main> 태그를 왜 안 썼는지 궁금했었는데 <div> 태그 안에 <main> 태그를 썼군요.

 

약간 특이한 케이스입니다.

 

일단 <main> 태그 안을 다시 분석해 보겠습니다.

 

 

<main> 태그 안에는 두 개의 <div> 태그가 있습니다.

 

첫 번째는 "area-main"이고 두 번째는 "area-aside"입니다.

 

이름으로 유추해 보면 "area-main"은 말 그대로 글이 표시되는 main 구역이고,

 

"area-aside"는 사이드바를 위한 구역인 거 같습니다. 실제로도 그렇고요.

 

우리가 스킨을 고를 때 왼쪽이나 오른쪽 사이드바를 선택하면 위의 <aside> 태그 안에 있는 내용이 그 사이드바에 나타난다고 볼 수 있습니다.

 

일단 "area-main"을 좀 더 살펴보겠습니다.

 

 

또 세 개의 구역으로 나누어져 있네요.

 

첫 번째는 "area-common", "카테고리, 검색 리스트"라고 주석이 달려 있습니다.

 

두 번째는 "area-view", "뷰페이지 및 기본 영역"이라고 주석이 달려 있습니다.

 

세 번째는 "s_cover_group", "커버 리스트"라고 주석이 달려 있습니다.

 

먼저 "area-common" <div> 태그를 살펴보겠습니다.

 

 

 

이 구역은 우리가 블로그에서 검색할 때 나오는 화면에 대한 코드입니다.

 

아마도 <s_list></s_list>라고 하는 게 "search list"의 약자 같습니다.

 

<s_list_rep></s_list_rep> 구역에서 검색 결과를 나타내 주고 있고,

 

<s_list_empty></s_list_empty> 구역에서 검색 결과가 없을 때 결과를 나타내 주고 있습니다.

 

저는 개인적으로 <s_list_empty></s_list_empty> 안에 구글 애드센스 광고를 넣었습니다.

 

왜냐하면 검색 결과가 없다는 표시가 너무 휑해서 빈 공간이 많더라고요.

 

이럴 때 광고를 넣기가 좋다고 판단했습니다.

 

그럼 다음 구역인 "area-view"에 대해 알아보겠습니다.

 

 

역시 메인 구역답게 많은 하위 구역을 가지고 있습니다.

 

  1. <s_article_rep>
  2. <s_article_protected> : 개별 보호 글 페이지
  3. <s_page_rep>
  4. <s_notice_rep> : 개별 공지사항 페이지
  5. <s_tag> : 개별 태그 페이지
  6. <s_local> : 개별 위치 로그 페이지
  7. <s_guest> : 개별 방명록 페이지
  8. <s_paging>

 

 

총 8개 구역입니다. 

 

옆에 주석이 있는 구역은 무엇을 위한 곳인지 쉽게 파악이 됩니다.

 

우리가 필요한 곳은 개별 보호 글도 아니고, 개별 공지사항도 아니고, 개별 위치 로그도 아니고, 개별 방명록도 아닙니다.

 

마지막에 있는 <s_paging>은 글이 많을 때 1,2,3.... 9 페이지를 뜻하는 거 같은데 우리한테는 이것도 필요 없습니다.

 

그럼 우리는 <s_article_rep> 구역과 <s_page_rep> 구역만 살펴보겠습니다.

 

먼저, <s_article_rep> 태그 안입니다.

 

 

<s_article_rep> 태그 안에는 <s_permalink_article_rep> 한 개의 태그밖에 없습니다.

 

이 <s_permalink_article_rep> 태그 안에는 세 구역이 있는데 첫 번째 구역은 주석에 쓰여있는 데로 이미지가 없는 경우의 헤더를 나타내고 있어 넘어가도록 하겠습니다.

 

3번째 구역도 주석으로 보면 "article-footer"입니다.

 

이곳은 글이 끝나고 그 밑에 태그 모음, 관련 글 목록, 댓글 쓰기 같은 공간입니다.

 

그래서 이 3번째 구역도 넘어가도록 하겠습니다.

 

중요한 곳은 2번째 구역인 "에디터 영역"인 "article-view" 구역입니다.

 

 

위 그림에서 볼 수 있듯이 여기가 글의 본문이 나열되는 곳입니다.

 

728x170

 

 

안녕하세요?

 

티스토리 블로그 사용자입니다.

 

티스토리 블로그는 네이버 블로그보다 좀 더 사용자 친화적이며, 잘 설계된 정적 사이트 제너레이터라고 볼 수 있습니다.

 

정적 사이트 제너레이터 즉, Static Site Generator의 종류는 많습니다.

 

Node 쪽에는 GhostJS가 유명하고, Golang 쪽에서는 Hugo 가 유명하고, C++ 및 기타 언어로도 많은 종류가 있습니다.

 

본인은 GhostJS 를 라즈베리파이에 한번 설치해서 블로그 운영 기초를 한번 배웠었는데요.

 

아래 링크를 참조하시면 정적 사이트 제너레이터가 어떻게 작동하는지 이해하실 수 있을 겁니다.

 

https://cpro95.tistory.com/2

 

라즈베리파이에 고스트 블로그 설치하기

라즈베리파이에 고스트(GhostJS) 블로그 설치하기 - 1편 유명 포털의 블로그 시스템을 이용하기 보다 직접 만들고 싶다는 마음때문에 React로 이것 저것 만들어 봤는데요 그중에 NextJS, GatsbyJS, Navi 등

cpro95.tistory.com

https://cpro95.tistory.com/5

 

라즈베리파이에 고스트(GhostJS) 블로그 설치하기 - 2편

지난 시간에 이어 고스트 블로그 설치를 계속해 보겠습니다. 1편에서는 설치후 실행까지 살펴보았는데 이제는 본격적으로 사용하는 방법에 대해 알아보겠습니다. 테마 설정하기 기본 테마보다

cpro95.tistory.com

 

서론이 조금 길었는데요.

 

티스토리는 무슨 언어로 만들었지는 모르지만 나름 사용자가 커스터마이징 할 수 있게 여러 편의 사항을 제공합니다.

 

그중 제일 좋은 점은 HTML 파일을 직접 편집할 수 있게 해 주죠.

 

생각해 보면 정말 좋은 기능입니다. HTML 파일을 직접 편집할 수 있다면 구글 애널리틱스나 구글 애드센스 등 여러 플러그인을 본인 입맛에 맞게 편집할 수 있어 그 효과가 대단합니다.

 

네이버 블로그가 구글 애드센스가 안 되는 이유가 바로 이 때문입니다.

 

그럼 티스토리 HTML 파일을 편집해야 하는데 상당히 복잡하게 되어 있습니다.

 

이번 글에서는 티스토리 HTML 파일의 구조를 단계별로 분석하여 좀 더 이해하기 쉽게 풀어보도록 하겠습니다.

 

사전 지식인 HTML 마크업 랭귀지를 조금은 알고 있다고 전제하겠습니다.

 

먼저 HTML 파일의 전체적인 구조는 아래와 같습니다.

<html>

	<head>
    	<!-- 헤더부분 -->
	</head>

	<body>
    	<!-- 바디부분 -->
	</body>

</html>

<html></html> 이란 태그로 전체를 감싸고 있습니다.

 

그 안에 <head></head> 태그와 <body></body> 태그가 있습니다.

 

<head></head> 태그 안에는 html 파일에 필요한 각종 정보를 나열합니다.

 

예를 들어, 이 html 파일의 제목(title)이나 검색엔진이 찾을 수 있는 각종 메타(meta) 정보, html 파일의 스타일을 지정하는 CSS 파일 등 시스템적인 역할을 <head></head> 태그 안에서 해결합니다.

 

<body></body> 태그가 우리의 글 내용이 들어가는 공간입니다.

 

우리는 <head></head> 부분보다 <body></body> 부분에 집중하면서 티스토리 정적 사이트 제너레이터의 작동 방식에 대해 알아볼 예정입니다.

 

<body></body> 태그 안에는 아래 그림과 같이 크게 세 개의 중요한 부분으로 나뉘어 있습니다.

 

<body></body> 태그의 시작에서 보듯이 <body id="tt-body-page" class=class=".....처럼 id와 class라고 있는데 지금은 무시하고 전체적인 구조만 보겠습니다.

 

<body> 안에 일단 <s_t3>라는 태그가 있습니다. 이 <s_t3>라는 태그는 뭐하는 태그인지 모르지만 <body> 태그 전체를 감싸는 걸로 봐서 티스토리 버전 3의 코드 같습니다.

 

일단 모든 코드가 <s_t3> 안에 위치하기 때문에 이 코드는 무시해도 됩니다.

 

그럼 이 <s_t3> 안에는 뭐가 있나요?

 

위 그림에서 보듯이 <div> 태그가 있으며 이 <div> 태그가 전체를 커버하고 있습니다.

 

그래서 이 태그도 무시해도 됩니다.

 

그럼 이 <div> 태그 안에는 뭐가 있나요?

 

바로 전체적인 세 개의 구조인 <header>, <div>, <footer>가 있습니다.

 

말 그대로 티스토리 홈페이지에서 헤더 역할을 하는 <header> 태그, 푸터역할(화면 맨 아래에 표시되는 거)을 하는 <footer> 태그, 그리고 가운데에 있는 <div> 태그가 있습니다.

 

HTML 마크업 랭귀지에서는 본문을 세 가지로 나누는 걸 권장합니다.

 

<header> <main> <footer> 태그가 그것인데요, 티스토리는 <main> 태그를 안 쓰고 블록을 나타내는 가장 일반적인 <div> 태그를 썼습니다.

 

<main> 태그를 안 쓸 거면 <header> 나 <footer> 도 <div> 태그로 쓸 것이지 약간 통일성이 없네요.

 

하지만 프로그래머 마음입니다. <div>를 쓰나 <header> <main> <footer>를 쓰나 결과는 동일하거든요, 단지 HTML 코드를 분석할 때 용이할 수 있을 뿐입니다.

 

<div> 태그 위아래로 이 표시가 보이시죠?

 

이 표시는 카카오 광고입니다. 광고는 헤더 다음, 푸터 전에 표시되는 게 구조적으로 가장 좋기 때문입니다.

 

 

첫 번째, HEADER tag

 

그럼 전체적으로 3가지 구조를 봤기 때문에 일단 첫번째 구역인 <header></header> 태그에 대해 좀 더 알아보겠습니다.

 

 

일단 <header> 태그에는 두 개의 <div> 구역이 있습니다.

 

첫 번째 <div> 태그에는 class 만 있고 내용이 없습니다. 보통 이런 경우 이 구역의 스타일을 조정하기 위해 사용하는 방식일 수 있습니다.

 

실제 class 내용을 봐도 "line-bottom display-none"입니다.

 

라인 아래쪽이라고 알리면서 디스플레이하지 말라는 뜻입니다.

 

즉 보이지는 않는다는 얘기죠. 스타일을 위한 <div> 니까 다음 <div>로 넘어가겠습니다.

 

두 번째 <div> 구역은 class 가 inner-header입니다. 그리고 이 <div> 구역이 전부입니다.

 

 

즉, <header> 내용은 이 <div> 안에 다 있다는 얘기죠.

 

그럼 이 <div>를 좀 더 파헤쳐 보겠습니다.

 

위 그림에서 처럼 "inner-header" <div> 안에는 또 두 개의 <div> 구역이 있습니다.

 

한 개는 "box-header"라는 <div>와 "area-align"이라는 <div>가 있습니다.

 

"box-header" <div>를 분석해 봅시다.

 

 

html 코드를 보면 홈페이지의 타이틀 로고와 타이틀을 표시하고 있으며,

 

마지막으로는 서치바(PC 화면일 경우)를 위한 코드가 있습니다.

 

여기는 쉽게 이해도 되고 우리가 여기서 고칠 게 없기 때문에 이런 거다라고 넘어가겠습니다.

 

두 번째, "area-align" <div> 구역을 보겠습니다.

 

 

총 4개의 구역으로 나누어져 있습니다.

 

첫 번째는 "header slogun title"입니다.

 

쉬운 말로 "머리말 슬로건 타이틀"입니다.

 

슬로건 영어 철자가 잘 못 됐네요.

 

slogan 이 맞는 철자 같습니다. ㅎㅎ

 

두 번째는 "area-gnb"입니다. 이 곳은 티스토리 화면에서 카테고리를 보여주는 곳입니다.

 

 

제 티스토리 블로그를 기준으로 첫 화면에 카테고리를 쭉 나열할 수 있는데 "area-gnb"는 이 역할을 합니다.

 

실제 "area-gnb"에는 <nav> 태그가 있어서 카테고리를 쭉 나열하고 있습니다.

 

세 번째는 <button> 태그입니다. 이게 뭐하는지는 좀 더 알아보겠습니다.

 

지금은 어떤 역할인지 모르겠네요.

 

네 번째는 "header banner image"입니다.

 

쉬운 말로 "머리말 배너 이미지"를 위한 공간입니다.

 

우리가 블로그 속성에서 배너 이미지를 설정하면 이곳에서 처리한다는 뜻입니다.

 

이제 전체적으로 <header> <div id="container"> <footer> 태그 3개 중 <header> 태그가 끝났습니다.

 

 

 

 

 

두 번째, 컨테이너 DIV

 

다음으로 가장 중요한 <div id="container"> 태그 안을 살펴보겠습니다.

 

 

ㅎㅎ, 드디어 나왔습니다.

 

<main> 태그 말입니다.

 

제가 위에서 <main> 태그를 왜 안 썼는지 궁금했었는데 <div> 태그 안에 <main> 태그를 썼군요.

 

약간 특이한 케이스입니다.

 

일단 <main> 태그 안을 다시 분석해 보겠습니다.

 

 

<main> 태그 안에는 두 개의 <div> 태그가 있습니다.

 

첫 번째는 "area-main"이고 두 번째는 "area-aside"입니다.

 

이름으로 유추해 보면 "area-main"은 말 그대로 글이 표시되는 main 구역이고,

 

"area-aside"는 사이드바를 위한 구역인 거 같습니다. 실제로도 그렇고요.

 

우리가 스킨을 고를 때 왼쪽이나 오른쪽 사이드바를 선택하면 위의 <aside> 태그 안에 있는 내용이 그 사이드바에 나타난다고 볼 수 있습니다.

 

일단 "area-main"을 좀 더 살펴보겠습니다.

 

 

또 세 개의 구역으로 나누어져 있네요.

 

첫 번째는 "area-common", "카테고리, 검색 리스트"라고 주석이 달려 있습니다.

 

두 번째는 "area-view", "뷰페이지 및 기본 영역"이라고 주석이 달려 있습니다.

 

세 번째는 "s_cover_group", "커버 리스트"라고 주석이 달려 있습니다.

 

먼저 "area-common" <div> 태그를 살펴보겠습니다.

 

 

 

이 구역은 우리가 블로그에서 검색할 때 나오는 화면에 대한 코드입니다.

 

아마도 <s_list></s_list>라고 하는 게 "search list"의 약자 같습니다.

 

<s_list_rep></s_list_rep> 구역에서 검색 결과를 나타내 주고 있고,

 

<s_list_empty></s_list_empty> 구역에서 검색 결과가 없을 때 결과를 나타내 주고 있습니다.

 

저는 개인적으로 <s_list_empty></s_list_empty> 안에 구글 애드센스 광고를 넣었습니다.

 

왜냐하면 검색 결과가 없다는 표시가 너무 휑해서 빈 공간이 많더라고요.

 

이럴 때 광고를 넣기가 좋다고 판단했습니다.

 

그럼 다음 구역인 "area-view"에 대해 알아보겠습니다.

 

 

역시 메인 구역답게 많은 하위 구역을 가지고 있습니다.

 

  1. <s_article_rep>
  2. <s_article_protected> : 개별 보호 글 페이지
  3. <s_page_rep>
  4. <s_notice_rep> : 개별 공지사항 페이지
  5. <s_tag> : 개별 태그 페이지
  6. <s_local> : 개별 위치 로그 페이지
  7. <s_guest> : 개별 방명록 페이지
  8. <s_paging>

 

 

총 8개 구역입니다. 

 

옆에 주석이 있는 구역은 무엇을 위한 곳인지 쉽게 파악이 됩니다.

 

우리가 필요한 곳은 개별 보호 글도 아니고, 개별 공지사항도 아니고, 개별 위치 로그도 아니고, 개별 방명록도 아닙니다.

 

마지막에 있는 <s_paging>은 글이 많을 때 1,2,3.... 9 페이지를 뜻하는 거 같은데 우리한테는 이것도 필요 없습니다.

 

그럼 우리는 <s_article_rep> 구역과 <s_page_rep> 구역만 살펴보겠습니다.

 

먼저, <s_article_rep> 태그 안입니다.

 

 

<s_article_rep> 태그 안에는 <s_permalink_article_rep> 한 개의 태그밖에 없습니다.

 

이 <s_permalink_article_rep> 태그 안에는 세 구역이 있는데 첫 번째 구역은 주석에 쓰여있는 데로 이미지가 없는 경우의 헤더를 나타내고 있어 넘어가도록 하겠습니다.

 

3번째 구역도 주석으로 보면 "article-footer"입니다.

 

이곳은 글이 끝나고 그 밑에 태그 모음, 관련 글 목록, 댓글 쓰기 같은 공간입니다.

 

그래서 이 3번째 구역도 넘어가도록 하겠습니다.

 

중요한 곳은 2번째 구역인 "에디터 영역"인 "article-view" 구역입니다.

 

 

위 그림에서 볼 수 있듯이 여기가 글의 본문이 나열되는 곳입니다.

 

이 코드가 글의 본문을 나타내는 코드입니다.

 

그런데 이 코드 앞뒤로 구글 애드센스 코드가 보입니다.

 

이 코드는 원래는 없지만 본인의 경우 항상 글의 시작과 끝에 광고를 표시하기 위해 사각형 디스플레이 방식의 구글 광고 코드를 여기에 삽입했습니다.

 

참고 바랍니다.

 

그럼 다음 구역인 <s_page_rep>에 대해 알아보겠습니다.

 

죄송하지만 <s_page_rep>에 대해서는 도저히 어느 곳인지 모르겠습니다.

 

일단 패스하도록 하겠습니다.

 

그럼 마지막 구역인 <s_paging>에 대해 알아보겠습니다.

 

 

역시나 글이 많을 때 나타나는 1,2,3.... 9 같은 페이징 코드입니다. 넘어가도록 하겠습니다.

 

일단 여기서 우리는 "area-view" 영역을 모두 살펴보았습니다.

 

다음 영역은 바로 <s_cover_group> 태그가 있는 곳입니다.

 

 

<s_cover_group> 태그가 있는 곳은 바로 스킨 편집에 있는 홈 설정에서 최신 글이 아닌 커버 방식을 선택했을 때 나타나는 곳입니다.

 

홈 설정을 커버 방식으로 선택하면 스킨의 양식에 따라 커버에서 지정한 목록이 나타나는데 그 방식에는 현재 사용 중인 스킨에 따라서 그 모양 새가 바뀝니다.

 

포스터 방식인가, 썸네일 방식인가, 텍스트 방식인가 등 여러 가지 방식으로 나옵니다. 위 그림에서 볼 수 있듯이 주석에 type-poster 나 type-text 등등으로 유추해 볼 수 있습니다.

 

저는 오디세이 스킨을 쓰는데 위 그림에서 볼 수 있듯이 <s_cover name="thumbnail"></s_cover> 태그가 오디세이 스킨을 담당합니다.

 

일단 제 블로그 기준으로 설명드리겠습니다. <s_cover name="thumbnail"> 태그를 열어서 자세히 살펴보겠습니다.

 

 

 

두 개의 <div> 태그가 있습니다.

 

하나는 "box-cover-title"이고, 다른 하나는 "box-article"입니다.

 

"box-cover-title"은 홈 화면의 커버 타이틀을 나타내고 있습니다.

 

저 같은 경우 <h2> 태그를 한 개 주석처리했는데 class가 "title-cover"인 스타일입니다.

 

<h2> 태그 치고 너무 글자가 작아 아예 이 코드는 주석 처리하고 class가 없는 즉 스타일이 없는 <h2> 태그를 넣었습니다.

 

두 번째 "box-article" 구역은 구글 애드센스 광고가 보이고 마지막에 <s_cover_item> 태그가 보입니다.

 

즉, 홈 화면 커버 목록에서 첫 번째에 구글 광고가 나오게 하고 그 밑에 해당 카테고리의 목록이 나오게 하는 방식입니다.

 

그럼, <s_cover_item>에 대해 알아보겠습니다.

 

 

커버 목록은 기본적으로 제목, 요약글, 그림 썸네일 이렇게 표시되는데 저는 위 그림처럼 깔끔하게 보이기 위해 요약글과 썸네일이 보이는 코드는 주석처리했습니다.

 

그래서 제 홈 화면 커버 목록이 다음처럼 보이는 겁니다.

 

좀 더 깔끔하지 않습니까?

 

첫 화면이라 좀 깔끔하고 빠른 로딩을 생각해서 수정한 겁니다.

 

여러분들도 원하는 스타일로 <s_cover_item> 태그 내에서 바꾸시면 됩니다.

 

이제 세 번째 <footer> 태그만 남았는데요.

 

<footer> 태그는 살펴보시면 쉽게 이해할 수 있어 건너뛰겠습니다.

 

이상으로 티스토리 HTML 스킨 편집하기에 대해 알아보았습니다.

 

이글이 티스토리 블로그 운영에 많은 도움이 되셨으면 합니다.

 

그리드형
이 코드가 글의 본문을 나타내는 코드입니다.

 

그런데 이 코드 앞뒤로 구글 애드센스 코드가 보입니다.

 

이 코드는 원래는 없지만 본인의 경우 항상 글의 시작과 끝에 광고를 표시하기 위해 사각형 디스플레이 방식의 구글 광고 코드를 여기에 삽입했습니다.

 

참고 바랍니다.

 

그럼 다음 구역인 <s_page_rep>에 대해 알아보겠습니다.

 

죄송하지만 <s_page_rep>에 대해서는 도저히 어느 곳인지 모르겠습니다.

 

일단 패스하도록 하겠습니다.

 

그럼 마지막 구역인 <s_paging>에 대해 알아보겠습니다.

 

 

역시나 글이 많을 때 나타나는 1,2,3.... 9 같은 페이징 코드입니다. 넘어가도록 하겠습니다.

 

일단 여기서 우리는 "area-view" 영역을 모두 살펴보았습니다.

 

다음 영역은 바로 <s_cover_group> 태그가 있는 곳입니다.

 

 

<s_cover_group> 태그가 있는 곳은 바로 스킨 편집에 있는 홈 설정에서 최신 글이 아닌 커버 방식을 선택했을 때 나타나는 곳입니다.

 

홈 설정을 커버 방식으로 선택하면 스킨의 양식에 따라 커버에서 지정한 목록이 나타나는데 그 방식에는 현재 사용 중인 스킨에 따라서 그 모양 새가 바뀝니다.

 

포스터 방식인가, 썸네일 방식인가, 텍스트 방식인가 등 여러 가지 방식으로 나옵니다. 위 그림에서 볼 수 있듯이 주석에 type-poster 나 type-text 등등으로 유추해 볼 수 있습니다.

 

저는 오디세이 스킨을 쓰는데 위 그림에서 볼 수 있듯이 <s_cover name="thumbnail"></s_cover> 태그가 오디세이 스킨을 담당합니다.

 

일단 제 블로그 기준으로 설명드리겠습니다. <s_cover name="thumbnail"> 태그를 열어서 자세히 살펴보겠습니다.

 

 

 

두 개의 <div> 태그가 있습니다.

 

하나는 "box-cover-title"이고, 다른 하나는 "box-article"입니다.

 

"box-cover-title"은 홈 화면의 커버 타이틀을 나타내고 있습니다.

 

저 같은 경우 <h2> 태그를 한 개 주석처리했는데 class가 "title-cover"인 스타일입니다.

 

<h2> 태그 치고 너무 글자가 작아 아예 이 코드는 주석 처리하고 class가 없는 즉 스타일이 없는 <h2> 태그를 넣었습니다.

 

두 번째 "box-article" 구역은 구글 애드센스 광고가 보이고 마지막에 <s_cover_item> 태그가 보입니다.

 

즉, 홈 화면 커버 목록에서 첫 번째에 구글 광고가 나오게 하고 그 밑에 해당 카테고리의 목록이 나오게 하는 방식입니다.

 

그럼, <s_cover_item>에 대해 알아보겠습니다.

 

 

커버 목록은 기본적으로 제목, 요약글, 그림 썸네일 이렇게 표시되는데 저는 위 그림처럼 깔끔하게 보이기 위해 요약글과 썸네일이 보이는 코드는 주석처리했습니다.

 

그래서 제 홈 화면 커버 목록이 다음처럼 보이는 겁니다.

 

좀 더 깔끔하지 않습니까?

 

첫 화면이라 좀 깔끔하고 빠른 로딩을 생각해서 수정한 겁니다.

 

여러분들도 원하는 스타일로 <s_cover_item> 태그 내에서 바꾸시면 됩니다.

 

이제 세 번째 <footer> 태그만 남았는데요.

 

<footer> 태그는 살펴보시면 쉽게 이해할 수 있어 건너뛰겠습니다.

 

이상으로 티스토리 HTML 스킨 편집하기에 대해 알아보았습니다.

 

이글이 티스토리 블로그 운영에 많은 도움이 되셨으면 합니다.

 

그리드형

'코딩 > Javascript' 카테고리의 다른 글

[JS-중급편-OOP] 11. 부울린(Boolean) 타입과 비교연산자(===, !==)  (0) 2021.01.02
티스토리 코드 하이라이트(highlight.js) 적용하기  (0) 2020.12.31
[JS-중급편-OOP] 10.클래스  (0) 2020.12.30
[JS-중급편-OOP] 9.빌트인 객체 확장  (0) 2020.12.27
[JS-중급편-OOP] 8.객체 완전 분석(Objects)  (0) 2020.12.26

'코딩/Javascript'의 다른글

  • 현재글티스토리 HTML 스킨 편집하기

관련글

댓글

티스토리툴바