티스토리 글상자 서식으로 쉽게 만들고 사용하기

티스토리에 글을 작성하면서 더 예쁘고 깔끔하게 글상자를 만들어 글을 작성하신 분을 많이 보실 수 있습니다. 필자도 깔끔하고 중요한 정보의 경우 글상자를 사용해서 글을 작성하기도 합니다.

 

하지만 티스토리를 막 시작하셨거나 글만 작성하시던 분인 경우 글상자를 어떻게 만들어야 하는지 매번 HTML 코드를 복사 붙여넣기 하여 만드시는 등 복잡하게 사용을 하고 계십니다.

 

오늘은 이런 분을 위해 기본적인 글상자 코드를 가지고 변형하여 본인인 사용할 글상자를 만들고 이를 서식에 등록하여 간단하게 글을 작성할 때 사용하는 방법에 대해 알아보도록 하겠습니다.

 

 

티스토리 글상자 예시

용준이의 취미공간

 

용준이의 취미공간

 

용준이의 취미공간

 

용준이의 취미공간

'티스토리 글상자'라고 한다면 위의 4가지 모양을 가장 많이 보셨을 것이라고 생각됩니다. 이 4가지가 티스토리에서 만들 수 있는 기본적인 글상자의 형식이라고 보시면 됩니다. 가장 위에부터 글상자 테두리가 없는 상자, 글상자 테두리가 점선인 상자, 글상자 테두리가 있는 상자, 글상자 테두리가 2개인 상자라고 보시면 됩니다.

 

 

티스토리 글상자 템플릿 다운로드

글상자 테두리(무).txt

0.00MB

글상자 테두리(점선).txt

0.00MB

글상자 테두리(실선).txt

0.00MB

글상자 테두리(실선 2겹).txt

0.00MB

위에서 티스토리 글상자 종류에 따라 템플릿을 다운로드 할 수 있습니다. 기본적인 색상은 회색으로 되어 있으며 배경색과 기타 여러 사항은 아래를 참고하여 수정하여 사용하시면 됩니다.

 

 

글상자 HTML 코딩 변경으로 구성 변경하기

위에서 다운로드 한 파일을 열어 HTML 코드를 복사 후 티스토리 신에디터에서 HTML창으로 변환 후 붙여 넣기를 하면 다음과 같은 화면을 보게 됩니다.

 

위 이미지는 4가지의 글상자가 표현되어 있는 상태의 HTML창이고 각 코드를 조금씩만 변경해주면 나에게 어울리는 글상자로 만들 수가 있습니다.

 

 

색상 변경하기(backgrand-color)

HTML 창에서 backgrand-color 옆에 #으로 시작하는 6자리 코드를 변경하면 글상자의 색상을 변경할 수 있습니다. 위 이미는 파란색인데 색상에 대한 코드 예시는 아래에서 몇 가지 알려드리도록 하겠습니다. 배경색은 backgrand-color 옆에 코드를 변경하면 되고 마지막 부분에 #으로 시작하는 부분이 또 있습니다.

 

이 코드는 글상자 테두리를 지정하는 색상으로 선의 종류에 따라 solid, dashed, double로 적혀 있습니다. 위와 마찬가지로 #으로 시작하는 6자리를 변경해주면 글상자의 테두리 색상을 변경할 수 있습니다.

 

#으로 시작하는 색상 코드는 HTML 색상 코드로 인터넷에 검색하여 RGB코드를 HTML 색상코드로 변경하는 등에 과정을 거쳐 본인이 원하는 색으로 정할 수 있습니다.

HTML 색상코드 샘플.txt

0.00MB

빨간색 배경 : ffc9c9
빨간색 테두리 : ff0000
주황색 배경 : fedec7
주황색 테두리 : fe8943
노란색 배경 : fefeb8
노란색 테두리 : f3c534
초록색 배경 : e7fdb5
초록색 테두리 : 9fd331
파란색 배경 : dbe8fb
파란색 테두리 : 79a5e4
보라색 배경 : f2c1fc
보라색 테두리 : d200ff
회색 배경(기본값) : eeeeee
회색 테두리(기본값) : c1c1c1

위를 보면 색상에 따라 배경색과 테두리 색상 HTML 코드를 알려드렸습니다. 혹시나 모를 상황을 위해 파일도 첨부해놓았으므로 색상 코드를 잘 모르시는 분은 참고하셔서 글상자의 색상을 변경하시면 될 것 같습니다. 

 

 

내부 여백 변경하기(Padding)

HTML 코드에서 'padding'라는 항목에 숫자를 높이면 글상자 내부에 여백이 매우 커지게 됩니다. 대부분은 기본 값인 10px로 놓고 사용해도 무방합니다.

 

 

테두리 두께 변경하기(border)

border 항목의 숫자를 올리게 되면 가장 첫 번째 상자인 테두리가 없는 글상자를 제외하고 다음과 같이 글상자 테두리의 두께가 두꺼워지게 됩니다. 기본 값은 1px와 3px로 되어 있는데 상황에 맞게 조절하여 사용하시면 됩니다.

 

 

서식으로 글상자 쉽게 사용하기

HTML 모드에서 본인이 원하는 색상과 디자인으로 커스텀한 글상자를 매번 글을 작성할 때마다 메모장에 저장되어 있는 코드를 불러오기가 어렵습니다.

 

글상자를 쉽게 사용하기 위해서는 콘텐츠 > 서식 관리 > 서식 쓰기를 클릭합니다.

그리고 서식을 보면 2번째 줄에 '용준이의 취미생활'이라고 되어 있는 부분을 지워 본인이 사용할 글상자로 만듭니다.

이렇게 되면 글상자에 아무런 내용 없이 글상자만 만들어지고 이상태에서 서식을 저장한 후 글 작성 시 필요할 때마다 서식을 불러오게 되면 저장된 서식이 자동으로 에디터에 불러와져서 쉽게 글상자를 사용해 글을 작성할 수 있습니다. 이렇게 티스토리 글상자를 만들어 서식에 저장하여 글을 작성할 때 쉽게 글상자를 사용하는 방법에 대해 알아보았습니다. 글상자를 통해 기본적인 모양부터 응용하여 소제목 등에 사용할 수 있기 때문에 활용성이 매우 높습니다.

이제 글상자를 사용하여 중요하거나 강조해야 하는 부분을 표현하는데 많은 도움이 될 것 같습니다. 이상 글을 마치겠습니다.

 

 

추천 콘텐츠