티스토리와 홈페이지에서 사용할 수 있는 다양한 서식과 HTML 텍스트 효과를 모아보았습니다. 간단한 복사 붙여넣기로 블로그와 홈페이지를 더욱 아름답게 꾸며보세요.
티스토리/홈페이지 서식 모음 및 HTML 텍스트 효과 모음
안녕하세요! 오늘은 티스토리와 홈페이지에서 사용할 수 있는 다양한 서식과 텍스트 효과를 소개해드리겠습니다. 마음에 드시는 서식을 가져다 저장해놓고 사용해보세요.
제목 서식 모음
서식 1 소제목
<div style="font: bold 14pt Dotum, Sans-serif; padding: 7px; width: 420px; color: rgb(255, 255, 255); margin-bottom: 10px; border-left-color: rgb(0, 90, 150); border-left-width: 13px; border-left-style: solid; background-color: rgb(50, 50, 50);">서식 1 소제목</div>
제목 1
<h2 style="border-left: 10px solid #b4b5b8; background-color: #343434; color: white; padding: 3px; padding-left: 10px;">제목 1</h2>
제목 2
<h2 style="border-left: 10px solid #faacff; background-color: #ff00de; color: white; padding: 3px; padding-left: 10px;">제목 2</h2>
제목 4
<h2 style="border-left: 10px solid #acb2ff; background-color: #0000ff; color: white; padding: 3px; padding-left: 10px;">제목 4</h2>
서식 2 소제목
<div style="font: bold 14pt Dotum; padding: 7px; width: 420px; color: #ffffff; margin-bottom: 10px; border-left-color: #780000; border-left-width: 10px; border-left-style: solid; background-color: #003273;">서식 2 소제목</div>
소제목 3
<h5 style="margin: 10px 0px 5px; padding: 0px 10px 1px; line-height: 30px; letter-spacing: -0.07em; font-size: 14px; border-bottom-color: rgb(43, 43, 43); border-left-color: rgb(43, 43, 43); border-bottom-width: 1px; border-left-width: 8px; border-bottom-style: solid; border-left-style: solid;"><strong>소제목 3</strong></h5>
소제목 4
<h5 style="margin: 10px 0px 5px; padding: 0px 10px 1px; line-height: 30px; letter-spacing: -0.07em; font-size: 14px; border-bottom-color: rgb(216, 60, 60); border-left-color: rgb(216, 60, 60); border-bottom-width: 1px; border-left-width: 8px; border-bottom-style: solid; border-left-style: solid;"><b>소제목 4</b></h5>
제목 8
<h2 style="padding: 0px 10px 1px; margin: 10px 0px 5px; border-left-width: 5px; border-left-style: solid; border-left-color: #d83c3c; font-size: 14pt; color: #333333; font-family: '맑은 고딕','Nano Sans Korean'; border-bottom-color: #d3d3d3; border-bottom-width: 1px; border-bottom-style: solid; letter-spacing: -0.07em; line-height: 35px; background-color: #fafafa;">제목 8</h2>
제목 9
<h2 style="color: #000b5c; border-left: 2px solid #6879f9; border-bottom: 5px solid #6879f9; padding: 3px; padding-left: 10px;">제목 9</h2>
제목 10
<h2 style="color: #000b5c; border-left: 2px solid #00ff0c; border-bottom: 5px solid #00ff0c; padding: 3px; padding-left: 10px;">제목 10</h2>
제목 11
<h2 style="color: #000b5c; border-left: 2px solid #ff8a00; border-bottom: 5px solid #ff8a00; padding: 3px; padding-left: 10px;">제목 11</h2>
소제목 5
<div style="border-bottom-color: rgb(0, 0, 255); border-bottom-width: 2px; border-bottom-style: solid;">
<span style="background: rgb(0, 0, 255); padding: 5px 10px 2px; color: rgb(255, 255, 255); font-size: 14px; font-weight: bold;">소제목 5</span>
</div>
소제목 6
<div style="border-bottom: #1e78d2 1px solid;">
<div style="background-color: #1e78d2; padding: 4px; color: #fff; font-weight: bold; width: 273px;">소제목 6</div>
</div>
제목 14
<h2 style="color: #000b5c; border: 1px solid #6879f9; border-bottom: 5px solid #6879f9; padding: 3px; padding-left: 10px;">제목 14</h2>
제목 15
<h2 style="color: #000b5c; border: 1px solid #ff8a00; border-bottom: 5px solid #ff8a00; padding: 3px; padding-left: 10px;">제목 15</h2>
제목 16
<h2 style="color: #000b5c; border-left: 5px solid #6879f9; padding: 5px; padding-left: 10px;">제목 16</h2>
제목 17
<h2 style="color: #000b5c; border-left: 5px solid #ea68f9; padding: 5px; padding-left: 10px;">제목 17</h2>
제목 18
<h2 style="color: #000b5c; border-left: 5px solid #48ff00; padding: 5px; padding-left: 10px;">제목 18</h2>
내용 19
<h3 style="color: #000b5c; border: 3px outset #969696; background-color: #f9f9f9; padding: 8px 15px;">내용 19</h3>
내용 20
<h3 style="color: #000b5c; border: 3px outset #969696; background-color: #f9f9f9; padding: 8px 15px; border-radius: 15px;">내용 20</h3>
내용 21
<h3 style="color: #000b5c; border: 3px outset #969696; background-color: #f9f9f9; padding: 8px 20px; border-radius: 25px 0px; text-align: left;">내용 21</h3>
내용 22
<p><span style="font-size: 22px; color: #f000ff; font-weight: 800; margin-right: 7px; padding: 5px; text-shadow: 5px 5px 5px #f8b0ff;">제목 22</span>내용</p>
내용 23
<p><span style="font-size: 22px; color: #000000; font-weight: 800; margin-right: 7px; padding: 5px; text-shadow: 5px 5px 5px #c1c1c1;">내용 23</span></p>
내용 24
<p><span style="font-size: 22px; color: #0024ff; font-weight: 800; margin-right: 7px; padding: 5px; text-shadow: 5px 5px 5px #b0bbff;">내용 24</span></p>
텍스트 효과 샘플: EVAN LEE
텍스트 효과 1
<h3 style="background: #fff; font-size: 40px; font-weight: bold; text-shadow: 0px 5px 0px #ffb2f5;">텍스트 효과 1. EVAN LEE</h3>
텍스트 효과 2
<h3 style="background: #fff; font-size: 40px; font-weight: bold; text-shadow: 0px 1px #ffffff, 4px 4px 0px #eaeaea;">텍스트 효과 2. EVAN LEE</h3>
텍스트 효과 3
<h3 style="background: #fff; color: #ffffb4; font-size: 40px; font-weight: bold; text-shadow: -1px -1px 0px #ffbb00, 3px 3px 0px #ffbb00, 6px 6px 0px #b77300;">텍스트 효과 3. EVAN LEE</h3>
텍스트 효과 4
<h3 style="background: #fff; color: #00d8ff; font-size: 40px; font-weight: bold; text-shadow: -1px -1px 0px #0090b7, 3px 3px 0px #0099b7, 6px 6px 0px #005a81;">텍스트 효과 4. EVAN LEE</h3>
이제 이 다양한 서식과 텍스트 효과를 활용하여 티스토리와 홈페이지를 더욱 멋지게 꾸며보세요. 필요한 서식을 복사하여 저장하고, 필요할 때마다 쉽게 사용할 수 있습니다. 모두 유용하게 사용하시길 바랍니다.
