포스팅 목차
티스토리 블로그를 이제 막 시작했다면 여러 가지 고민이 생기게 됩니다.
블로그에 포스팅을 하게 되는 이유는 내가 쓴 글을 누군가에게 도움을 주기 위한 것입니다.
도움이 되는 글은 누구나 쓸 수 있습니다.
하지만 같은 주제라도 블로그에 들어왔을때 읽기 어렵게 되어 있다면 그냥 나가버리는 경우가 생깁니다.
내 블로그를 방문한 사람들의 체류시간을 늘리기 위해서는 내용도 중요하지만 얼마만큼 가독성 있게 글을 구성했는지도 중요합니다.
체류시간을 늘리기 위해 소제목을 잘 꾸미고 문단을 잘 나누어 구성하시면 방문자에게 좋은 이미지를 심어줄 수 있습니다.
이 방식은 css 파일을 수정하여 본문 내용의 소제목 전체에 반영되도록 하는것이기 때문에 기존에 서식을 활용하여 글 포스팅시 서식까지 꾸며서 포스팅 하신 분들은 주의하셔서 사용하시기 바랍니다. 서식을 사용하지 않으셨던 분들은 기존 작성된 글까지 자동으로 소제목이 스타일되어 보여지게 됩니다.
지금부터 글을 쓰면 소제목이 자동으로 꾸며질 수 있도록 하는 방법에 대해 알아보겠습니다.
티스토리 블로그 소제목 형식
포스팅을 할때 소제목 + 본문, 소제목 + 본문... 의 형식으로 우리는 포스팅을 하게 됩니다.
이런 소제목은 html 태그에서 h1, h2, h3, h4, h5 형식의 h 태그를 통해 구성할 수 있습니다.
티스토리 포스팅시 제목 1, 제목 2, 제목 3의 소제목 구성
티스토리 내 블로그에서 보통은 h1은 포스팅의 제목이 될 것이고 본문의 소제목은 h2부터 적용하게 됩니다.
티스토리 포스팅시 제목 1, 제목 2, 제목 3은 실제로는 아래와 같이 서로 대응되니 참고하시기 바랍니다.
 |
제목1 : h2 태그 제목2 : h3 태그 제목3 : h4 태그 |
실제 포스팅 후 소제목 디자인이 적용되는 방법
실제로 포스팅 본문에서 위와 같이 적용 되었는지 살펴보겠습니다.
참고로 저는 자동으로 제목1, 제목 2, 제목 3 소제목에 따라 디자인이 자동으로 되도록 css 파일을 수정해 봤는데요.
css 수정 부분은 아래에서 다시 이야기하도록 하겠습니다.
지금은 어떤 원리로 되는지 알아 두시면 좋겠습니다.
| 티스토리 블로그 글쓰기 화면 |  |
| 글 작성 완료 후 실제 포스팅을 볼 때 본문에 보이는 화면 |  |
| 구성된 실제 html 태그 내용 - 보시는 바와 같이 h2 부터 구성하고 있습니다. - 글을 쓰시게 되면 자동으로 오른쪽 화면과 같이 변환되어 html 태그로 만들어지게 됩니다. - 이 껍데기인 h2, h3, h4 태그에 css를 통해 디자인을 입히는 방식입니다. |
 |
