외모 (Appearance) – 위젯 (Widget)을 활용해서 사이드바 추가를 마쳤다면 디자인 설정을 조금 해주는 것이 보기에 좋다.
테마 종류에 따라 차이가 있겠지만, 제너레이트 프레스 기준으로 처음 사이드바를 추가하면 위처럼 황량한 모습으로 나올 것이다. 물론 이 상태 그대로 사용해도 운영에는 지장 없겠지만, 원하는 디자인 형태가 있다면 약간의 css 설정을 통해 해결할 수 있다.
이 글에서는 사이드바를 박스 단위로 디자인하는 방법과 구성 글 목록에 밑줄을 긋는 방법을 알아보려고 한다.
1. 사이드바 박스 설정
사이드바의 css를 수정하려면 먼저 클래스 이름을 알아야 한다. 키보드의 F12키로 개발자도구를 활성화한 다음, 점선 화살표를 클릭하고 사이드바를 검사해 보자. 개발자도구 창 가운데 ‘.sidebar .widget’이라고 나오는 것이 클래스 이름인데 마우스 영역 선택 후 Ctrl+C로 복사해 두면 편하다. (또는 직접 입력)
관리자 화면 – 외모 – Customize – Additional CSS 선택 후 위 코드를 붙여 넣으면 화면 오른쪽처럼 사이드바가 박스 형태로 변하는 것을 볼 수 있다. (속성값은 원하는 대 변경하자)
– .sidebar .widget : 클래스 이름으로 아래 속성을 넣고 {} 괄호로 닫아주어야 한다.
– padding : 박스 안 글 목록 주변 여백
– margin : 박스 밖 여백
– background : 박스 색깔
* 패딩과 마진은 상하좌우 네 곳의 값 설정이 가능한데, 위처럼 20px이라고 하면 상하좌우 모두 20px 설정을 뜻한다. 만약 10px 20px 30px 20px이라면 상 : 10px / 우 : 20px / 하 : 30px / 좌 : 20px가 된다. 항상 순서는 이렇게 시계 방향인 점 참고하자.
사이드바는 위젯 형태로 필요한 요소를 구성한 상태이다. (위 예시는 카테고리와 댓글) 위 코드를 설정하면 각 위젯이 박스 형태로 알아서 설정된다.
만약 사이드바를 박스 형태가 아니라 하나로 붙여서 설정하려면 마진 값을 0으로 변경하면 된다.
하지만 마진 값을 0으로 주면 상하좌우 여백이 (위 사진에서 밝은 주황색이 margin 값) 0이 되어서 사이드바 너비가 넓어진다. 이럴 때는 margin : 0 20px;로 설정하면 상하 값은 0이고 좌우 값은 20px이 돼서 적당한 너비를 유지할 수 있다.
사이드바 너비나 여백 값에 정답은 없으니 여러 번 시도하면서 취향대로 설정하면 무난하다.
추가로 사이드바 각 박스 모서리가 네모진 것이 싫다면 둥글기 값을 설정해주면 된다.
border-radius : 10px;
위 코드를 추가하면 모서리 네 부분이 10px만큼 둥글게 변한다. 설정 값을 높이는 만큼 모서리가 둥글게 되는데 조금 전 패딩과 마진처럼 상하좌우 값을 다르게 설정하는 것도 가능하다.
css 설정을 마치면 설정 창 위에 보이는 ‘발행 (publish)’ 버튼을 클릭하면 저장된다.
2. 사이드바 글 목록 밑줄
카테고리 목록이 많은데 박스 안에 이름만 나열되어 있어서 허전한 느낌이 들면 밑줄을 추가해주면 좋다.
– .widget ul li : 클래스 이름
– border-bottom: 1px solid #c5c5c5; 밑줄 굵기 : 1px, 줄 스타일 : 직선, 색깔 : #c5c5c5
– padding-bottom: 10px : 줄 아래 간격 10px;
개발자도구로 클래스 이름 확인 후 위 코드를 추가하였더니 각 카테고리 이름 아래 밑줄이 생긴 것을 볼 수 있다. 그런데 서브 카테고리 맨 아래에 밑줄이 2개라서 보기에 좋지 않다.
새로운 코드 추가를 통해 서브 카테고리의 맨 위 항목 (first-child)에는 줄을 추가했고, 맨 아래 항목 (last-child)의 줄은 0px로 설정해서 안 보이게 했다.
만약 여기서 두 번째 ‘.widget ul li ul li:first-child’ 코드를 삭제하면 서브 카테고리 맨 처음 줄을 없앨 수 있다.
끝으로 배경, 밑줄 설정은 아래 메모장 파일로 첨부했는데 내려받은 후 복사해서 테마 css 영역에 붙여 넣으면 된다.
