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

오늘은 content 부분의 메인 페이지 인덱스를 만들어 보겠습니다.

홈 화면에 최근글이 보이면서 제목, 내용, 카테고리, 작성일자 이렇게 표현할 겁니다.

 

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

 

 

HTML

<!--
<div id="content"> --내용 상자--
 
<s_article_rep>
    <div class="content">
 
    <s_index_article_rep>
    <div class="content_index">
        <a href="[##_article_rep_link" class="index_title">
            <strong>[ ##_article_rep_title_## ]</strong>
            <p>[ ##_article_rep_summary_## ]</p>
        </a>
        <div class="index_info">
            <a href="[##_article_rep_category_link">[ ##_article_rep_category_## ]</a>
            [ ##_article_rep_date_## ]
        </div>
    </div>
    </s_index_article_rep>
    
    </div> 
</s_article_rep>
 
</div> --내용 상자 종료--
-->

HTML

1열 - 작업해온 HTML 중 id="content" 부분을 수정

3열 - <s_article_rep> 글 그룹 치환자를 이용해서 공간을 할당

4열 - CSS적용을 위한 div 태그 삽입

6열 - <s_index_article_rep> 인덱스 페이지 표시 영역 치환자로 인덱스 공간 할당

7열 - div 태그 삽입

8열 - 12열 글 제목 a 태그로 링크, CSS적용을 위한 클래스 선언

9열 - 글 제목 치환자 삽입 후 강조표시

10열 - 글 내용 요약 치환자 p태그로 블럭화

12열 - 인덱스 정보 div 태그

13열 - 카테고리 링크 및 치환자 삽입

14열 - 글 발행 날짜/시간 치환자 삽입

---

CSS

/*
#wrap { 메인 레이아웃
    overflow:hidden;
}
 
#content { 내용 레이아웃
    width: 756px; 가로 임의설정
    height : 560px; 세로 임의설정
     text-align:center; --삭제--
    float: right; 우측 정렬
    border: thin solid; /*테두리 얇음 실선
    padding: 20px;
    overflow:hidden;
}
 
#content .content_index {
    padding: 10px 0;
    overflow:hidden;
    border-bottom: thin solid;
}
 
#content .content_index a {
    text-decoration: none;
    color: black;
}
 
#content .content_index .index_title strong {
    font-size: 20px;
}
 
#content .content_index .index_title:hover strong {
    text-decoration: underline;
    color: #01e5fb;
}
 
#content .content_index p {
    margin: 0;
}
 
#content .content_index .index_info {
    font-size: 15px;
}
 
#content .content_index .index_info a {
    color: #01e5fb;
*/

---

CSS

1~3열 - 메인 레이아웃 height 삭제, 넘치는 효과 숨김

5~13열 - 8열 글자 중앙 정렬 삭제

15열 - 각 인덱스 효과 (표시되는 글 각각 적용됨)

16열 - 위, 아래 패딩

17열 - 넘치는 효과 숨김

18열 - 아래쪽 테두리

21열 - 인덱스 내 a태그 효과

22열 - 링크 밑줄 삭제

23열 - 링크 기본 색상 변경

26열 - 인덱스 글 타이틀

27열 - 글자크기 조절

30열 - 인덱스 글 마우스 오버 시 적용

31열 - 마우스 오버시 밑줄

32열 - 마우스 오버시 색상변경

35열 - 인덱스 글 본문

36열 - 위, 아래 마진 조절

39열 - 인덱스 정보

40열 - 인덱스 정보 글자크기 조절 (카테고리, 발행 날짜/시간)

43열 - 카테고리 링크

44열 - 카테고리 링크 기본 색상 변경

---

이렇게 해서 메인화면 글 인덱스를 만들어 봤습니다.

다음에는 글 본문 표현을 해보겠습니다.

 

---

2019. 09. 10

html, css 전체 주석처리 - 현 블로그 스킨 코드로 인한 수정 방지

각 치환자 [ # ] 띄어쓰기 삽입