Tistory블로그 스킨제작 - 본문제목 코딩

<목차로 돌아가기>

컨텐츠 타이틀 만들기

참조 : 'Tistory 블로그 치환자' 

이번글의 목표는 본문제목을 아래와 같이 꾸미려고합니다.

본문글을 넣고 싶은 위치에 다음 코드를 삽입합니다.

HTML

1. <s_article_rep>
2. <div class="entry">
4.     <div class="titleWrap">
5.     <div id="title_left">
6.         </div>
7.         <div id="title_top">
8.     응용프로그램
9. </div>
10. <div id="title_middle">
11.     Tistory블로그 스킨제작 - 본문제목 코딩
12. </div>
13. <div id="title_bottom">
14.             2017. 1. 27. 22:52 | posted by zelkova
15.     </div>
16.     </div>
17. </div>
18. </s_article_rep>

8줄

응용프로그램 : 본문 글의 카테고리를 표시합니다.

11줄

Tistory블로그 스킨제작 - 본문제목 코딩 : 본문 글의 제목을 표시합니다.

14줄

2017. 1. 27. 22:52 : 본문글의 작성일자

zelkova : 작성자를 표시합니다.

CSS

1. .titleWrap{
2.     position:relative;
3.     margin-left:10px;
4.     margin-top:5px;
5.     width:98%;
6.     height:95px;
7.     font-family:"굴림";
8. }
9. #title_left{
10.     float:left;
11.     width:30px;
12.     height:85px;
13.     background-color:#faedd2;
14. }
15. #title_top{
16.     float:left;
17.     width:523px;
18.     height:20px;
19.     text-align:left;
20.     padding-top:2px;
21.     padding-left:10px;
22.     background-color:#d0eaed;
23. }
24. #title_middle{
25.     float:left;
26.     width:533px;
27.     height:41px;
28.     font-size:35px;
29.     font-weight:900;
30.     background-color:#eff6e7;
31. }
32. #title_bottom{
33.     float:left;
34.     width:523px;
35.     height:23px;
36.     text-align:left;
37.     padding-left:10px;
38.     color:#aaaaaa;
39.     background-color:#eff6e7;
40. }

HTML과 CSS를 배우셨다면 쉽게 이해하실거라 믿습니다 ^-^