쉽게 따라 하는 소제목 디자인 자동으로 입히는 방법
1. 소제목 디자인 타입 A
위와 같은 디자인을 사용하시려면 아래와 같이 하시면 됩니다.
1) 관리 페이지의 스킨 편집에 HTML 탭에서 본문 상위 class 정보 알아보기
css 파일을 수정하기 전에 먼저 본문 내용( <##_article_rep_desc_##> )을 감싸고 있는 class 명을 알아야 합니다.
그래야 해당 class으로 감싸진 h2, h3, h4 태그의 디자인을 변경할 수 있습니다.
저는 고래 스킨 v4.1을 사용 중입니다.
고래 스킨은 아래와 같이 본문을 감싸고 있는 태그가 e-content, post-content 두 개입니다.
저는 둘 중의 하나로 선택하면 되는데 저는 post-content를 기준으로 css 파일을 편집하도록 하겠습니다.
( <##_article_rep_desc_##> ) 부분에 본문내용으로 치환이 됩니다.
이 본문 내용을 감싸고 있는 div 부분의 class를 확인하시면 됩니다.
2) 관리 페이지의 스킨 편집에 CSS 탭으로 이동하기
티스토리 관리자 화면에서 [스킨 편집]을 눌러 [CSS] 탭으로 이동합니다.
3) CSS 탭에 css style 내용 추가하기
우리가 html 탭에서 확인한 본문 내용을 감싸고 있는 class 명을 알아봤습니다.
해당 클래스 명을 기준으로 depth를 정의하여 h2, h3, h4을 디자인하시면 됩니다.
참고로 아무 곳이 넣어도 되긴 하지만 고래 스킨 v4.1을 사용하고 계신다면 ".post-content h1" 로 검색하여 그 바로 아래에 밑에 있는 태그를 붙여 넣어 주는데 나중에 수정하시기 편합니다.
이건 알면 좋은 내용인데 어려울 수도 있지만 css 접근방식에 대해 간략하게 알아보도록 하겠습니다.
[참고] CSS 접근 방식
class는 class 명 앞에 .(점) 이 붙습니다.
id는 앞에 #(샵)이 붙습니다.
class는 본문에 여러 번 나와도 되지만 id는 html 전체 페이지에 하나만 존재해야 합니다.
그래서 css 탭에 보시면
.sidebar_content => 이것은 sidebar_content라는 이름의 class이고 본문에서 여러 번 나와도 상관없으며 해당 class 있는 부분에 정의한 style을 입혀줍니다.
#post_title => post_title라는 이름의 id로 html 전체에 하나만 존재해야 합니다.
예를 들어 보겠습니다.
.sidebar_content p { font-color: #cccccc; } => 이건 html 전체 페이지 구조중에서 sidebar_content라는 이름으로 되어 있는 class 명을 모두 찾아 그 구조 아래 있는 p 태그에 font-color style을 입혀줍니다.
그래서 고래 스킨의 class 명을 예로 설명하자면 .post-content h2라고 하면 본문 내용을 감싸고 있는 post-content라는 class 명 안에 있는 h2태그 전체에 style을 입히라는 뜻이 됩니다.
#post_title span { font-weight: bold; } => 이건 html 전체 페이지 구조중에서
post_title라는 이름으로 되어 있는 id 명 하나를 찾아 그 구조 아래 있는 p 태그에 font-color style을 입혀줍니다.
위 내용은 어려우시면 넘어가셔도 됩니다.
중요한 건 아래 파일을 받으신 다음에 .post-content 부분은 위에 html 탭에서 확인한 본문을 감싸고 있는 class 명으로 바꿔주시면 됩니다.
저는 고래 스킨 v4.1 기준이기 때문에 고래 스킨을 사용하시는 분들은 파일 내용을 그대로 사용하셔도 됩니다.
/* 제목1 - 소제목 */
.post-content h2 {
margin: 20px 0 15px 0;
padding: 15px 10px 15px 10px;
font-size: 1.4rem !important;
font-weight: 700 !important;
line-height: 1.35;
word-break: normal;
word-wrap: break-word;
/* 제목1 글자 색상 */
color:#000;
/* 제목1 왼쪽 라인 */
border-left: none;
/* 제목1 상단 라인 */
border-top: 1px solid #070707;
/* 제목1 하단 라인 */
border-bottom: 1px solid #e9e9e9;
/* 제목1 배경색 */
background-color: #ffffff;
}
/* 제목2 - 소제목 */
.post-content h3 {
margin: 30px 0 15px 0;
padding: 10px 10px 10px 10px;
font-size: 1.2rem !important;
font-weight: 600 !important;
line-height: 1.35;
word-break: normal;
word-wrap: break-word;
color:#000;
/* 제목2 왼쪽 라인 */
border-left: 9px solid #010d7e;
/* 제목2 상단 라인 */
border-top: none;
/* 제목2 하단 라인 */
border-bottom: 1px solid #e9e9e9;
/* 제목2 배경색 */
background-color: #ffffff;
}
/* 제목3 - 소제목 */
.post-content h4 {
margin: 30px 0 15px 0;
padding: 5px 10px 5px 10px;
font-size: 1.1rem !important;
font-weight: 600 !important;
line-height: 1.35;
word-break: normal;
word-wrap: break-word;
color:#000;
/* 제목3 왼쪽 라인 */
border-left: 5px solid #858484;
/* 제목3 상단 라인 */
border-top: none;
/* 제목3 하단 라인 */
border-bottom: none;
/* 제목3 배경색 */
background-color: #fcfcfc;
}
아래의 파일을 다운로드하시면 위에 css 스타일 태그 내용이 있습니다.
위 파일 내용을 복사하여 바로 아래처럼 붙여 넣어 주시면 됩니다.
4) 적용된 소제목에 라인 색상 변경하는 방법
붙여 넣은 css내용에서 색상을 변경할 수 있습니다.
내용에 주석으로 어느 쪽 라인에 해당하는 태그인지 설명을 달아 두었습니다.
색상의 #앞에 사각형을 누르시면 색상 선택 팝업 창이 뜹니다.
그곳에서 원하시는 색상으로 수정할 수 있습니다.
또는 웹 색상표를 참고하셔서 코드를 넣어주시면 됩니다.
5) 적용된 소제목의 여백 또는 배경색 조정하는 방법
해당 css 파일 중에서 몇 가지만 수정하시면 소제목 안에 글자 여백 또는 배경 색상을 수정해 줄 수 있습니다.
바로 padding 이 여백 조정입니다.
padding은 px 단위로 4가지 숫자가 나오는데 순서대로 상단, 오른쪽, 하단, 왼쪽 순서로 쓰입니다.
background-color는 배경 색상을 지정할 수 있습니다.
2. 소제목 디자인 타입 B
위와 같이 스타일 되어 나옵니다. 앞에 왼쪽 bar를 소제목에 따라 굵기를 다르게 줘봤습니다.
적용방법은 디자인 타입 A 부분을 참조하시면 됩니다.
css 파일내용만 바뀌시면 됩니다.
/* 제목1 - 소제목 */
.post-content h2 {
margin: 20px 0 15px 0;
padding: 15px 10px 15px 10px;
font-size: 1.4rem !important;
font-weight: 700 !important;
line-height: 1.35;
word-break: normal;
word-wrap: break-word;
/* 제목1 글자 색상 */
color:#000;
/* 제목1 왼쪽 라인 */
border-left: 13px solid #010d7e;
/* 제목1 상단 라인 */
border-top: none;
/* 제목1 하단 라인 */
border-bottom: 1px solid #e9e9e9;
/* 제목1 배경색 */
background-color: #ffffff;
}
/* 제목2 - 소제목 */
.post-content h3 {
margin: 30px 0 15px 0;
padding: 10px 10px 10px 10px;
font-size: 1.2rem !important;
font-weight: 600 !important;
line-height: 1.35;
word-break: normal;
word-wrap: break-word;
color:#000;
/* 제목2 왼쪽 라인 */
border-left: 9px solid #010d7e;
/* 제목2 상단 라인 */
border-top: none;
/* 제목2 하단 라인 */
border-bottom: 1px solid #e9e9e9;
/* 제목2 배경색 */
background-color: #ffffff;
}
/* 제목3 - 소제목 */
.post-content h4 {
margin: 30px 0 15px 0;
padding: 5px 10px 5px 10px;
font-size: 1.1rem !important;
font-weight: 600 !important;
line-height: 1.35;
word-break: normal;
word-wrap: break-word;
color:#000;
/* 제목3 왼쪽 라인 */
border-left: 5px solid #858484;
/* 제목3 상단 라인 */
border-top: none;
/* 제목3 하단 라인 */
border-bottom: none;
/* 제목3 배경색 */
background-color: #fcfcfc;
}파일은 아래 다운로드하시면 됩니다.
3. 소제목 디자인 타입 C
위와 같이 스타일 되어 나옵니다. 앞에 왼쪽 bar를 소제목에 따라 굵기를 다르게 줘봤습니다.
적용방법은 디자인 타입 A 부분을 참조하시면 됩니다.
css 파일내용만 바뀌시면 됩니다.
/* 제목1 - 소제목 */
.post-content h2 {
margin: 20px 0 15px 0;
padding: 15px 10px 15px 10px;
font-size: 1.4rem !important;
font-weight: 700 !important;
line-height: 1.35;
word-break: normal;
word-wrap: break-word;
/* 제목1 글자 색상 */
color:#000;
/* 제목1 전체 라인 */
border: 4px solid #e2e2e2;
/* 제목1 배경색 */
background-color: #ffffff;
}
/* 제목2 - 소제목 */
.post-content h3 {
margin: 30px 0 15px 0;
padding: 10px 10px 10px 10px;
font-size: 1.2rem !important;
font-weight: 600 !important;
line-height: 1.35;
word-break: normal;
word-wrap: break-word;
color:#000;
/* 제목2 왼쪽 라인 */
border-left: 9px solid #585858;
/* 제목2 상단 라인 */
border-top: none;
/* 제목2 하단 라인 */
border-bottom: 1px solid #e9e9e9;
/* 제목2 배경색 */
background-color: #ffffff;
}
/* 제목3 - 소제목 */
.post-content h4 {
margin: 30px 0 15px 0;
padding: 5px 10px 5px 10px;
font-size: 1.1rem !important;
font-weight: 600 !important;
line-height: 1.35;
word-break: normal;
word-wrap: break-word;
color:#000;
/* 제목3 왼쪽 라인 */
border-left: 5px solid #858484;
/* 제목3 상단 라인 */
border-top: none;
/* 제목3 하단 라인 */
border-bottom: none;
/* 제목3 배경색 */
background-color: #fcfcfc;
}파일은 아래 다운로드하시면 됩니다.
글 작성 및 확인 방법
이제 css를 적용해봤으니 글 작성부터 어떻게 확인하는지 알아보도록 하겠습니다.
아래와 같이 소제목을 작성 후 미리보기를 하시면 디자인이 입혀진 것을 확인하실 수 있습니다.
아래와 같이 미리보기를 통해 확인하시면 됩니다.
마무리하며
티스토리 소제목에 디자인을 자동으로 입히는 방법에 대해 알아봤습니다.
처음 하시는 분들은 약간 어려운 내용일 수 있지만 조금만 수정해 보면서 적응하신다면 멋진 소제목을 만드실 수 있을 거라 생각합니다.
응용하셔서 더 멋진 스타일로 만드신다면 블로그 들어오신 방문자분들의 가독성과 첫인상을 좋게 남기실 수 있으실 것입니다.
도움이 되는 내용이었기를 바라면서 포스팅을 마무리합니다.
추가적으로 티스토리 자동으로 목차 만드는 방법에 대한 포스팅도 있으니 응용하셔서 멋진 목차도 자동을 만드시는데 도움이 되셨으면 좋겠습니다!
티스토리 포스팅 목차 자동으로 생성하기
티스토리 글을 작성할 때 우리는 대제목, 소제목 등으로 구분하여 글을 작성한다. 구글 seo를 위해서 목차를 만든다면 더 좋은 점수를 얻을 수 있을 것이다. 이러한 목차는 매번 수동으로 만들수
blog.psnote.co.kr
티스토리 분류 전체보기 제거하는 방법
티스토리를 시작하신 분들은 제공해 주는 스킨을 사용하고 글을 작성하게 됩니다. 내 블로그지만 html이나 css 같은 지식이 없다면 블로그를 내 마음에 맞는 형태로 바꾸기도 쉽지 않습니다. 오늘
blog.psnote.co.kr
bing 빙, zum 줌 검색 등록 방법
블로그를 개설하고 본인 포스팅이 노출되기 위해서 각 포털의 검색엔진에 등록하는 과정이 필요하다. 보통 google과 naver에 등록을 하지만 Bing 과 zum도 유입량을 늘리기 위해서 필요하다. 생소해
blog.psnote.co.kr
