티스토리 글 상자 서식 만들기

안녕하세요.

 

이번 포스팅에서는 HTML로 글 상자 서식을 만들어보겠습니다.

 

티스토리 글 상자 서식 만들기

 

블로그 글을 쓰다 보면 강조하고 싶은 부분이나 구분하고 싶은 부분에 글 상자를 사용하는 경우가 있습니다.

 

글 상자 예시

 

위와 같이 글 상자를 만들 경우 티스토리 글쓰기에서 쉽고 빠르게 글 상자를 추가하는 방법을 알아보겠습니다. 티스토리 글쓰기의 서식 기능을 활용하여 글 상자 HTML 코드를 저장해두는 방식입니다.

티스토리 서식 관리 창

우선 티스토리 관리창에서 콘텐츠 -> 서식 관리로 들어갑니다. 우측 상단의 서식 쓰기를 클릭합니다.

티스토리 서식 편집 창

원하는 서식 제목을 입력하고 HTML 편집창을 열어줍니다.

 

<div class="txc-textbox" style="background-color: white; padding: 10px; border: 5px solid blue;">

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

</div>

 

HTML 편집창에 위의 서식 값들을 입력하고 다시 기본 모드로 돌아옵니다. 위 서식 값은 배경은 white, 상자와 글 여백은 10px, 테두리 두께는 5px, 테두리 색상은 파란색이라는 의미입니다.

 

글 상자 서식 확인

그럼 이제 위의 그림처럼 파란색의 글 상자가 보이게 됩니다. 우측 하단의 완료를 클릭하여 해당 서식을 저장합니다.

 

새로운 글쓰기 서식 선택

 

이제 새로운 글쓰기를 시작하고 편집 메뉴의 서식을 클릭합니다.

 

글 상자 서식 선택

 

목록에 보이는 방금 만든 글 상자 서식을 클릭합니다.

 

글 상자 서식 추가 완료

 

글 상자 서식이 본문에 자리 잡게 되고 이제 필요한 내용들을 글 상자 안에 써주기만 하면 됩니다. 색상이나 두께를 변경할 경우에는 글쓰기의 HTML 편집창으로 들어가셔서 해당 서식 값을 변경해 주면 됩니다.

 

방문해 주셔서 감사합니다.

 

행복한 하루 보내세요 ^^