이 블로그는 더이상 운영되지 않고 Archive 용도로 사용되고 있습니다.
새로운 블로그를 방문해주세요.

[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 을 알맞게 조절하면 됩니다.



이상입니다.

티스토리 툴바