8. 티스토리 스킨만들기 (Html 초보) - 메인페이지 (3)

메인 페이지 세 번째 시간입니다.

지난 시간에 이어서 메인 페이지 본문 내용 추가와 블로그 모양을 수정을 하겠습니다.

 

연습용으로 개설된 티스토리 블로그 (https://hijingjingpractice.tistory.com/)

 

_##]

---

HTML

<!--
 
<div id="content"> --내용 상자--
    <s_article_rep>
        <div class="content">
 
            <s_index_article_rep>
                메인페이지 (1)
            </s_index_article_rep>
 
            <s_permalink_article_rep>
            <div class="article_main"> 상단타이틀
              <div class="category"> 카테고리
                <a href="[ ##_article_rep_category_link_## ]">[ ##_article_rep_category_## ]</a>
              </div>
              <h2><a href="[ ##_article_rep_link_## ]">[ ##_article_rep_title_## ]</a></h2> 타이틀
              <div class="date"> 날짜
               [ ##_article_rep_date_## ]
              </div>
              <s_ad_div>
              <div class="admin">
                <a href="[ ##_s_ad_m_link_## ]">수정</a>
                <a href="#" onclick="[ ##_s_ad_s2_onclick_## ]">[ ##_s_ad_s1_label_## ]</a>
                <a href="#" onclick="[ ##_s_ad_d_onclick"_## ]>삭제</a>
              </div>
              </s_ad_div>
            </div>
            <hr/>
            <div class="article">
             [ ##_article_rep_desc
            </div>
            </s_permalink_article_rep>
 
        </div>
    </s_article_rep>
</div>
 
-->

CSS

/*
 
#wrap { 
    display: grid;
    grid-template-columns: 200px 1fr;
}
 
#aside { 
    width: -
    float: -    
}
 
#content { 
    width: -
    float: -
}
 
#content .article_main {
    text-align: center;
    margin: 20px auto;
}
 
#content .article_main a {
    text-decoration: none;
    color: black;
}
 
#content .article_main .category a {
    color: #01e5fb;
}
 
#content .article_main h2 {
    margin: 0;
}
 
#content .article_main .admin a {
    color:#999999;
}
 
#content .article_main .admin a:hover {
    text-decoration: underline;
    color: #01e5fb;
}
 
#content .article {
    margin: 10px auto;
}
 
*/

CSS

4열 - 사이드바 및 본문 그리드 변경

5열 - 사이드바 및 본문 위치 할당

9~10열 - 기존 속성 삭제

14~15열 - 기존 속성 삭제

18열 - 상단 타이틀 위치 조정

19열 - 상단 타이틀 마진 설정

24열 - 상단 타이틀 링크 밑줄 삭제

25열 - 상단타이틀 기본 색상 변경

29열 - 카테고리 기본 색상 변경

33열 - 타이틀 마진 설정

37열 - 관리자 메뉴 기본 색상 변경

41열 - 관리자 메뉴 마우스 오버 시 밑줄

42열 - 관리자 메뉴 마우스 오버 시 색상변경

46열 - 본문 상, 하단 마진 설정

 

이전까지 작업한 코드에서 수정된 부분만 작성했습니다.

인덱스나 본문 내용이 작으면 그에 따라 구분선이 줄어드는 문제가 생겨서 정렬을 float에서 grid로 바꿨습니다.

---

이제 제법 사용할 수 있는 스킨이 된 것 같습니다.

모르는 부분은 댓글을 달아주시면 답해드리겠습니다.