취미/서식

본문 대제목 서식 만들기

양디 2016. 1. 10. 17:14

category

본문 대제목 서식

written by YangD




본문 대제목 서식

이 글의 가장 위에 보면,


category

Title

written by YangD


라고 되어 있는 부분이 있습니다.

이 부분이 본문 대제목에 해당하며, 이름은 그냥 제가 지었습니다. ㅋㅋㅋ


좌측 상단에는 Category가, 가운데에는 이번 글의 제목이, 우측 하단에는 누가 썼는지에 대한 정보들이 들어 있습니다.


특히 현재 카테고리가 대문자로 되어 있는데, 이는 uppercase 속성값을 이용했기 떄문에 소문자로 쳐도 대문자로 나옵니다.


필자의 취향 저격입니다 !


디자인 잘하는 분들에겐 형편없어 보이겠지만, 아직까지는 매우매우 마음에 들어서 모든 글에 집어 넣고 있습니다.


소스코드는 다음과 같습니다.



소스코드

#category{

font-family: Verdana;

     font-size: 13px; 

     line-height: 14px;

 text-transform: uppercase;

letter-spacing: 2px;

font-weight: bold;

}

    #title{

       margin: 0;

       padding: 0px 0px 6px 0px;

       font-size: 41px;

       line-height: 34px;

       letter-spacing: -1px;

       font-weight: bold;

    }

</style>

<div class="txc-textbox" style="border: 3px double rgb(203, 203, 203); padding: 10px; background-color: rgb(255, 255, 255);"><p id="category">category</p>

<p id="title" style="text-align: center;">

<strong>Title</strong></p>

<p style="text-align: right;">written by <a href="http://www.dalkomit.com" target="_blank" class="tx-link"><b>YangD</b></a></p></div><p><br /></p></div></p>

<p><br /></p>



그냥 복사하셔서 글쓰기에서 서식 을 체크하시고, 우측 상단에 HTML 체크박스 클릭 후 붙여넣기 하시면 됩니다 !




댓글