[티스토리] 소제목 꾸미기 및 서식

 

1. 티스토리 소제목 꾸미기 방법

티스토리 내의 소제목을 꾸미는 방법은 크게 두 방식으로 나뉜다. 

• CSS 활용: 모든 게시글의 소제목 서식을 변경하는 것 
• HTML 활용: 특정 게시글의 소제목을 변경하는 방법 

2. CSS를 이용하여 소제목을 꾸밀 경우

티스토리 내에서 CSS를 이용하여 h태그들(즉, 소제목들)을 꾸밀 경우 아래의 과정을 거친다;

• HTML 탭에서 본문 상위 class 정보 찾기 
• 해당 class에 대응되는 CSS 내용 수정

1) HTML 탭에서 본문 상위 class 정보 찾기

티스토리 내의 CSS를 이용하여 소제목을 꾸밀 경우, 먼저 관리 페이지의 스킨 편집에서 HTML 탭에서 "##_article_rep_desc_##"를 감싸고잇는 class 명을 먼저 확인해야 한다.   

- .entry-content

2) CSS 내용 수정

어떤 클래스인지 확인을 한 후, CSS 탭으로 이동한다. 그 후, 검색 기능을 사용하여 클래스의 위치를 확인 후, 자신이 원하는 서식에 대응되는 항목들을 수정한다.   

 

기본적인 소제목과 관련된 CSS의 내용물들의 설명은 아래와 같다. 

.post-content h2{
    margin:            /* */
    padding:           /*여백 */
    font-size:         /*폰트 크기*/
    font-weiht:        /* */
    line-height:       /* */
    word-break:        /* */
    word-wrap:         /* */ 
    color:             /*h2 태그의 글자 색상*/ 
    border-left:       /* */ 
    border-top:        /*h2 태그의 상단 라인*/
    border-bottom:     /*h2 태그의 하단 라인*/
    background:        /*h2 태그의 배경색 */
}

 

3. HTML을 이용하여 소제목을 꾸밀 경우

만일 CSS를 이용하지 않는다면, 매번 소제목의 서식을 HTML을 이용하여 직접 변경해야 한다. 하지만, 티스토리에서는 이 과정을 조금 더 간편하게 할 수 있다. 만일, 이미 자신이 원하는 서식이 있고, 향후 그 서식을 지속적으로 사용을 할 예정이라면, 티스토리 내에 그 서식을 저장하여 원할 때마다 불러서 사용을 할 수 있다. 이를 위해선 아래의 과정을 따라야 한다. 

• 블로그 관리홈 > 콘텐츠 > 서식관리 > 서식 쓰기로 이동
• 필요한 서식을 저장 
• 티스토리 글쓰기 > 글쓰기 메뉴 상단 점 3개 클릭 > 서식 클릭 > 필요한 서식 불러오기 

 

Appendix: 

항목	설명
margin	• 박스 외부 여백 영역 • margin: num1 num2;     - num 1: 박스 외부 여백 상, 하     - num 2: 박스 외부 여백 좌, 우
padding	• 정의된 경계로부터의 거리  • 여백 조정  • padding: num1 num2 num3 num4;      - 박스 내부의 여백: 좌/상/우/하 ex) padding 15px 10px 15px 10px;
letter-spacing	• 자간 (글자간의 거리)
font-family	• 글꼴
color	• 글자 색상
border	• 전체 테두리 선  • border: 선굵기px 선스타일 #색상;   ex) border: 5px solid #000000;
border-radius;	• 박스의 둥근 모서리: 상/하/좌/우;
border-width	• 왼쪽 선의 두께
border-left-color	• 왼쪽 선의 색상
line-height	• 왼쪽 선의 높이
border-top	• ex) border-top: 5px solid #070707;    - 5픽셀의 두께로 #070707색을 사용하여 해당 태그의 상단라인을 표시
border-bottom-color	• 아래선의 색

 

Appendix  2: 여러 소제목 서식들

a. 서식들을 설명하기 위해 태그는 <p> 태그를 이용하였다. 소제목 태그인 <h2>~<h4>에 대한 서식으로 변경하려면, <p>와 </p> 부분만 자신이 원하는 태그로 변경을 하면 된다. 
b. 아래의 서식들이 정상적으로 작동하는지 확인하기 위해 w3schools을 이용할 수 있다. 
c. 서식과 관련해서 참조한 티스토리 블로그는 다음과 같다. 
  • https://bookdrifter.tistory.com/134     
  • https://galam.tistory.com/

서식 1: 두꺼운 밑줄

<p>
    <span style="border-bottom:12px solid #dcf1fb; padding:0 0 0 0.2em; font-weight: bold;"> 
    서식 1: 두꺼운 밑줄
    </span>
</p>

 

