[스킨] GRAVITY SKIN 8 | 내가 수정하는 스킨 수정 일지 #1

거창하게 「스킨 수정 일지」라고 적어두긴 했지만, 솔직히 말하자면 큰 의미는 없다. 그냥 내가 쓰다가 수정하고 싶었던 부분을 수정하는 것일 뿐이라 그렇다. 물론 이걸 보고 어떤 분이 참고해서 아, 나도 저럴 땐 저렇게 적용시켜보아야지. 한다면 더할 나위 없을 듯 ㅎ_ㅎ.

 

1. 왜 수정해야겠다고 생각했어?

일단 본문에 있는 부분을 수정하려고 한다. 본문 중에 타이틀 부분을 말이다. 대부분 깔끔하고 예쁘고 심플하게 적으시는 분들은 제목이 핵심만 잘 적는다거나 요약을 잘해두어서 한 줄이 되는 편인데, 나는 기본적으로 2줄은 되는 거 같다. (머쓱)

 

앞서 썼었던 카테고리 쪼개기(?)도 일맥상통하는 부분이라고 할 수 있다.

 

[정보] 티스토리 카테고리명 쪼개기(?)

 

기본적으로 나는 제목도 길게, 카테고리도 엄청 길게 쓰는 사람이다. 그래서 티스토리 스킨을 수정하게 되었고, 수정하면서 나름 터득하게 되었다카더라…….

 

2. 어디를 수정할 건데?

음, 여기.

본문에 있는 날짜

 

Q. 멀쩡해보이는데?

A. 내 눈에도 멀쩡해보이지만, 하지만 제목이 2줄이 되는 순간 저기도 깨지기 마련이다. 내가 한 번 예시를 들어주겠다.

 

본문에 있는 날짜 깨짐

 

위에 이미지는 내가 임의로 제목을 늘려본 거다. 보면 날짜가 2줄로 바뀌어 있다. 그런데 나란 인간은 날짜가 저렇게 쪼개져 있는 걸 못 본다. 그래서 내가 한 번 최소한의 공간을 확보해서 제목이 저렇게 길어지더라도 한 줄로 보이게 설정을 해볼 거다.

 

3. 변경 전에 감안해두어야 하는 것

해당 스킨에서 날짜는 다양하게 표기가 된다. 예를 들자면 날짜가 Today, Yesterday, N days ago, 2023-03-18 등등. 이 모든 길이를 다 포함할 수 있는 최소한의 길이여야 한다고 생각한다.

 

길이상 보았을 때, 2023-03-18 이런 식으로 표기되었을 때가 가장 길다.

실제로 몇 가지 실험을 해보았는데, 당연히 짧아보이는 Today를 제외하고 %로 확인을 해보았을 때, 공간을 가장 많이 차지하는 것이 2023-03-18처럼 보이는 날짜였다.

 

4. 그렇다면 어딜 수정해야 해?

본문에 있는 날짜에 해당하는 부분을 수정해준다. GRAVITY SKIN 8의 본문 날짜의 class를 수정해주면 된다.

 

관리(본인아이디.tistory.com/manage) > 꾸미기 > 스킨 편집 > html 편집 > CSS로 들어가서 ctrl + F 버튼을 눌러 검색해준다.

 

검색창에는 article__date라고 검색해주면 아마도 그 안에 다른 값들이 있을 것이다. 그럼 거기에 추가만 해준다.

 

<!--예시(변경 전)-->
.article__date{
font-color: black;
}

<!--예시(변경 후/추가 후)-->
.article__date{
font-color:black;
min-width: 10%;
text-align: center;
}

 

