티스토리 본문 배경 꾸미기
티스토리에서 글을 쓰다 보면 중요한 내용은 보기 좋게 꾸며서 눈에 띄게 하고 싶습니다. 그래서 글씨를 굵게 하거나 밑줄을 그을 수 있지만, 그렇게 하기에는 내용이 많을 때는 아래와 같이 중요 문구 영역의 배경색을 바꾸거나 테두리를 그어서 돋보이게 할 수 있습니다. 예를 들어 아래의 내용을 보시죠.
#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의 꾸미는 내용을 수정하면 모든 글의 디자인이 한 번에 바뀌어서 더욱 편합니다.
'IT·인터넷 > 블로그' 카테고리의 다른 글
티스토리 ads.txt 해결 방법? 아직은 없습니다. (41) | 2020.03.27 |
---|---|
티스토리 모바일 앱 2.0 업데이트에 바라는 내용 (10) | 2020.01.24 |
2017 바다야크 블로그 결산 (2) | 2018.01.10 |