본문으로 바로가기

티스토리 서식 설정

category ETC/티스토리 2018. 3. 21. 01:02


PART 1

티스토리 서식 설정



1# 디자인 테마 정하기


1. 새별스러운 새별 블로그 - http://blog.naver.com/seiru523/

* 사용하기 좋은 색상 조합 추천, 레이아웃을 깔끔하게 구성하는 방법 등 좋은 강의가 많음


2. Color Hex - http://www.color-hex.com/

* Hex코드, RGB, HSL, HSV 등 다양한 방법으로 색상 검색 가능

* 검색한 색상과 유사한 색상, 검거나 흰 바탕에 색상 미리보기 등 지원

* 간단한 CSS 예제 & 여러 개의 색과 색 조합 추천




2# 서식 설정하기 [블로그 관리 - 콘텐츠 - 서식 관리 - 서식 쓰기]

- 위에서 정한 테마를 목표로 서식 작성


1. 직접 서식 설정

* 티스토리 기능으로 직접 작성 후 발행


2. 직접 html 소스 작성 - https://www.w3schools.com/html/

*HTML/CSS에 대한 강의 및 예제 참고


3. 다른 사람의 서식 적용

1. HTML 서식 복사

2. 글쓰기 우측 상단의 HTML 체크

3. 복사한 서식 붙여넣기

4. 발행




3# Devin의 서식 설정


1. 제목



PART 1

제목 서식




<hr><table class="txc-table" width="784" cellspacing="0" cellpadding="0" border="0" style="border:none;border-collapse:collapse;;font-family: Verdana, &quot;맑은 고딕&quot;, sans-serif;"><tbody><tr> <td style="width: 83px; height: 40px; border-width: 0px; padding: 1px;"><p><span style="font-size: 12pt; font-weight: bold; color: #3B4B54; ">PART 1</span></p></td> <td style="height: 40px; border-width: 0px; padding: 1px; width: 701px;"><p><span style="font-size: 20pt; font-weight: bold; color: #3B4B54; ">제목 서식</span></p></td> </tr></tbody></table> <p><br /></p> <p><br /></p>



2. 소제목


1# 소제목



<span style="font-size: 14pt; font-weight: bold">1# 소제목</span>
<p><br /></p>


3. 그림자 상자


콘텐츠 내용



<div style="-moz-box-shadow: 1px 1px 3px 2px #656565; -webkit-box-shadow: 1px 1px 3px 2px #656565; box-shadow: 1px 1px 3px 2px #656565; padding: 5px"> <span style="font-size: 10pt;">콘텐츠 내용</span></div>
<p><br /></p>


4, 스크롤 상자


콘텐츠 내용



<pre style="box-sizing: border-box; overflow: auto; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857; color: #333333; word-break: break-all; word-wrap: break-word; background-color: #F5F5F5; border: 1px solid #CCCCCC; border-radius: 4px;"><span style="font-size: 10pt;">콘텐츠 내용</span></pre>
<p><br /></p>


5. 강조 상자


강조 내용



<table class="txc-table" width="784" cellspacing="0" cellpadding="10" border="0" style="border:none; border-collapse:collapse;font-family: &quot;맑은 고딕&quot;, sans-serif; font-size:13px"><tbody><tr>
<td style=" width: 784px; height: 24px; border-width: 1px; border-style: dashed; border-color: #8c8c8c; background-color: #eaeaea;">
강조 내용
</td></tr></tbody></table>
<p><br /></p>