포스트잇 스타일의 CSS 알림 텍스트 블록 서식입니다. 정보, 경고 등을 표시하거나 강조를 위해 문장을 꾸밀 수 있습니다.
포스트잇 스타일의 CSS 텍스트 블록 서식입니다. 정보, 경고 등을 표시하여 방문자에게 강조된 문장을 전달할 수 있습니다. 또는 발췌 문장, 인용 문구를 장식하는 데 사용할 수 있습니다. 쉽게 불러올 수 있도록 티스토리와 블로그스팟의 서식 기능을 이용하면 편리합니다.
포스트잇 스타일 텍스트 블록 서식을 적용하는 방법
에디터 특성상 티스토리와 블로그스팟에서 적용하는 방식이 약간 다릅니다.
블로그스팟의 에디터는 HTML 모드에서 <style>을 사용할 수 있습니다. 테마에 CSS를 추가할 수도 있지만 모든 게시물에 사용하는 게 아닌 경우 <style>을 사용하여 텍스트 블록을 사용하는 게시물에 대해서만 CSS를 불러오도록 합니다.
1. 블로그스팟에 적용하기
1단계: 게시물 편집기에서 가장 왼쪽에 있는 아이콘을 클릭합니다.
2단계: 'HTML 보기'를 선택합니다.
3단계: 상단에 다음 코드를 삽입합니다.
<style>/*<![CDATA[*/
/* Alert text Block - https://ottzid.com */
.ottdg{color:#a94442;background-color:#f2dede;border-color:#e8c4c4;}
.ottsc{color:#3c763d;background-color:#dff0d8;border-color:#cae6be;}
.ottif{color:#31708f;background-color:#d9edf7;border-color:#bcdff1;}
.ottwr{color:#8a6d3b;background-color:#fcf8e3;border-color:#f9f0c3;}
/* Alert text Block Div*/
.ottdiv{border-left-width:20px;border-radius:5px;padding:15px;border-left-style:solid;font-size: .9rem;}
/*]]>*/</style>4단계: 다음과 같이 <div>를 이용하여 텍스트 블록으로 꾸밀 문장을 작성합니다.
<div class="ottdiv ottif">텍스트 알림 상자입니다. 여기에 원하는 문장을 넣어주세요!</div>
1) 적용 결과
텍스트 알림 상자입니다. 여기에 원하는 문장을 넣어주세요!
2. 티스토리에 적용하기
티스토리에는 강력한 서식 기능이 있습니다. <div>에 스타일을 추가하고 서식으로 저장한 후 불러오기만 하면 됩니다.
1단계: 티스토리 - 블로그관리홈 - 서식관리 메뉴로 이동합니다.
2단계: 서식쓰기 버튼을 누르고 HTML 모드 상태로 변경합니다.
3단계: 다음과 같이 html 코드를 작성하고 저장합니다.
<div style="color:#8a6d3b;background-color:#fcf8e3;border-color:#f9f0c3;border-left-width:20px;border-radius:5px;padding:15px;border-left-style:solid;font-size:.9rem;">텍스트 알림 상자입니다. 여기에 원하는 문장을 넣어주세요!</div>
4단계: 글을 작성할 때 서식을 가져와서 사용합니다.
1) 적용 결과
위 방법으로 작성하였습니다. 결과를 확인해 주세요!
텍스트 블록을 사용하여 글의 가독성을 높이고 중요한 문장을 강조 표시하여 방문자에게 쉽게 전달하세요.