서식 2: 두꺼운 밑줄 + 길게

<p style="
    border-bottom:12px solid #dcf1fb; 
    padding:0 0 0 0.2em; 
    font-weight: bold;"> 
    서식 2: 두꺼운 밑줄 + 길게 
</p>

# NOTE: 서식 1과의 차이는 style의 위치가 어디에 있느냐이다. 즉, 서식 1에서는 스타일이 적용되는 구간이 span에 의해 결정되는 반면, 서식 2에서는 스타일이 전체 <p> 태그에 적용이 되기 때문에 밑줄이 길게 적용이 된다. 

 

서식 3: 단순 밑줄

<p><span style="
    border-bottom:1px solid #688FF4; 
    padding:0.1em; 
    font-weight: bold;"> 
    서식 3: 단순 밑줄
    </span>
</p>

 

서식 4: 포인트 및 밑줄 + 길게

<p  style="
    border-left: 10px solid #688FF4;
    border-bottom:1px solid #688FF4; 
    padding:0.5em; 
    font-weight: bold;"> 
    서식 4: 포인트 및 밑줄 + 길게
</p>

 

서식 5: 포인트와 배경색

<p><span style="
    background: #F9F7F6; 
    border-left: 0.5em solid #688FF4;
    padding:0.5em; 
    font-weight: bold;"> 
    서식 5: 포인트와 배경색
    </span>
</p>

 

서식 6: 포인트 + 배경색 + 둥근 모서리

<p><span style="
    background: #F9F7D6; 
    border-radius: 0 15px 15px 0;
    border-left: 0.5em solid #688FF4;
    padding:0.5em; 
    font-weight: bold;"> 
    서식 6: 포인트 + 배경색 + 둥근 모서리
    </span>
</p>

 

서식 7: 버튼 스타일

<p><span style="
    background: #F9F7D6; 
    border-radius: 5em;
    padding:0.5em 1em;
    box-shadow: 1px 2px 10px rgba(0,0,0,0.2);
    margin-left: 5px;
    font-weight: bold;"
    data-ke-size="size16"> 
    서식 7: 버튼 스타일
    </span>
</p>

 

서식 8: 두꺼운 박스 + 길게

<p style="
    border: 5px solid #c9c9c9;
    border-radius: 2px;
    padding:0.5em 1em; 
    font-weight: bold;"> 
    서식 8: 두꺼운 박스 + 길게
</p>

 

서식 9: 말풍선

<p><span style="
    border-radius: 15px 15px 15px 0px;
    border: 3px solid #FFAD5B;
    padding:0.5em 1em; 
    color: #ff800;
    font-weight: bold;"> 
    서식 9: 말풍선
    </span>
</p>

 

서식 10: 포인트 + 박스 + 길게

<p style="
   padding: 0.5em 1em 0.4em 0.5em; 
   margin: 0.5em 0em; 
   color: #37421d; 
   border-left: 10px solid #000000; 
   border-bottom: 2px #000000 solid; 
   border-right: 2px #000000 solid; 
   border-top: 2px #000000 solid; 
   font-weight: bold;">
   서식 10: 포인트 + 박스 + 길게
</p>

 

서식 11: 말풍선 + 테두리 + 배경색 + 길게 + 그림자

<p style="
    background-color: #fcf3d4; 
    padding: 0.4em 1em 0.3em 0.5em; 
    margin: 0.5em 0em; 
    border: 5px solid #f6d258; 
    border-radius: 15px 15px 15px 0px; 
    font-weight: bold; 
    box-shadow: 5px 5px 5px #999;">
    서식 11: 말풍선 + 테두리 + 배경색 + 길게 + 그림자
</p>

 

 

 

서식 12: 책갈피 모양 소제목

<div style="
   position: relative; 
   background-color: #ffffff; 
   padding: 0px 25px 0px 60px; 
   border: 1px solid #d9d9d9;">
   <div style="
      position: absolute; 
      top: -1px; 
      left: 14px; 
      width: 30px; 
      height: 47px; 
      background-color: #bd59d4;"> &nbsp;
   </div>
   <div style="
      position: absolute; 
      top: 17px; 
      left: 14px; 
      width: 0; 
      height: 0; 
      border: 15px solid; 
      border-color: transparent transparent #ffffff transparent;">&nbsp;
   </div>
   <p style="font-size:25px; font-weight: bold;"> 
      서식 12: 책갈피 모양 소제목
   </p>
</div>

 

서식 13: 형광펜 밑줄 + 길게

<p style="
   padding: 2px 5px; 
   font-weight: bold; 
   background: linear-gradient(to top, #d9f033 40%, transparent 40%); 
   display: inline-block;">
   서식 13: 형광펜 밑줄 + 길게
</p>