티스토리 / 예쁜 서식 공유 ① - 대각선 패턴 서식

티스토리 서식 공유 1탄 대각선 패턴과 블록에 그림자 효과를 넣은 티스토리 서식입니다. 텍스트 박스로 이용하거나 제목을 꾸밀 때 사용하세요! 수정 방법과 파일을 첨부하였습니다. 서식 사용법은 이전 글을 참고해 주세요.

 

여섯 가지 대각선 패턴 텍스트 박스 서식과 H태그 제목 꾸미기

 

 

1. 대각선 패턴 서식 수정 방법

색상, 여백 등을 자신의 스킨에 맞게 조정이 필요할 수 있습니다. 

 

<div style="max-width: 100%; padding: 10px 10px; overflow: auto; background: repeating-linear-gradient(45deg, rgba(241, 142, 153, 0.16), rgba(241, 142, 153, 0.16) 10px, rgba(241, 142, 153, 0.09) 10px, rgba(241, 142, 153, 0.09) 20px); box-shadow: 5px 5px 0 rgba(0,0,0,.09); border: 1px solid #f8c7cd; border-radius: 5px;">
<div style="width: 50px; text-align: center; float: left; display: inline-block;">
<p><span style="color: #ffc1c8;">★</span></p>
</div>
<div style="float: none; display: block; overflow: hidden;">
<p>대각선 패턴 서식입니다.</p>
</div>
</div>

• 최대 너비 : max-width 값을 조정합니다. 예) max-width: 50%;
• 안쪽 여백 : padding 값을 조정합니다. 
• 그림자 없애기 : box-shadow: 5px 5px 0 rgba(0,0,0,.09);를 삭제합니다.
• 패터 색상 변경 : rbga 색상 값을 변경합니다. rbga Color Picker
• 테두리 스타일 : border 값을 조정합니다. 

 

2. H태그 제목 꾸미기

텍스트 박스로 사용하지 않고 제목 꾸미기용으로 사용하는 방법입니다.

 

2-1) 에디터 HTML 모드에서 사용

글쓰기 에디터 - HTML 모드에서 h2 태그를 아래처럼 스타일 추가합니다.

<h2 style="max-width: 100%; padding: 10px 10px; overflow: auto; background: repeating-linear-gradient(45deg, rgba(163, 144, 238, 0.18), rgba(163, 144, 238, 0.18) 10px, rgba(163, 144, 238, 0.09) 10px, rgba(163, 144, 238, 0.09) 20px); box-shadow: 5px 5px 0 rgba(0,0,0,.10); border: 1px solid #d0c2ea; border-radius: 5px;">H태그에 적용하기</h2>

 

2-2) 스킨 편집 - css 추가해서 사용

이 방법을 사용하면 기존에 작성했던 글의 h2 태그까지 전부 일괄적으로 스타일 변경을 할 수 있습니다.

블로그관리 홈 -  스킨 편집 - css로 이동하여 아래 내용을 복사하여 붙여 넣습니다.

.entry-content h2 {
max-width: 100%; 
padding: 10px 10px; 
overflow: auto; 
background: repeating-linear-gradient(45deg, rgba(163, 144, 238, 0.18), rgba(163, 144, 238, 0.18) 10px, rgba(163, 144, 238, 0.09) 10px, rgba(163, 144, 238, 0.09) 20px); box-shadow: 5px 5px 0 rgba(0,0,0,.10); 
border: 1px solid #d0c2ea; 
border-radius: 5px;
}

* .entry-content 선택자는 스킨에 따라 다를 수 있습니다. 개발자 모드에서 확인 후 자신의 스킨에 맞게 변경해서 사용해주세요.

 

 

첨부 파일

티스토리-대각선-패턴-서식.txt

0.00MB

첨부한 텍스트 파일에는 여섯 가지 색상의 대각선 패턴 서식 html 코드를 포함했습니다. 예쁘게 사용하세요!