티스토리 블로그 알림 서식 - 정보, 주의, 불확실한 정보 및 도움 요청

요즘 많이 쓰는 티스토리 블로그 서식. 3개.

「Info」는 정보성 내용을 입력한다.

「Warning」은 주의가 필요한 글에 사용한다.

「Help」는 내용이 확실하지 않거나 도움이 필요할 때 쓴다.

 

사용 예)

티스토리 블로그의 서식은 블로그 관리 페이지에서 만든다. 서식 디자인은 스킨 파일 style.css 파일에서 관리한다. 이렇게 하는 이유는 서식의 디자인 관리가 쉽기 때문이다. 서식 만들기에서 내부 스타일로 서식을 만들면 서식 디자인은 글 페이지에만 종속된다. 이 말은 서식 디자인을 변경해도 이미 발행한 글의 서식은 변경되지 않는다. 해당 글을 찾아 하나하나씩 서식을 수정해야 된다.

 

티스토리 블로그 서식은 스킨과 별도로 관리해야 한다. 블로그 스킨에는 서식이 포함돼 있지 않다. 서식 디자인만 있을 뿐이다.

 

티스토리 블로그 스킨을 백업할 때 서식 파일도 함께 백업할 수 있는 옵션이 있었으면 좋겠다. 서식 파일을 쉽게 백업할 수 있는 방법이 없을까?

 

 

 

알림 서식 소스 코드

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

 

정보(Info)

■ 사용 예

이곳에 Info.

 

■ HTML 코드
※ 내부 스타일(style)을 사용한 이유는 위지위그(WYSIWYG) 때문이다. 글쓰기 모드에서 알림 입력 부분이 보이기 때문에 글쓰기가 편하다. style.css에서 !important 처리로 발행 문서의 서식 디자인에는 영향이 없다.

<p class="alert alert_info" style="border-top: 1px solid #71beff;background-color: #F0FAFF;"></p>

 

■ CSS 코드

.article_view .alert:before {
    position: absolute;
    top: -11px;
    left: 15px;
    padding: 1px 6px 1px 7px;
    border-radius: 2px;
    font-family: consolas;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
}

.article_view .alert_info:before {
    content: 'Info';
    background-color: #71BEFF;
}

.article_view .alert {
    position:relative;
    color:#555;
    line-height: 1.6;
    margin-top: 15px !important;
    padding:16px 20px 18px 14px !important;
}

.article_view .alert_info {
    border-top: 1px solid #71BEFF !important;
    background-color: #F0FAFF !important;
}

 

주의(Warning)

■ 사용 예

이곳에 Warning.

 

■ HTML 코드

<p class="alert alert_warning" style="border-top: 1px solid #f67280; background-color: #fff5f7;"></p>

 

■ CSS 코드

.article_view .alert_warning:before {
    content: 'Warning';
    background-color: #F67280;
}

.article_view .alert_warning {
    border-top: 1px solid #F67280 !important;
    background-color: #FFF5F7 !important;
}

 

불확실한 정보/도움 요청(Help)

■ 사용 예

이곳에 Help.

 

■ HTML 코드

<p class="alert alert_help" style="border-top: 1px solid #B189D5; background-color: #FAF5FF;"></p>

 

■ CSS 코드

.article_view .alert_help:before {
    content: 'Help';
    background-color: #B189D5;
}

.article_view .alert_help {
    border-top: 1px solid #B189D5 !important;
    background-color: #FAF5FF !important;
}

 

 

첨부 파일(알림 서식 소스)

알림 서식 소스.txt

0.00MB

 

 

티스토리 블로그 서식 관련 글

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