티스토리 본문 배경 꾸미기

티스토리에서 글을 쓰다 보면 중요한 내용은 보기 좋게 꾸며서 눈에 띄게 하고 싶습니다. 그래서 글씨를 굵게 하거나 밑줄을 그을 수 있지만, 그렇게 하기에는 내용이 많을 때는 아래와 같이 중요 문구 영역의 배경색을 바꾸거나 테두리를 그어서 돋보이게 할 수 있습니다. 예를 들어 아래의 내용을 보시죠.

#include <stdio.h>
#include <string.h>

int main( void)
{
   char *str = "badayak.com";
  
   printf( "%d\n", strlen( str));

   return 0;
}

이렇게 내용을 보여 주기 보다는 아래처럼 꾸미면 더 보기가 좋아집니다.

#include <stdio.h>
#include <string.h>

int main( void)
{
   char *str = "badayak.com";
  
   printf( "%d\n", strlen( str));

   return 0;
}

본문의 배경색을 바꾸고 테두리를 그렸을 뿐인데 확실히 구별이 되어서 보기가 좋죠?

티스토리 스킨 편집 - CSS 추가

▲ 티스토리 관리자>>스킨 편집을 선택합니다.

▲ 위 내용을 복사해서 CSS 맨 아래 빈 공간에 붙여 넣기를 한 후 적용 버튼을 누릅니다. 새로 추가한 CSS의 이름은 jwlib입니다. 이름이 꼭 jwlib일 필요는 없습니다. 적당한 이름으로 바꾸셔도 됩니다. 이제 준비는 끝났습니다. 꾸미고 싶은 문단에 추가한 jwlib를 지정해 주면 됩니다.

▲ 티스토리 편집기에서 글을 작성하시다가 꾸미고 싶은 단락이 있으면 HTML모드로 변경한 후에 <p> 중요 내용 </p>를 <p class="jwlib"> 중요 내용</p> 처럼 <p>에 class="jwlib"를 삽입해 줍니다. 예를 들어 보겠습니다.

<p>무궁화 꽃이 피었습니다. </p>

이 문장을 새로 추가한 jwlib를 적용한다면

<p class="jwlib">무궁화 꽃이 피었습니다. </p>

로 입력합니다. <p>에 class="jwlib"를 삽입한 것이죠. 그러면 아래와 같이 출력됩니다.

무궁화 꽃이 피었습니다.

어떻게 이해가 되시나요? 이렇게 한번 스킨 편집의 CSS에 jwlib 같은 꾸미기를 넣으면 이후로 모든 글 쓰기에서 사용할 수 있습니다.

다양한 문단에 CSS 적용

<p></p>뿐만 아니라 <div></div>에서도 적용할 수 있고 공백 문자가 많은 프로그램 소스 코드를 작성할 때 자주 사용하는 <pre></pre> 구문도 같은 방법으로 적용할 수 있습니다.

<pre>#include <stdio.h>
#include <string.h>

int main( void){
    char *ptr = strdup( "badayak.com");
    printf( "%s\n", ptr);
}</pre>

위에서 사용한 <pre>의 경우도 style="jwlib"를 삽입해 줍니다.

<pre class="jwlib">#include <stdio.h>
#include <string.h>

int main( void){
    char *ptr = strdup( "badayak.com");
    printf( "%s\n", ptr);
}</pre>

이렇게 jwlib를 적용하면 아래 처럼 출력됩니다.

#include <stdio.h>
#include <string.h>

int main( void){
    char *ptr = strdup( "badayak.com");
    printf( "%s\n", ptr);
}

배경이 어두운 CSS

▲ 배경이 짙은 CSS입니다. 이름을 faterm으로 작성했습니다.

<p>]$ ./a.out<br>
apple with apple = 0<br>
apple with    apple = 1   -> 공백이 있는 문자열이 더 길지만 공백문자가 'a'보다 작음<br>
apple with banana = -1</p>

▲ 이 문장에 아래처럼 faterm을 적용합니다.

<p class="faterm">]$ ./a.out<br>
apple with apple = 0<br>
apple with    apple = 1   -> 공백이 있는 문자열이 더 길지만 공백문자가 'a'보다 작음<br>
apple with banana = -1</p>

이렇게 지정하면 아래와 같이 출력됩니다.

]$ ./a.out
apple with apple = 0
apple with apple = 1 -> 공백이 있는 문자열이 더 길지만 공백문자가 'a'보다 작음
apple with banana = -1

CSS를 이용하면 class="jwlib", class="faterm" 삽입만으로 글을 꾸밀 수 있고 CSS에서 jwlib와 faterm의 꾸미는 내용을 수정하면 모든 글의 디자인이 한 번에 바뀌어서 더욱 편합니다.