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

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

글 내용이 많으면 인덱스에서 길게 나오는 문제를 수정할 거고요.

전체적으로 다른 블로그와 비슷하게 모양을 가다듬겠습니다.

 

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

 

HTML

Html 변경 없음

---

CSS

#header {
    height: -
    border-bottom: thin solid;
}
 
 
#header h1 {
    margin: 50px auto;
}
 
#aside {
    height:    -
    border: -
}
 
#manage {
    border-bottom: -
}
 
#content { 
    height: -
    border-left: thin solid;
}
 
#content .content_index {
    padding: 15px 0;
    max-height: 100px;
    overflow:hidden;
}
 
#content .content_index .index_title:hover strong { 
 
}
 
#content .content_index p {
    max-height: 43px;
    overflow:hidden;
}

---

CSS

2열 - 높이 삭제

3열 - 테두리 하단으로 변경

7열 - 메인타이틀 태그 관리 삽입

8열 - 메인타이틀 태그 상, 하 마진 설정

12열 - 사이드바 전체 높이 삭제

13열 - 사이드바 전체 테두리 삭제

17열 - 관리 메뉴 테두리 하단 삭제

21열 - 메인 페이지 높이 삭제

22열 - 사이드바, 메인 페이지 분할선

26열 - 각 인덱스 목록 상, 하 패딩 설정

27열 - 각 인덱스 목록 높이 최대치 설정

28열 - 각 인덱스 목록 넘침 방지

31열 - 마우스 오버 반응 위치 변경 (타이틀 > 타이틀, 글 내용)

36열 - 각 인덱스 글 부분 높이 최대치 설정

37열 - 각 인덱스 글부분 넘침 방지

 

높이는 삭제하면 높이가 사라지기보다는 auto로 변경된다고 생각하면 됩니다.

열마다 의미를 부여하고 수정이 편하게 작성했는데 궁금한 부분은 댓글을 달아주세요.

---

전체적으로 다른 블로그와 비슷하게 만들어 보았습니다.

점점 다른 스킨들과 비슷해지고 있네요.

다음 시간에는 메인 페이지 글 부분을 만들어 보겠습니다.