티스토리 블로그 서식, 인용문 디자인 공유

블로그 서식 만들기 및 활용

・ 블로그 서식은 티스토리에서 지원하는 "글 쓰기"의 추가 기능으로 서식 디자인은 개인이 만들어야 한다.

・ 블로그 서식은 스킨과 별도로 관리한다.

 

블로그 서식 만들기

1. 블로그 관리 > 서식 관리 > 서식 쓰기

2. 글쓰기 모드를 "기본 모드"에서 HTML" 모드로 변경

3. 아래의 HTML 코드를 붙여 넣기

4. 제목 입력

5. 완료

블로그 서식 활용

1. 블로그 글쓰기 화면 > 더보기(…) : 서식

 

블로그 서식 만들기 및 활용의 자세한 내용은 아래 링크 참조.

likenew.tistory.com/451

티스토리 블로그 서식 만들기 및 활용 (구글애드센스 광고 포함)

 

 

서식 - Bookmark

책갈피 모양 서식으로 요점 정리에 사용

 

사용 예)

 

 

요점 정리

• 다시마와 건더기 수프를 넣고 끓인다.
• 물이 끊으면 면과 수프를 넣는다.
• 3분 더 끓인다.
• 맛있게 먹는다.

 

HTML 코드

<div style="position: relative; background-color: #f9f9f9; padding: 23px 25px 26px 65px; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #ef6c57;"></div>
<div style="position: absolute; top: 17px; left: 14px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #f9f9f9 transparent;"></div>
    <p>내용</p>
</div>

소스 코드는 아래 첨부 파일 참조

 

 

 

서식 - Bracket - normal

・ 명언, 인용에 사용

・ 줄 바꿈 안 될 때, 문장 끝에 "공백" 입력 필요.

 

사용 예시)

 

Don't be afraid of death; be afraid of an unlived life. You don't have to live forever, you just have to live.

- Natalie Babbitt, Tuck Everlasting

 

 

 

HTML 코드

<div style="border: 10px solid #ddd; padding: 15px 30px; margin: 0;">
    <div style="width: 90%; height: 10px; background-color: #fff; display: block; position: relative; top: -25px; margin: 0 auto;"></div>
        <p>내용</p>
        <p>- 출처</p>
    <div style="width: 90%; height: 10px; background-color: #fff; display: block; position: relative; bottom: -25px; margin: 0 auto;"></div>
</div>

 

 

서식 - Bracket - center

사용 예시)

 

지금 한 번?
지금만 한 번, 마지막으로 한 번
또, 또 한 번!
순간엔 편하겠지.
근데 말이야.
그 한 번들로 사람은 변하는 거야.

- 박새로이, 이태원 클라쓰

 

 

HTML 코드

<div style="border: 10px solid #ddd; padding: 15px 30px; margin: 0;">
    <div style="width: 90%; height: 10px; background-color: #fff; display: block; position: relative; top: -25px; margin: 0 auto;"></div>
        <p style="text-align:center;">내용</p>
        <p style="text-align:right;">- 출처</p>
    <div style="width: 90%; height: 10px; background-color: #fff; display: block; position: relative; bottom: -25px; margin: 0 auto;"></div>
</div>

 

 

서식 - google adsense - inline ads

구글 애드센스 광고를 본문 안에 넣을 때 사용

 

사용 예시)

 

HTML 코드

<div style="margin: 10px auto 10px auto;">
    <!-- 구글 애드센스 광고 코드 -->
    <!-- 광고 유형 : 콘텐츠 내 자동 삽입 -->
</div>

 

 

서식 - Box - gray

박스 디자인으로 리스트 쓰기 가능

 

사용 예)

I think one’s feelings waste themselves in words, they ought all to be distilled into actions and into actions which bring results.

• think
• action

 

HTML 코드

<div style="padding: 12px 15px;	background-color: #f9f9f9; 	border: 1px solid #e3e3e3; line-height: 1.8;">
    <p>내용</p>
</div>

 

 

서식 : title - cross line

・ 라인과 결합된 소제목

・ 소제목 폰트 크기 변경은 "font-size: 1.44em;"을 수정

・ 라인과 소제목의 위치 변경은 "bottom: -20px"를 수정

 

사용 예)

소제목은 이곳에 입력

 

 

HTML

<p style="border-bottom: 1px solid #999; text-align: center; font-size: 1.44em; color:#000;">
    <span style="background-color: #fff; position: relative; padding: 10px 15px; bottom: -20px;">소제목은 이곳에 입력</span>
</p>

 

 

서식 - title - center line

・ 라인과 결합된 소제목

・ 소제목 폰트 크기 변경은 "font-size: 1.77em;"을 수정

・ 라인과 소제목의 위치 변경은 "bottom: 5px"를 수정

 

사용 예)

 

소제목은 이곳에 입력

 

 

HTML 코드

<div style="border-bottom:1px solid #000; width:70px; margin:0 auto; position:relative; bottom:5px"></div>
<p style="font-size:1.77em; color:#000; text-align:center">소제목은 이곳에 입력</p>

 

 

서식 - border-left

・ 줄 바꿈은 shift + 엔터키

 

사용 예)

・ Live life when you have it. Life is a splendid gift – there is nothing small about it.
・ And what nursing has to do in either case, is to put the patient in the best condition for nature to act upon him.

 

HTML 코드

<p style="border-left: 4px solid #f1935c; padding: 8px 12px;">여기</p>

 

 

인용 1

・ "인용"은 티스토리에서 지원하는 기능으로 스타일은 style.css 파일에 정의할 수 있다.

・ 리스트를 사용할 수 없다.

 

 

 

사용 예)

I think one’s feelings waste themselves in words, they ought all to be distilled into actions and into actions which bring results.
- Florence Nightingale

 

CSS (style.css) 코드

.article_view blockquote {
    border-left: 4px solid #d0d0d0;
    padding: 0px 0 3px 12px;
    font-size: inherit;
    margin:0;
}

 

 

인용 2

사용 예)

I think one’s feelings waste themselves in words, they ought all to be distilled into actions and into actions which bring results.
- Florence Nightingale

 

CSS (style.css) 코드

.article_view blockquote[data-ke-style="style3"]::before {
    content: '';
    width: 90%;
    height: 10px;
    background-color: #fff;
    display: block;
    position: relative;
    top: -25px;
    margin: 0 auto;
}

.article_view blockquote[data-ke-style="style3"] {
    position: relative;
    border: 10px solid #ddd !important;
    padding: 15px 30px !important;
    background-color: #fff !important;
    margin: 0;
    font-size: inherit;
}

.article_view blockquote[data-ke-style="style3"]::after {
    content: '';
    width: 90%;
    height: 10px;
    background-color: #fff;
    display: block;
    position: relative;
    bottom: -25px;
    margin: 0 auto;
}

 

 

첨부 파일

서식 샘플.html

0.00MB

인용문(blockquote).css

0.00MB