웹 개발/HTML, CSS
[HTML] 티스토리 서식 공유 (깔끔, 노트)
지이구
2022. 4. 27. 16:32
제가 쓰려고 만든 티스토리 서식을 공유합니다.
서식 만들다보니 요거 재밌네..?
티스토리에 벌써 정들었어...
서식을 무한복제해야겠으....😏
미리보기의 폰트는 고양체 입니다.
폰트는 블로그에 맞게 자동으로 변환됩니다.
유용하셨다면 공감&댓글 부탁드려요!
🍋 미리보기
🤍 실제크기로 보시려면 더보기를 눌러주세요
🍋 소스
<p data-ke-size="size16"> </p>
<h2 data-ke-size="size26" style="border:1px solid #d4d4d4; border-left-color: royalblue; display: inline-block;padding:7px 40px 7px 15px; border-left-width: 23px;background-size: 10px, 30px, 10px 10px, 30px 30px;
background-image: linear-gradient(90deg, #f2f2f2 1px, transparent 1px), linear-gradient(90deg, #f2f2f2 1px, transparent 1px), linear-gradient(#f2f2f2 1px, transparent 1px), linear-gradient(#f2f2f2 1px, transparent 1px);font-weight: 700;">
<span style="color:#000000;">h2: 대제목입니다.</span>
</h2>
<div style="background: #fafafa; padding:8px; margin: 20px 0px; border-radius: 10px; width: 90%;">
<div style="line-height: 1.7em; border: 2px dashed #c1c1c1; border-radius: 10px; padding:20px; ">
게시글의 개요라고도 볼 수 있는 앞부분 머릿말 영역입니다. 아래부터는 의미없는 한글 텍스트 예시입니다.<br/>
우리 커다란 품에 있는 온갖 튼튼하며, 얼음과 뿐이다. 위하여서 가치를 찬미를 이상, 사라지지 따뜻한 봄날의 이것이다. <br/>
가지에 하는 그들의 가치를 열락의 이상은 불러 풀이 것이다. <br/>
인간의 못할 얼마나 갑 무엇이 하였으며, 찾아 투명하되 꽃이 부패뿐이다. <br/>
못할 따뜻한 고행을 동산에는 보내는 없으면 구하지 이 풍부하게 듣는다. <br/>
구하지 그러므로 실로 청춘은 장식하는 불러 것이다. 있음으로써 기쁘며, 무엇이 귀는 부패뿐이다. <br/>
앞이 같으며, 별과 품으며, 날카로우나 끓는 사라지지 그들의 아름다우냐? 위하여, 보는 이상 살 천고에 위하여 것이다.
</div>
</div>
<p data-ke-size="size16"> </p>
<h3 data-ke-size="size23" style="border-bottom:3px solid #d4d4d4; border-right:3px solid #d4d4d4; border-top:1px solid #d4d4d4;border-left:1px solid #d4d4d4; display: inline-block; padding:5px 10px; font-weight: 700;">
<span style="color:#000000;">h3: 소제목입니다.</span>
</h3>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16">
소제목에 해당하는 내용입니다. 아래부터는 의미없는 한글 텍스트 예시입니다.<br/>
우리 커다란 품에 있는 온갖 튼튼하며, 얼음과 뿐이다. 위하여서 가치를 찬미를 이상, 사라지지 따뜻한 봄날의 이것이다. <br/>
가지에 하는 그들의 가치를 열락의 이상은 불러 풀이 것이다. <br/>
인간의 못할 얼마나 갑 무엇이 하였으며, 찾아 투명하되 꽃이 부패뿐이다. <br/>
못할 따뜻한 고행을 동산에는 보내는 없으면 구하지 이 풍부하게 듣는다. <br/>
구하지 그러므로 실로 청춘은 장식하는 불러 것이다. 있음으로써 기쁘며, 무엇이 귀는 부패뿐이다. <br/>
앞이 같으며, 별과 품으며, 날카로우나 끓는 사라지지 그들의 아름다우냐? 위하여, 보는 이상 살 천고에 위하여 것이다.
</p>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
<h4 data-ke-size="size20" style="display: inline-block; padding:3px 0px; background: linear-gradient(110deg, #9c47fc, #FF00FF) no-repeat; background-size: 100% 6%; background-position: bottom; font-weight: 700;">
<span style="color:#000000;">1. h4: 소제목 1번 항목입니다.</span>
</h4>
<p data-ke-size="size16">
남은 위에 그러나 별 마디씩 별 노루, 불러 있습니다. 오는 위에도 까닭이요, 다 내 걱정도 까닭입니다. 하나에 오는 내린 딴은 시와 나는 지나고 별들을 아이들의 버리었습니다. 멀리 슬퍼하는 이름을 하나의 있습니다. 그리고 불러 동경과 슬퍼하는 풀이 아름다운 봅니다. 이름과, 내 오면 나는 우는 노새, 그러나 계십니다.
</p>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
<h4 data-ke-size="size20" style="display: inline-block; padding:3px 0px; background: linear-gradient(110deg, #9c47fc, #FF00FF) no-repeat; background-size: 100% 6%; background-position: bottom; font-weight: 700;">
<span style="color:#000000;">2. h4: 소제목 2번 항목입니다.</span>
</h4>
<p data-ke-size="size16">
나는 밤이 이름과 하나 이름과, 별 아이들의 내 다 까닭입니다. 멀리 무엇인지 오는 별 책상을 소학교 남은 겨울이 쓸쓸함과 봅니다. 이런 이웃 별이 버리었습니다. 멀리 봄이 노루, 마리아 이웃 거외다. 북간도에 이름과, 하나에 까닭이요, 딴은 이런 오는 까닭입니다. 내린 당신은 겨울이 봅니다.
</p>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
<h4 data-ke-size="size20" style="display: inline-block; padding:3px 0px; background: linear-gradient(110deg, #9c47fc, #FF00FF) no-repeat; background-size: 100% 6%; background-position: bottom; font-weight: 700;">
<span style="color:#000000;">3. h4: 소제목 3번 항목입니다.</span>
</h4>
<p data-ke-size="size16">
언덕 같이 사람들의 계집애들의 이네들은 라이너 까닭입니다. 하나에 아침이 벌써 별에도 그리고 별 마리아 하나에 딴은 있습니다. 시인의 이름자 이름과, 이름자를 별 무덤 듯합니다. 이름을 프랑시스 별 내 벌써 어머님, 소학교 하나에 있습니다. 별 많은 비둘기, 계십니다. 못 아스라히 된 있습니다.
</p>
만약 위의 소스를 적용했는데 글씨의 수직정렬이 맞지않으신다면 아래처럼 padding값을 추가한 버전으로 넣어주세요!
<p data-ke-size="size16"> </p>
<h2 style="border: 1px solid #d4d4d4; border-left-color: royalblue; display: inline-block; padding: 9px 40px 0px 15px; border-left-width: 23px; background-size: 10px, 30px, 10px 10px, 30px 30px; background-image: linear-gradient(90deg, #f2f2f2 1px, transparent 1px), linear-gradient(90deg, #f2f2f2 1px, transparent 1px), linear-gradient(#f2f2f2 1px, transparent 1px), linear-gradient(#f2f2f2 1px, transparent 1px); font-weight: bold;" data-ke-size="size26"><span style="color: #000000;">h2: 대제목입니다.</span></h2>
<div style="background: #fafafa; padding: 8px; margin: 20px 0px; border-radius: 10px; width: 90%;">
<div style="line-height: 1.7em; border: 2px dashed #c1c1c1; border-radius: 10px; padding: 9px 20px 0px 20px;">게시글의 개요라고도 볼 수 있는 앞부분 머릿말 영역입니다. 아래부터는 의미없는 한글 텍스트 예시입니다.<br />우리 커다란 품에 있는 온갖 튼튼하며, 얼음과 뿐이다. 위하여서 가치를 찬미를 이상, 사라지지 따뜻한 봄날의 이것이다. <br />가지에 하는 그들의 가치를 열락의 이상은 불러 풀이 것이다. <br />인간의 못할 얼마나 갑 무엇이 하였으며, 찾아 투명하되 꽃이 부패뿐이다. <br />못할 따뜻한 고행을 동산에는 보내는 없으면 구하지 이 풍부하게 듣는다. <br />구하지 그러므로 실로 청춘은 장식하는 불러 것이다. 있음으로써 기쁘며, 무엇이 귀는 부패뿐이다. <br />앞이 같으며, 별과 품으며, 날카로우나 끓는 사라지지 그들의 아름다우냐? 위하여, 보는 이상 살 천고에 위하여 것이다.</div>
</div>
<p data-ke-size="size16"> </p>
<h3 style="border-bottom: 3px solid #d4d4d4; border-right: 3px solid #d4d4d4; border-top: 1px solid #d4d4d4; border-left: 1px solid #d4d4d4; display: inline-block; padding: 9px 10px 0px 10px; font-weight: bold;" data-ke-size="size23"><i></i> <span style="color: #000000;">h3: 소제목입니다.</span></h3>
<p data-ke-size="size16">소제목에 해당하는 내용입니다. 아래부터는 의미없는 한글 텍스트 예시입니다.<br />우리 커다란 품에 있는 온갖 튼튼하며, 얼음과 뿐이다. 위하여서 가치를 찬미를 이상, 사라지지 따뜻한 봄날의 이것이다. <br />가지에 하는 그들의 가치를 열락의 이상은 불러 풀이 것이다. <br />인간의 못할 얼마나 갑 무엇이 하였으며, 찾아 투명하되 꽃이 부패뿐이다. <br />못할 따뜻한 고행을 동산에는 보내는 없으면 구하지 이 풍부하게 듣는다. <br />구하지 그러므로 실로 청춘은 장식하는 불러 것이다. 있음으로써 기쁘며, 무엇이 귀는 부패뿐이다. <br />앞이 같으며, 별과 품으며, 날카로우나 끓는 사라지지 그들의 아름다우냐? 위하여, 보는 이상 살 천고에 위하여 것이다. <br /><br /></p>
<h4 style="display: inline-block; padding: 0px 0px; background: linear-gradient(110deg, #9c47fc, #FF00FF) no-repeat; background-size: 100% 6%; background-position: bottom; font-weight: bold;" data-ke-size="size20"><i></i> <span style="color: #000000;">1. h4: 소제목 1번 항목입니다.</span></h4>
<p data-ke-size="size16">남은 위에 그러나 별 마디씩 별 노루, 불러 있습니다. 오는 위에도 까닭이요, 다 내 걱정도 까닭입니다. 하나에 오는 내린 딴은 시와 나는 지나고 별들을 아이들의 버리었습니다. 멀리 슬퍼하는 이름을 하나의 있습니다. 그리고 불러 동경과 슬퍼하는 풀이 아름다운 봅니다. 이름과, 내 오면 나는 우는 노새, 그러나 계십니다. <br /><br /></p>
<h4 style="display: inline-block; padding: 0px 0px; background: linear-gradient(110deg, #9c47fc, #FF00FF) no-repeat; background-size: 100% 6%; background-position: bottom; font-weight: bold;" data-ke-size="size20"><i></i> <span style="color: #000000;">2. h4: 소제목 2번 항목입니다.</span></h4>
<p data-ke-size="size16">나는 밤이 이름과 하나 이름과, 별 아이들의 내 다 까닭입니다. 멀리 무엇인지 오는 별 책상을 소학교 남은 겨울이 쓸쓸함과 봅니다. 이런 이웃 별이 버리었습니다. 멀리 봄이 노루, 마리아 이웃 거외다. 북간도에 이름과, 하나에 까닭이요, 딴은 이런 오는 까닭입니다. 내린 당신은 겨울이 봅니다. <br /><br /></p>
<h4 style="display: inline-block; padding: 0px 0px; background: linear-gradient(110deg, #9c47fc, #FF00FF) no-repeat; background-size: 100% 6%; background-position: bottom; font-weight: bold;" data-ke-size="size20"><i></i> <span style="color: #000000;">3. h4: 소제목 3번 항목입니다.</span></h4>
<p data-ke-size="size16">언덕 같이 사람들의 계집애들의 이네들은 라이너 까닭입니다. 하나에 아침이 벌써 별에도 그리고 별 마리아 하나에 딴은 있습니다. 시인의 이름자 이름과, 이름자를 별 무덤 듯합니다. 이름을 프랑시스 별 내 벌써 어머님, 소학교 하나에 있습니다. 별 많은 비둘기, 계십니다. 못 아스라히 된 있습니다.</p>
728x90
반응형