티스토리 북클럽 스킨 편집 #6 새로운 사이드바 구분선 추가

안녕하세요.

 

이번 포스팅에서도 북클럽 스킨 편집을 이어서 해보겠습니다.

 

티스토리 북클럽 스킨 편집

 

지난 포스팅에서는 콘텐츠 영역과 겹쳐지는 본문 - 사이드바 구분선을 삭제하였습니다.

 

북클럽 스킨 메인 화면

 

개인적으로는 포스팅 영역과 사이드바 영역의 구분선이 있는 게 보기가 편해 보입니다. 그래서 이번 포스팅에서는 붉은색 테두리 영역에 새로운 구분선을 추가해보겠습니다.

 

티스토리 CSS 편집기

 

이번에도 역시 CSS를 수정해야 하므로 HTML 편집기를 열어줍니다.

해당 속성은 “#4. Layout Selector” 영역에 CSS 코드를 추가해야 하며, 이미 존재하는 사이드바 영역을 찾아서 사이드바 왼쪽 경계선(border)를 추가하는 방법입니다.

CSS 속성 편집

Ctrl+F(맥 cmd+f) 를 눌러 #aside { 를 검색합니다. 익숙한 코드와 값들이 보이는데 예전 포스팅에서 사이드바 폭을 수정했던 영역입니다.

해당 영역에 border-left: 1px solid #eee; 를 추가해줍니다. 이 명령어는 두께 1px이고 색상 코드 #eee인 왼쪽 경계선을 추가한다는 의미입니다. 상/우/하 경계선 추가 명령어는 각각 border-top, border-right, border-bottom 입니다.

 

북클럽 스킨 메인 화면 1차 편집

 

적용을 누르고 블로그 화면을 새로 고침 해보면 사이드바 왼쪽에 경계선이 추가된 걸 확인할 수 있습니다. 하지만 경계선이 사이드바 영역과 1:1로 붙어있어 너무 복잡해 보입니다. 따라서 경계선과 사이드바 영역 사이의 여백을 추가로 설정해 주어야 합니다.

 

CSS 속성 편집

 

padding 값을 padding: 75px 0 32px 20px; 로 수정해줍니다.

 

기존에 있던 padding: 75px 0 32px; 는 상측 여백 75px, 좌/우 여백 0, 하측 여백 32px라는 의미입니다. 수정한 padding: 75px 0 32px 20px; 는 상측 여백 75px, 우측 여백 0, 하측 여백 32px, 좌측 여백 20px라는 의미입니다. (시계 방향)

 

margin을 사용하지 않고 padding을 사용한 이유는 border 안쪽의 여백을 수정하였기 때문입니다.

 

[관련 글] [CSS] margin과 padding에 대하여 알아보기

 

북클럽 메인 화면 2차 편집

 

적용을 누르고 블로그 페이지를 새로 고침 해보면 위의 그림처럼 구분선과 사이드바 사이에 여백이 생긴 걸 확인할 수 있습니다.

 

다음 포스팅에서는 사이드바 영역 설정을 마무리해보겠습니다.

 

방문해 주셔서 감사합니다.

 

행복한 하루 보내세요 ^^