티스토리 텍스트 상자(글 상자) 만들기

티스토리를 예쁘게 꾸미기 위해서는 HTML 관련 지식이 조금은 필요합니다. HTML 자체는 컴퓨터 언어 중에 제일 쉬운 편에 속하지만 하나씩 배워서 티스토리에 적용하기에는 시간이 걸립니다. 그래서 다른 사람이 만들어 놓은 것을 가지고 티스토리를 꾸미고는 합니다. 오늘 알아볼 것은 텍스트 상자입니다.

 

티스토리 텍스트 상자 (글 상자) 만드는 법

텍스트 상자가 뭔지 모르는 분들이 있습니다. 그냥 글만 쓰면 된다고 생각을 하지만 실제로 글은 디자인이 중요합니다. 잘 쓴 글이라고 하여도 디자인과 폰트가 별로이면 이해하기 어렵습니다. 반대로 못쓴 글이라고 하여도 디자인과 폰트가 좋으면 쉽게 이해가 갑니다.

이럴때 사용하는 게 텍스트 상자입니다.

 

텍스트 상자는 여러 방면에서 사용할 수 있습니다. 프로그램 사용하는 방법을 알려주고자 할 때 다운로드 하는 방법을 본문에 넣으면 사용하는 방법을 알고 싶어서 온 사람들을 놓치게 됩니다. 그래서 보통 다운로드 하는 방법은 텍스트 상자에 넣어서 포스팅 안에서 다른 공간으로 분리를 시킵니다.

 

어찌 되었든 텍스트 상자는 사용하기가 생각보다 쉽습니다.

<div class="txc-textbox" style="box-sizing: border-box; margin: 0px; background-color: #fffdb9; border: #6799FF 6px solid; padding: 6px;"><span style="color: #000000;">텍스트 상자</span>
<p style="font-size: 16px; text-align: left;" data-ke-size="size16"></p>

여기 있는 코드를 복사해서 "기본모드∨"을 누르고 HTML로 가서 붙여 넣기 하면 됩니다.

붙여넣기를 하고 기본모드로 바꿔주면 본문에 이렇게 뜨게 됩니다.

 

티스토리를 이쁘게 꾸미기 위해서 HTML을 조금은 알려드려야 될 것 같습니다.

●div class="txc-textbox" 이름입니다. 글 상자 또는 텍스트 상자를 컴퓨터가 인식하는 이름입니다.

 

●"style="에는 6가지가 있습니다.

• box-sizing;
• margin;
• background-color;
• border;
• padding;

▶box-sizing; 박스 크기를 어느 것을 기준으로 정하는지 설정하는 코드입니다. 여기서는 'border-box'를 사용했습니다.

▶margin; 밖의 여백을 이야기하는 코드입니다. 텍스트 상자에서 margin은 텍스트 상자 밖의 여백입니다.

margin; 49px입니다.

상자 주변에 글자들이 붕 뜬것을 알 수 있습니다. 

▶background-color; 배경색입니다. 

지금 배경색은 #730051입니다.

▶border;은 테두리 색과 두께, 선의 종류를 조절할 수 있습니다. 테두리는 안에서 밖으로 향합니다.

테두리 색은 #14ff1f입니다. 테두리 크기는 50px입니다. 선은 solid(실선)입니다.

테두리 색은 #22207d입니다. 테두리 크기는 20px입니다. 선은 dotted(원형 점선)입니다.

테두리 색은 #ffb156입니다. 테두리 크기는 10px입니다. 선은 dashed(점선)입니다.

테두리 색은 #824e11입니다. 테두리 크기는 7px입니다. 선은 double(겹선)입니다.

이렇게 일반적인 선들이 있고 이중 색상 선들이 4개 있습니다.

groove

ridge

inset

outset

이런 느낌으로 사용하시면 됩니다.

▶padding;는 margin;과 반대 버전입니다.

padding; 49px입니다.

 

이렇게 HTML을 들어가서 바꿔야 하는 것들이고 나머지는 티스토리 글쓰기 기본모드에서 변경이 가능합니다.