티스토리 글 꾸미기 팁 - 글 배경 바꾸는 방법

2020. 3. 12. 08:00 IT·인터넷/블로그

티스토리 본문 배경 꾸미기

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

#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의 꾸미는 내용을 수정하면 모든 글의 디자인이 한 번에 바뀌어서 더욱 편합니다.

이 댓글을 비밀 댓글로

티스토리 로그인이 풀리면 여기를 클릭하세요.

  1. 이전 댓글 더보기
  2. 좋은 꿀팁 감사드립니다^^
  3. 이거 정말 귱금했던 내용인데 시간 날때 정독하면서 따라해보게요 ㅎ ㅎ 감사합니다^^
  4. 참고할만한 내용이네요
    잘 보고 갑니다.. ^^
  5. 크 알려주셨네용 감사합니당
  6. 좋은 정보 감사합니다 ~
    잘보고 갑니다 ^^
  7. 티스토리 참 어렵네요 ㅠㅠ
    이렇게 꾸미는건 매번 글 쓸 때마다 설정해줘야 하는건가요?
    • CSS 추가는 한 번만 하면 되고요, 글을 작성하시는 본문 중에 꾸미고 싶은 부분만
      class="jwlib" 이런식으로 넉어 주기만 하면 됩니다. ^^
    • 내용을 좀 어렵게 쓴 것 같아서 다시 작성했습니다.
      이해가 안 되는 부분이 있으면 언제든지 말씀 주세요.
  8. 좋은 정보 잘 보고 가요~~
  9. 오늘도 좋은 포스팅 감사합니다!^^
    • 방쌤
    • 2020.03.12 11:01
    저도 공부해서 좀 꾸미고 싶은데,,
    그게 잘 안되네요.^^ㅎㅎ
  10. 나중에 스킨 수정할때
    소중한 자료가 될 것 같습니다.
    좋은 글 고맙습니다. 😊👍
  11. 이거 예전 에디터에서는 비슷한 기능이 기본 제공되었는데 새 에디터에서 이것 저것 많이 사라졌죠... -_-
    버그나 좀 고쳐주길 바랄 뿐입니다.
    • 아직도 버그가 많지요. 가끔 맞춤법 검사를 실행하다가
      저장 버튼이 사라지면 참 난감합니다. ^^
  12. 좋은 정보인데 ... 컴맹이라ㅠㅠ 무슨말인지 이해를 못했네여ㅠㅠ 좋은 포스팅 감사해여
    • 꿍스뿡이
    • 2020.03.12 17:17
    화면이 중간중간 안나오네요 ㅠㅠ
    흠..지금으로선 적용을 시켜봐야지만 알 수 있을듯 하네요 ㅠㅠ
    • 시작과 종료가 일치하지 않으면 발생할 수 있습니다.

      예를 들어 <p> ... </p> 이렇게 일치해야 하는데,
      오타로 <p> ... <p> 처롬 /p의 종료가 없거나
      </p> 가 없는 경우 HTML 전체 코드가 꼬일 수 있습니다.
  13. 와우 대박!!!! 저도 바다야크님처럼 블로그 고수가 되고싶어요!! 혹시 해당 글에 대한 관련 책 추천 가능하실까요??? 그리고 관리자 승인 댓글로 하면 시간지나면 자동으로 댓글이 노출되나요??? 전 블로그엔 의미없는 댓글들이 난무해서..ㅠ;
    • 아우~ 고수는요, 전혀 아닙니다. 웹 검색으로 겨우 겨우 꾸려가고 있습니다.
      댓글의 승인은 관리자가 꼭 허락해야 합니다.
      시간이 지나도 승인하지 않으면 계속 승인 대기 상태가 됩니다.
      엉뚱한 댓글 때문에 사용하고 있는데 아주 좋습니다. ^^
    • 답변 감사합니다 저도 관리자 권한을 고려해봐야겠네여 다만 매번 승인을 해야하는게 매우 번거로워 보여서 고민이긴 하네요. 오늘 하루 마무리 잘하세여^^
    • 네, 즐거운 하루 되세요. ^^
  14. 복잡한 내용을 깔끔하게 정리해주셨네요ㅎㅎ
  15. 잘 보고 공감하고 갑니다^^
    편안한 저녁시간 되세요~
  16. 오 아주 유용해요. 적극 활용을 해봐야겠습니다.
  17. 이해 하기 쉽게 포스팅 해주셔서 감사합니다^^저도 따라 해봐야겠네요 ㅎㅎ
    • 말씀 감사합니다. 다시 읽어 보고 내용이 부족해서
      다시 수정하기를 여러 번 했습니다. ^^;
  18. 으... 어려운 코드네요. ㅋㅋㅋ
    php코드도 보이고 css 코드도 보이고... ㅋㅋㅋ
  19. 저는 얼마전 가독성이 떨어지는 것같아서 CSS에서 글씨 사이즈를 정해놨더니 편하더군요
    잘 몰라서 200개나 되는 글 다 일일히 고칠뻔 했네요 ㅋㅋㅋ
    저는 이 방법은 몰라서 그냥 박스코드 서식으로 만들어놓고 필요할때 꺼내쓰고 있어요
error: Content is protected !!