loading

친절한효자손 취미생활

한동안 티스토리 기본 강좌를 너무 소홀히 한 것 같다. 그래서 다시한번 초심으로 돌아가, 내가 처음 티스토리를 접했을 때 많은 난관에 부딫친 그 기억을 다시금 되살려 이제 막 시작하신 분들을 위한 콘텐츠를 많이 늘려나갈 것이다. 하나하나 글을 잘 살펴보시고 그대로 따라하시면 분명 쉽게 티스토리 사용법을 익힐 수 있을 것 이다.


우선 글쓰기 부분에서 글상자라는 기능에 대한 설명이다. 말 그대로 어떤 특정 문구를 강조하고자 할 때, 백그라운드에 태그를 부여하여 해당 부분만 눈에 확 띄도록 하는 기능이다. 링크에 넣어도 되며 다양하게 활용이 가능하고 정해진 색상 외에 다른 색으로도 얼마든지 커스텀 할 수 있다.


친절한효자손의 경우는 그냥 기본 프리셋으로만 사용하고 있다. 원래 과한것은 안 하니만 못한 법! 그러니 적당히 가독성을 해치지 않는 선에서 끝내는게 가장 아름다운 것이며, 블로그의 전체 분위기를 해치지 않는다고 굳게 믿고 있다. 한번 어찌 사용하는지 알아보자.


구형 글쓰기 에디터의 경우

친절한효자손 취미생활 블로그의 글 하단에는 늘 이런 디자인의 문구가 들어가 있다. (초창기 글에는 없음) 바로 이 기능이 글상자라고 하는 기능이다. 사용법은 다음과 같다.


티스토리 글쓰기 부분에 보시면 위와같은 UI를 볼 수 있다. 이것이 바로 글상자 아이콘이다. 먼저 글상자를 적용할 텍스트를 블록 지정하고 한번 백그라운드를 지정해보자.


현재 테스트 입니다! 라는 문구를 넣어봤다. 여기에 한번 적용시켜보도록 하겠다.


글상자 버튼을 누르면 이런 화면이 나온다. 간단 선택 부분과 직접 선택 부분 두 가지로 나뉜다. 간단선택은 말 그대로 이미 짜여진 프리셋이며, 직접선택 부분은 커스텀 할 수 있는 기능이다. 제일 위에는 테두리가 없는 컨샙이며 그 아래로 내려가면서 태두리의 변화가 달라진다. 하나씩 한번 눌러 적용시켜보면 어떤 차이인지 금방 알 수 있다.


직접 선택은 선 스타일과 선 굵기, 선 색, 배경색까지 모두 커스텀 할 수 있다.


이런식으로 적용된다. 여기에서 한번 더 같은 디자인으로 적용하면 더욱 두꺼워진다.


이렇게 말이다.


그리고 텍스트를 꾸미면 이런식으로 완성이다.


신형 글쓰기 에디터의 경우

신형 글쓰기에서는 글상자박스 기능이 없다. 이런 경우는 수동으로 코딩을 해서 완성시켜야 한다. 친효스킨의 경우는 글상자 박스를 대처할 div 태그가 준비되어 있다. 해당 내용은 아래의 글을 정독하여 습득해 보도록 하자.



뭐든 실험정신의 결과로 과감하게 도전해보자. 그래야 훌륭한 콘텐츠가 탄생하는 법이다. 다양하게 나만의 방식대로 응용해서 글상자를 활용해보자. 다만 너무 남용하지는 말자. 가독성을 떨어뜨릴 우려가 있다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 비밀댓글입니다
    2018.03.10 03:00
    • 안녕하세요, 답글이 늦었습니다. 이건 이 스킨에만 있는 기능이에요. 유료스킨이에요.
      2018.03.15 22:24 신고
  2. 안녕하세요 친절한 효자손님. 위에 '티스토리 글상자란 무엇이며 어떻게 사용하는가?' 이부분 글을소개할때 쓰는 저런 칸은 어떻게 넣을수 있는건가요??
    2020.11.30 17:58 신고
    • 안녕하세요. 스킨에서 지원하는 스타일입니다. 글쓰기시 제목1~3으로 설정하면 되긴 하는데 현재 친효스킨의 경우에는 저렇게 나타나는 것입니다.
      2020.11.30 19:28 신고
  3. 안녕하세요. 새해 복 많이 받으세요

    "친효애드온! DIV 그라데이션 박스로 텍스트 강조하기" 처럼 어떻게 만들 수 있는건가요?
    2021.01.01 07:17 신고
    • 안녕하세요. 친효애드온 카테고리에 있는 "본문 중간 수동 링크" 글들을 참고하시면 됩니다.
      2021.01.01 07:37 신고