728x90
위 사진처럼
html로 카테고리 정리하는 법 확실히 정리함
검은색 소제목
<h3 style="box-sizing: border-box; border-right-width: 0px; border-bottom: #000000 2px solid; margin: 5px 0px; border-left: #000000 10px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;"><span style="font-family: 'Noto sans Demilight', 'Noto Sans kr';"> 티스토리 블로그 꾸미기 - 서식 이용하여 소제목 꾸미기2</span></h3>
주황색 소제목
<h3 style="box-sizing: border-box; border-right-width: 0px; border-bottom: #ff9900 2px solid; margin: 5px 0px; border-left: #ff9900 10px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;"><span style="font-family: 'Noto sans Demilight', 'Noto Sans kr';"> 티스토리 블로그 꾸미기 - 서식 이용하여 소제목 꾸미기</span></h3>
점선 테두리
<div class="txc-textbox" style="border-style: dashed; border-width: 1px, 1px, 1px, 1px; border-color: #F3C534; background-color: #fefeb8; padding: 3px;">
<h3><b> 티스토리 블로그 꾸미기 - 서식 이용하여 소제목 꾸미기 3</b></h3>
</div>
<소제목, 테두리> 도움받은 블로그 cess88.tistory.com/181
파랑 카테고리
<h3 style="box-sizing: border-box; border-width: 0px 0px 2px 10px; border-bottom-style: solid; border-bottom-color: #017297; margin: 5px 0px; border-left-style: solid; border-left-color: #017297; letter-spacing: 1px; line-height: 1.5; padding: 3px 5px; text-align: center;"><b>파랑 카테고리</b></h3>
<div id="BoxCenter2" class="txc-textbox" style="border-style: dashed; border-width: 0.5px, 0.5px, 0.5px, 0.5px; border-color: #017297; background-color: #e0ecf8; padding: 1px;" data-ke-type="moreLess" data-text-more="링크 보기" data-text-less="링크 닫기"><a class="btn-toggle-moreless">더보기</a>
<div class="moreless-content">
<p>allandsoon.tistory.com</p>
<p> </p>
</div>
</div>
초록 카테고리
<h3 style="box-sizing: border-box; border-width: 0px 0px 2px 10px; border-bottom-style: solid; border-bottom-color: #4e9c05; margin: 5px 0px; border-left-style: solid; border-left-color: #4e9c05; letter-spacing: 1px; line-height: 1.5; padding: 3px 5px; text-align: center;"><b>초록 카테고리</b></h3>
<div id="BoxCenter2" class="txc-textbox" style="border-style: dashed; border-width: 0.5px, 0.5px, 0.5px, 0.5px; border-color: #4e9c05; background-color: #e6f8e0; padding: 1px;" data-ke-type="moreLess" data-text-more="링크 보기" data-text-less="링크 닫기"><a class="btn-toggle-moreless">더보기</a>
<div class="moreless-content">
<p>allandsoon.tistory.com</p>
<p> </p>
</div>
</div>
보라 카테고리
<h3 style="box-sizing: border-box; border-width: 0px 0px 2px 10px; border-bottom-style: solid; border-bottom-color: #642EFE; margin: 5px 0px; border-left-style: solid; border-left-color: #642EFE; letter-spacing: 1px; line-height: 1.5; padding: 3px 5px; text-align: center;"><b>보라 카테고리</b></h3>
<div id="BoxCenter2" class="txc-textbox" style="border-style: dashed; border-width: 0.5px, 0.5px, 0.5px, 0.5px; border-color: #642EFE; background-color: #e6e0f8; padding: 1px;" data-ke-type="moreLess" data-text-more="링크 보기" data-text-less="링크 닫기"><a class="btn-toggle-moreless">더보기</a>
<div class="moreless-content">
<p>allandsoon.tistory.com</p>
<p> </p>
</div>
</div>
노랑 카테고리
<h3 style="box-sizing: border-box; border-width: 0px 0px 2px 10px; border-bottom-style: solid; border-bottom-color: #ff9900; margin: 5px 0px; border-left-style: solid; border-left-color: #ff9900; letter-spacing: 1px; line-height: 1.5; padding: 3px 5px; text-align: center;"><b>노랑 카테고리</b></h3>
<div id="BoxCenter2" class="txc-textbox" style="border-style: dashed; border-width: 0.5px, 0.5px, 0.5px, 0.5px; border-color: #ff9900; background-color: #f7f8e0; padding: 1px;" data-ke-type="moreLess" data-text-more="링크 보기" data-text-less="링크 닫기"><a class="btn-toggle-moreless">더보기</a>
<div class="moreless-content">
<p>allandsoon.tistory.com</p>
<p> </p>
</div>
</div>
분홍 카테고리
<h3 style="box-sizing: border-box; border-width: 0px 0px 2px 10px; border-bottom-style: solid; border-bottom-color: #FE2EF7; margin: 5px 0px; border-left-style: solid; border-left-color: #FE2EF7; letter-spacing: 1px; line-height: 1.5; padding: 3px 5px; text-align: center;"><b>분홍 카테고리</b></h3>
<div id="BoxCenter2" class="txc-textbox" style="border-style: dashed; border-width: 0.5px, 0.5px, 0.5px, 0.5px; border-color: #FE2EF7; background-color: #f8e0f7; padding: 1px;" data-ke-type="moreLess" data-text-more="링크 보기" data-text-less="링크 닫기"><a class="btn-toggle-moreless">더보기</a>
<div class="moreless-content">
<p>allandsoon.tistory.com</p>
<p> </p>
</div>
</div>
검정 카테고리 & 기본 더보기
<h3 style="box-sizing: border-box; border-right-width: 0px; border-bottom: #000000 2px solid; margin: 5px 0px; border-left: #000000 10px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;"><span style="font-family: 'Noto sans Demilight', 'Noto Sans kr';">검정 카테고리 & 기본 더보기</span></h3>
<div style="margin: 20px 0px; caret-color: auto; background-color: #fafafa; padding: 20px 20px 22px; border: 1px dashed #c5c5c5; color: #333333;" data-ke-type="moreLess" data-text-more="목록 보기" data-text-less="목록 닫기"><a class="btn-toggle-moreless">더보기</a>
<div class="moreless-content">
<p>allandsoon.tistory.com</p>
<p> </p>
</div>
</div>728x90
'기타 > 생활정보' 카테고리의 다른 글
| [html 코드] 색깔 이름 알기 (0) | 2020.11.17 |
|---|---|
| [html 코드] 더보기 가운데 정렬 (0) | 2020.11.16 |
| 티스토리 블로그 배너 만든 '미리캔버스' (0) | 2020.11.03 |
| 오프린트미 명함 소량 제작 (0) | 2018.05.07 |
| 선물 받은 것들 (0) | 2018.04.01 |
댓글