[티스토리 필수 설정] 다양한 글상자 꾸미기

 

1. 개요

 

지난 포스팅에서는 다양한 제목 서식을 만들어서 적용하는 방법에 대해 알아보았습니다. 그럼 이번 포스팅에서는 다양한 글상자 서식을 만들고 적용하는 방법에 대해 알아보도록 하겠습니다. 먼저 서식 적용하는 방법에 대해 모르시는 분들은 아래 서식 적용에 관한 포스팅을 참고 부탁드립니다.

 

[티스토리 필수 설정] 서식 설정 및 적용

 

 

2. 다양한 글상자 서식 만들기

 

1. 글상자 - 회색, 테두리 없음

 

1. HTML 코드

<div class="txc-textbox" style="① background-color: #eeeeee; padding: 10px; border: 1px solid #eeeeee;">
<p data-ke-size="size16">1. 글상자 - 회색, 테두리 없음</p>
</div>

 

2. 변경 방법

① background-color: #eeeeee - 배경 색상 변경

 

2. 글상자 - 핑크, 한줄 테두리

 

1. HTML 코드

<div class="txc-textbox" style="① background-color: #ffecec; padding: 10px; ② border: 4px solid #ffcefe;">
<p data-ke-size="size16">2. 글상자 - 핑크, 한줄 테두리</p>
</div>

 

2. 변경 방법

① background-color: #ffecec - 배경 색상 변경

② border: 4px solid #ffcefe - 테두리 굵기, 색상변경

 

3. 글상자 - 블루, 두줄 테두리

 

1. HTML 코드

<div class="txc-textbox" style="① background-color: #daf5ff; padding: 10px; ② border: 4px double #5bc0f8;">
<p data-ke-size="size16">3. 글상자 - 블루, 두줄 테두리</p>
</div>

 

2. 변경 방법

① background-color: #daf5ff - 배경 색상 변경

② border: 4px double #5bc0f8 - 테두리 굵기, 색상변경

 

4. 글상자 - 그린, 점선 테두리

 

1. HTML 코드

<div class="txc-textbox" style="① background-color: #e5fdd1; padding: 10px; ② border: 4px dashed #c9f4aa ;">
<p data-ke-size="size16">4. 글상자 - 그린, 점선 테두리</p>
</div>

 

2. 변경 방법

① background-color: #e5fdd1 - 배경 색상 변경

② border: 4px double #c9f4aa - 테두리 굵기, 색상변경

 

 

이상으로 텍스트 상자 만드는 법에 대해 알아보았습니다. 글 상자 서식을 적용하면 보는 사람들로 하여금 글의 내용 및 구조가 효과적으로 전달되므로, 유용하게 사용하시기 바랍니다.

 

HTML 코드는 아래 첨부에서 다운받으시면 됩니다. 그리고 제목 서식 꾸미는 방법은 아래 포스팅을 참고 부탁드립니다.

 

다양한 글상자.txt

0.00MB

 

 

 

 

 

[티스토리 필수 설정] 기본 제목 (대제목, 중제목, 소제목) 서식 총정리

 

[티스토리 필수 설정] 다양한 제목 서식 꾸미기

 

---

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

좋아요. 구독, 댓글은 블로그 작성에 힘이 됩니다.