친절한효자손 취미생활

가끔 티스토리 본문을 작성하다가 꼭 중요한 내용을 작성할때가 있습니다. 가령 주의사항이 대표적인 텍스트라고 할 수 있습니다. 가독성을 올리고 좀 더 강조하고자 할 때, 티스토리에 있는 글상자 기능을 활용해서 작성하곤 합니다. 하지만 너무 밋밋한데다 많은 사람들이 쉽게 사용하는 방법입니다. 그래서 저만의 친효팁박스를 만들어 봤습니다. 아래는 그 예시 입니다.


TIP

한줄일 경우에도 텍스트가 세로 상태로 중앙정렬이 됩니다.


TIP

계속 텍스트를 작성하셔도 세로 중앙정렬이 지속됩니다. 텍스트를 채워갈수록 중앙에서부터 계속해서 세로 중앙정렬이 진행됩니다.


TIP

계속 텍스트를 작성하셔도 세로 중앙정렬이 지속됩니다. 텍스트를 채워갈수록 중앙에서부터 계속해서 세로 중앙정렬이 진행됩니다. 이렇게 계속해서 본문을 채워나가더라도 TIP 박스는 텍스트만큼 늘어납니다. 또한 안쪽 여백도 계속해서 유지가 되면서 오른쪽의 TIP 동그라미 아이콘도 박스의 세로 중앙정렬이 자동으로 진행됩니다. 이거 만든다고 하루종일 고생했네요. 결론적으로는 훌륭하게 잘 적용되어서 뿌듯합니다.
주의사항이 하나 있습니다. 안쪽에 <p> 태그를 두 개 이상 사용하시면 안 됩니다. 줄바꿈을 하시려면 <br> 태그를 사용해 주시기 바랍니다.


이렇게 사용되어집니다. TIP 아이콘에 애니메이션 효과를 줬기 때문에 훨씬 더 눈에 띕니다. 강조가 되지요. 나머지 텍스트들 또한 간격을 제 기준에서 보기좋게 유지하고 있어서 가독성이 나쁘지 않습니다.



HTML 세팅

먼저, 티스토리 관리자로 들어오셔서 스킨편집의 html 카테고리부터 들어갑니다. 아래의 주소를 먼저 추가해 주시고, 이미 등록되어 있으시면 이 과정은 생략합니다.





이 주소는 아래의 첨부파일에서도 다운로드 받으셔서 사용 가능합니다.


폰트어썸.txt


이 주소를 html의 <head> 태그 안쪽의 <title>[##_page_title_##]</title> 아래쪽에 붙여넣기 해주시면 됩니다.



CSS 세팅

다음은 스타일 세팅 입니다. 아래의 첨부파일을 다운로드 받아주시면 됩니다.


rgy-TIP박스(CSS).txt


첨부파일을 열어보시면 CSS 코드가 있습니다. 마찬가지로 자신의 스킨편집으로 들어가 CSS 카테고리에 붙여넣기 해주시면 됩니다. 위치는 빈 공간을 만드셔서 적절히 붙여주시면 됩니다. 저는 보통 위에 붙여넣는 편 입니다. @font-face 라고 되어 있는 부분 아래에 빈 줄을 만들어서 붙여넣기 하시면 됩니다.


HTML 사용하기

이제 세팅은 다 끝났으니, 본격적으로 사용할 일만 남았습니다. 아래의 첨부파일을 사용해서 작업합니다. 다운받아 주세요.


rgy-TIP박스(HTML).txt


파일을 열어보시면 아래와 같은 코딩이 되어 있습니다.


TIP

이곳에 텍스트를 입력해 주세요.

보시면 "이곳에 텍스트를 입력해 주세요" 라고 하는 부분이 있습니다. 이 텍스트를 지우시고 팁박스안에 넣고자 하는 글씨를 입력하시면 됩니다. 다 입력하셨으면 전부 선택해서 복사합니다.




그리고 글을 작성하실 때, 원하는 위치에 커서를 맞춰놓으신다음 외부컨텐츠 메뉴를 눌러서 위처럼 소스입력란에 방금 복사한 html 코드를 붙여넣기 하시고 확인을 눌러주세요.




그러면 현재 티스토리 글 작성 화면에서는 이렇게 친효팁박스 적용 상태를 확인하실 수 있습니다. 글쓰기 모드에서는 이렇게 보여지고 미리보기를 눌러보시면 본문의 맨 위처럼 적용된 것을 확인하실 수 있습니다. 그리고 글쓰기 모드에서 텍스트 수정이 가능하며 여러가지 특수문자도 넣으셔도 됩니다. 이제 적절히 강조하고자 하는 내용에서는 친효팁박스를 사용하여 가독성을 올려보시기 바랍니다. 끝.


TIP

안내 :
본 태그 내용을 변경하셔서 사용하셔도 상관 없습니다. 하지만 주석 처리된 내용은 절대로 지우시면 안 됩니다.




알리익스프레스 할인

이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

  1. 2019.01.28 18:29

    비밀댓글입니다

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2019.01.29 00:24 신고

      안녕하세요, CSS에서 red 라고 되어 있는 부분을 모두 16진수 코드로 변경하시면 원하시는 색상으로 변경 됩니다.

  2. Favicon of https://bbingse.tistory.com 삥세 2019.04.25 17:14 신고

    서식형태로 저장해둘 수 있는건가요?

    아니면 매번 외부콘텐츠로 코드를 복붙해서 넣어야하는것인가용?

  3. Favicon of https://ilsi.tistory.com 님™ 2019.06.27 21:56 신고

    좋은 정보 감사드립니다. 알찬 내용이네요. 잘 사용하겠습니다.