목차
이전 글은 4-1 게시글 목록 썸네일 정사각형으로 적용하기< 해당 글 참고
아래 셋팅 방법들은 수익화 셋팅을 위한 북클럽 스킨 편집 방법입니다.
셋팅 설정에 있어서 반복적으로 들어가는 내용은 본문에 포함하지 않고 따로 정리해 뒀습니다.
1. 수정하고 싶은 부분 코드 찾는 방법 (F12 개발자 모드 설명)
이번글은 티스토리 북클럽 스킨에서 게시글 목록에 테두리를 만들고 마진(간격)을 설정하는 방법입니다.
1. 게시글 목록 변경전
변경전 기본 테두리가 없는 게시글 목록 모습입니다. 집중 되지 않고 어딘가 떠있는 모습입니다.
2. 테두리 적용 부분 찾기
티스토리 HTML 편집창에서 > "CSS"를 클릭한후
.list-type-thumbnail .post-item위 코드를 검색해 줍니다. (검색 단축키 ctrl + F)
검색하여 해당 부분을 찾습니다.
3. 테두리 CSS 코드 적용하기
사진을 참고 하여
border: 1px solid #e9e9e9; /*테두리 선 굵기 1px 색상:#e9e9e9*/기존 코드에 위 코드를 추가해 줍니다.
적용하면 사진과 같이 테두리는 적용 되어 있지만 글자랑 너무 붙어 있어서 어색해 보입니다.
여기서 패딩 값을 넣어 주어 글자와 간격을 떨어트릴 수 있습니다.
4. 테두리 글자 사이 간격 설정 (패딩,마진 값 수정)
사진을 참고하여
padding: 20px 10px; /* 위 아래 간격 20px 양쪽 간격 10px*/위 패딩 코드값을 추가해 줍니다.
margin: 10px 0 10px; /*마진 값변경*/마진 값도 위와 같이 변경하여 넣어 줍니다. (게시글 사이 간격을 맞추기 용도)
5. 게시글 목록 변경후
패딩 값을 넣고 난뒤 테두리가 보기 좋게 설정된 것을 확인할 수 있습니다.
이어지는 다음글은 4-3 게시글 목록 사진 왼쪽 적용하기<
전체적인 글 목록은 아래 참고
댓글