‘만약에 나는 GRAVITY SKIN을 사용하고 있지 않지만 나도 저렇게 날짜가 두 줄이 되어서 수정하고 싶다!’ 하시는 분이 계시다면 [ ##_article_rep_date_## ]를 감싸고 있는 class 명을 수정해주면 된다.

 

혹시 위의 말뜻이 이해되지 않거나 해보기가 어렵다면 아래의 글을 한 번 읽어보는 걸 추천한다. 아주 소소한 팁부터 처음부터 어떻게 찾아야 하는지 알려준다.

 

[정보] 티린이라고? 티린이도 스킨 수정할 수 있어! 1탄

 

 

min-width는 최소한 확보해야 할 너비 정도라고 이해하면 될 것 같다. 한마디로 article__date는 어떤 크기가 되더라도 최소한 거기에서 10%의 너비를 가진다는 의미다.

 

Q. 꼭 저기 10%라고 적용해야 하나요?

A. 아니요. 스킨 크기에 따라 조절하시면 됩니다. 폰트 크기에 따라 달라지기도 하기 때문에 여러분이 수정해보시면서 하셔도 되고요. 꼭 %가 아니더라도 px로 조절하셔도 됩니다. :)

ex)

min-width: 100px; /* 어느 크기이더라도 날짜칸은 100px임 */

 

 

Q. OK. 거기까진 이해했어요. 그런데 왜 text-align까지 넣어줬어요?

A. text-align는 Today 값(가장 길이가 짧은 값)을 위한 것이라고 봐도 된다. 백문이 불여일견. 한번 보도록 하자.

 

TODAY

 

제목을 길게 해서 2줄 정도 넣었는데 만약 오늘 올렸다면 위와 같이 보일 것이다. 위의 이미지에는 text-align 값을 넣어주지 않았기 때문에 left(좌측 정렬)일 것이다.

 

text-align: right(우측 정렬)를 해보도록 하겠다.

 

text-align:right(우측 정렬)을 했을 때

 

제목과 Today 간에 차이가 생기지만, 최소한의 너비 10% 때문인지, 그 간격이 거슬린다. (나만 그럴지도.)

 

text-align: center를 넣어줬을 떄,

 

text-align: center을 넣어줬을 때

 

딱 중앙에 자리 잡고 있는 것이 눈에 보인다. Today를 제외하고는 다 길어서 center를 하든, left를 하든, right를 하든 상관없을 것이다. 하지만 기본적으로 짧게 보이는 것을 기준으로 봤을 때 공백이 좌로, 우로 많은 건 별로 보기 좋지 않다고 생각해서 text-align: center 값을 같이 넣어주기로 했다.

 

2023-03-02 날짜로 보일 때

 

저 값을 적용해주고 나면 날짜가 지나서 저렇게 표기가 될 때 2줄로 바뀌지 않고 딱 되는 것을 알 수 있다. (찡긋)

 

5. 근데 모바일에서는 안 되는걸?

 

모든 모바일을 다 수정해줄 수는 없다. 그래도 내가 쓰는 폰 모바일은 맞춰봐야지.

 

대부분 반응형이라고 하는 스킨들은 모바일에서는 어떻게 보일지, 어떤 식으로 줄여줄지에 대해 따로 코드를 해놔서 반응형이라고 한다. 그만큼 스킨을 만들고 배포하시는 분들이 여러 각도로 보고 만드시는 것이라고 봐도 무방하다.

 

보통 모바일 반응형에 들어가는 애들은 CSS에 꼭 들어간다.

 

@media only screen and (max-width: ~~~px) {

}

 

저 max-width^[각주:1]에 px을 넣게 되는데, 최대 너비가 몇 px일 때 이 조건을 따른다는 거다. 반응형이라고 하는 애들에게서는 꼭 나오는 거다.

 

나는 여기에 500px에 맞춰서 이렇게 수정해줄 거다.

 

@media only screen and (max-width: 500px) {
.article__date{
 min-width: 20%;
}
}

 

저게 무슨 의미이냐면, 최대 너비가 500px일 경우에는 내가 보는 그 본문 날짜의 최소 너비를 20%로 만든다는 것이다.

 

그렇게 나는 얼렁뚱땅 내가 보는 폰에서도 예쁘게 한 줄로 보이게 만들었다. (씨익)

 

6. 스킨 정보

스킨 배포 및 판매: 한재님

스킨명: GRAVITY SKIN 8

 

한재님 블로그 바로가기

 

 

방금 읽은 이 글이 도움이 되었다면 공감, 댓글을 남겨주세요. :)

 

1. 아까 min-width와는 반대로 최대의 너비를 지정한다 [본문으로]