[square] 글씨체 변경 후, 작성일과 태그가 겹칠 때 수정 방법 외 1건
square 에 적용된 영문 폰트는 "Ubuntu Condensed" 입니다.
이 글씨체에 맞게 스킨 디자인이 되어있는데요, 그렇다 보니 글씨체를 변경하게 되면 몇 가지 문제가 발생합니다.
1. 작성일과 태그가 겹치는 문제
2. 비밀글 버튼의 글자와 체크박스가 겹치는 문제
이번 가이드에서 위 문제들을 간단하게 CSS 수정만으로 해결할 수 있는 방법을 알려드리겠습니다.
작성일과 태그가 겹치는 문제 해결하기
방법이 두 가지 있습니다. 작성일의 글자 자간을 줄이는 방법, 태그 레이어의 좌측 여백을 조절하는 방법.
작성일 글자 자간 조절은, style.css 파일에서 #head .date 를 검색하면 다음 소스가 나옵니다.
#head .date { position: absolute; bottom: -44px; left: -10px; padding: 10px; font-size: 13px; font-size: 1.3rem; color: #fff; background-color: #555; cursor: default; }
위 소스 제일 마지막에 letter-spacing: -1px; 을 넣으면 자간이 줄어들게 됩니다.
-1px 은 변경한 글씨에 맞게 조절하면 됩니다.
태그 레이어 좌측 여백 조절 방법은, style.css 파일에서 .tag_label 을 검색하면 다음 소스가 나옵니다.
.tag_label { padding: 0 0 10px 70px; min-height: 31px; line-height: 100%; text-align: right; word-break: break-word; }
이 소스를 보면 padding: 0 0 10px 70px; 라고 되어있는데요, 빨갛게 표시한 70px 의 값을 수정하면 됩니다.
위 두 방법 중에 설정한 글씨체에 가장 예쁘게 수정되는 방법을 고르면 됩니다.
비밀글의 글자와 체크박스가 겹치는 문제 해결하기
이 수정도 방법이 두가지입니다.
자간을 줄이는 방법과 체크박스의 위치를 조절하는 방법.
우선 자간을 줄이는 방법은, style.css 파일에서 #communicate .communicateWrite .secret 을 검색하면 다음 소스가 나옵니다.
#communicate .communicateWrite .secret { position: relative; float: right; margin: 0 5px 0 0; padding: 20px 25px 15px 10px; line-height: 15px; letter-spacing: 2px; border-bottom: 1px solid #ddd; }
여기서 우리가 손봐야 할 부분은 빨갛게 표시한 letter-spacing: 2px; 부분입니다. 2px 의 값을 알맞은 값으로 변경하면 됩니다.
그리고 체크박스의 위치를 옮기는 방법은, style.css 파일에서 #communicate .communicateWrite .secret input 를 검색하면 다음 소스가 나옵니다.
#communicate .communicateWrite .secret input { position: absolute; top: 5px; bottom: 0; left: 65px; margin: auto 0; cursor: pointer; }
이곳 또한 우리가 손봐야 할 부분은 빨갛게 표시된 left: 65px; 입니다. 65px 을 알맞게 조절하면 됩니다.
이상입니다.