티스토리는 서식이라는 기능이 있습니다. 글을 작성할 때 반복적으로 사용하는 내용은 서식을 활용해서 수고로움을 덜을 수 있습니다. 우선 가장 많이 사용하는 서식부터 애드센스 서식 사용까지 한번 정리해보는 시간을 가져보도록 하겠습니다.
제목을 나타내는 제목 서식
위의 제목을 보면 왼쪽, 아래쪽이 선이 굵게 있기 때문에 눈에 잘 보인다는 장점이 있습니다. 현재 많은 블로그에서 사용하는 제목 서식입니다. 제목 서식을 만들기 위해서 서식을 설정하는 부분부터 보도록 하겠습니다. 먼저 티스토리 관리페이지로 갑니다.
<p></p><h2 style=" color: #424242; border-left:10px solid #424242; border-bottom: 3px solid #424242; padding: 5px; padding-left: 20px; ">제목서식</h2><p></p>
위의 서식을 그대로 복사하셔서 사용하시면 됩니다. 위의 서식을 하나씩 살펴보도록 하겠습니다.
제목 서식 색상 선택
<p></p><h2 style=" color:
#424242; border-left:10px solid #424242; border-bottom: 3px solid #424242; padding: 5px; padding-left: 20px; ">제목서식</h2><p></p>
첫번째 #424242는 글씨 색상 입니다. 다른 색상을 원하시면 변경하시면 됩니다.
<p></p><h2 style=" color:
#424242; border-left:10px solid
#424242; border-bottom: 3px solid #424242; padding: 5px; padding-left: 20px; ">제목서식</h2><p></p>
두번째 #424242는 왼쪽 테두리 색상입니다.
<p></p><h2 style=" color: #424242; border-left:10px solid #424242; border-bottom: 3px solid
#424242; padding: 5px; padding-left: 20px; ">제목서식</h2><p></p>
세번째 #424242는 아래쪽 테두리 색상입니다.
제목 서식 테두리 선택
다음은 제목 서식 테두리 부분입니다.
<p></p><h2 style=" color: #424242;
border-left:10px solid #424242; border-bottom: 3px solid #424242; padding: 5px; padding-left: 20px; ">제목서식</h2><p></p>
border-lefe: 10px 이 부분은 왼쪽 테두리 두께 입니다. 숫자를 올리면 두꺼워지고 숫자는 낮추면 두께가 얇아집니다.
<p></p><h2 style=" color: #424242; border-left:10px solid #424242;
border-bottom: 3px solid #424242; padding: 5px; padding-left: 20px; ">제목서식</h2><p></p>
border-bottom: 3px 이 부분은 아래쪽 테두리 두께 입니다.
만약 왼쪽, 바닥을 포함해 오른쪽, 위쪽도 설정하고 싶다면 다음 처럼 추가하면 됩니다.
<p></p><h2 style=" color: #424242; border-left:10px solid #424242; border-bottom: 3px solid #424242;
border-top: 3px solid #424242; border-right: 3px solid #424242; padding: 5px; padding-left: 20px; ">제목서식</h2><p></p>
만약 굵은 선이 아니라 실선을 선택하고 싶다면 solid 부분은 변경하시면 됩니다.
<p></p><h2 style=" color: #424242; border-left:10px
dashed #424242; border-bottom: 3px
dashed #424242; padding: 5px; padding-left: 20px; ">제목서식</h2><p></p>
다음으로 박스를 설정할 수 있는 서식을 살펴보도록 하겠습니다.
티스토리 박스 서식 추천
먼저 어떤 모양인지를 보도록 하겠습니다.
위와 같은 박스 입니다. 박스안에 글을 적으면 조금 더 눈에 들어오기 때문에 잘 이용하면 멋진 컨텐츠가 될 것 같습니다. 보통은 중요내용을 적거나 관련글을 적을 때 사용합니다.
소스는 다음과 같습니다.
<div class="txc-textbox" style="border-style: solid; border-width: 1px; border-color: rgb(219, 232, 251); background-color: rgb(219, 232, 251); padding: 10px;"><p></p></div><p><br /></p>
여기서도 소스 변경을 하시면 됩니다. 색상은 rgb 값으로 되어 있습니다. 선 색과 백그라운드 색상을 선택할 수 있습니다. 편하신대로 변경하시면 됩니다.
각각의 서식을 저장하고 필요할 때 불러서 사용하면 됩니다.
티스토리 서식 만들기 부터 적용까지 프로세스
티스토리 서식을 어디에서 만들고 어떻게 불러오는지 그림으로 살펴보도록 하겠습니다.
티스토리 서식 공유 추천
먼저 관리페이지에서 서식관리를 클릭합니다. 클릭 후에는 아래와 같은 화면을 볼 수 있습니다.
티스토리 서식 공유 추천
서식쓰기를 누르시면 아래와 같은 화면을 볼 수 있습니다. 서식은 html이기 때문에 html에 체크를 하셔야 합니다.
티스토리 서식 공유 추천
html을 클릭하시면 아래와 같은 화면을 볼 수 있습니다. 이 곳에 위에서 원하는 코드를 넣고 발행을 하면 됩니다.
발행을 누르면 서식페이지에 글목록 처럼 저장이 되어 있습니다.
티스토리 서식 공유 추천
이제 서식은 다 만들어졌습니다.
이제 글쓰기 화면으로 가면 됩니다.
글쓰기 화면에서 보면 우측 하단에 서식이라는 부분이 있습니다. 이 부분을 클릭하면 만들어 놓은 서식이 나옵니다.
원하는 서식을 클릭하면 글에 자동으로 삽입이 됩니다.
티스토리 서식 공유 추천
글쓰기 화면 우측 하단 서식 클릭
티스토리 서식 공유 추천
원하는 서식을 선택하면 자동으로 삽입이 됩니다.
오늘은 티스토리 서식에 대해서 살펴보았습니다. 궁금한 사항은 댓글로 문의주시면 됩니다.
좋아요, 댓글은 큰 힘이 됩니다.
많은 분들에게 도움이 되길 바랍니다.
티스토리 서식 공유 추천
