이번 글에서는 다양한 북클럽 스킨 수정 후에 메인 컨테이너나 사이드 바 영역에 여전히 남아있는 불필요한 상단 여백을 제거하는 방법에 대해 설명해 드리도록 하겠습니다.
모든 스킨 편집은 블로그 관리 모드에서 꾸미기/스킨 편집/html 편집/HTML 또는 CSS로 클릭해서 들어간 후 해당 행 번호로 직접 스크롤해서 이동하거나 Ctrl+F를 누른 후 키워드 찾기 기능을 활용하여 수정할 곳으로 이동해야 합니다.
(다음 위치로 이동은 Ctrl+G)
이때 행 번호는 개인마다 추가한 행들이 다르기 때문에 정확히 일치하지 않고 차이가 있으니 부근의 번호로 참조하시기 바랍니다.
수정 초기에는 혹시 모를 실수를 대비해 원상복구가 용이하도록 수정할 원본 행들을 코멘트 처리해 두거나 복사해 두는 것이 현명한 방법입니다.
메뉴 하단 여백 줄이기
아래의 왼쪽 그림에서와 같이 헤더 아래 메뉴 리스트와 상단 광고 사이에 상당한 여백이 있어 보기도 싫고 전체 내용이 아래로 밀려서 시인성도 떨어집니다.
CSS 코드를 수정하여 오른쪽 그림과 같이 이 여백을 크게 줄일 수 있습니다. 이렇게 하면 홈은 물론이고 카테고리나 글 본문으로 이동하더라도 동일하게 여백이 감소합니다.
블로그 관리/스킨 편집/html 편집/CSS 340행 부근으로 이동하여 padding: 72px 0 60px; 행 전체를 삭제하거나 px 앞 숫자를 본인에 맞도록 작게 수정한 후 상단의 '적용' 버튼을 눌러주면 됩니다.
#content {
float: left;
width: 68.518518518518519%;
padding: 72px 0 60px; <-- 행 전체를 삭제하거나 px 숫자를 작게 수정
box-sizing: border-box;
}
사이드 바 상단 여백 줄이기
마찬가지로 사이드 바의 맨 위 상단에도 불필요한 여백이 크게 있는데 CSS 코드 수정을 통하여 그 크기를 대폭 줄일 수 있습니다.
블로그 관리/스킨 편집/html 편집/CSS 354행 부근으로 이동하여 padding: 75px 0 32px; 행에서 75px 숫자를 작게 수정한 후 오른쪽 상단의 '적용' 버튼을 눌러주면 됩니다. 저의 경우는 25px로 수정하였습니다.
#aside {
float: right;
width: 21.296296296296296%;
padding: 75px 0 32px; <-- 75px를 작게 수정
box-sizing: border-box;
}
참고로 위의 CSS 코드에서 첫번째 width: 68.518518518518519%; 와 두번째 width: 21.296296296296296%; 를 수정하면 메인 본문의 너비와 사이드 바 너비를 비율로 조절할 수 있는데 변경 사항을 보아가면서 padding 등 다른 여백들까지 함께 고려해야 합니다.
필요하신 분들은 참조하세요.
