티스토리 Letter 스킨 포스팅 목록 구분선 추가하기

안녕하세요.

티스토리 Letter 스킨 메인 화면의 포스팅 목록에서는 각 포스팅 간에 구분선이 없이 목록이 표시됩니다. CSS 속성 기본값에 구분선이 포함되어 있지 않은 것입니다.

위의 그림과 같이 기본 메인 화면에 목록 간의 구분선이 없는 것이 Letter 스킨의 기본값입니다. 개인 취향에 따라 목록 구분선이 있는 것을 선호하는 분도 계실 테고, 없는 것을 선호하는 경우도 있으실 겁니다. 목록 간에 구분선이 있는 것을 선호하시는 분들을 위해, 이번 포스팅에서는 구분선을 간단하게 추가해보겠습니다.

우선 개발자 도구를 활용하여  포스팅 목록을 선택합니다. 그리고 CSS 창을 보면 속성을 편집해야 할 영역이 나타납니다. CSS 속성의 1144행 부분을 편집해야 하는 것을 알 수 있습니다.

티스토리 HTML 편집기에서 CSS 편집을 선택하고 1144행 부분을 찾습니다. 그리고 border-bottom 속성을 추가하여 포스팅 목록 하단에 구분선이 나타나도록 해줍니다.

border-bottom: 1px solid black;

위 속성의 의미는  굵기 1px의 검은색 실선을 추가한다는 의미입니다. 색상은 임의로 검은색으로 지정하였으며 #eee 등 원하시는 색상으로 적용하시면 됩니다.

블로그 메인 화면을 확인해보면 검은색의 구분선이 추가된 것을 확인할 수 있습니다.

 

행복한 하루 보내세요.

감사합니다.