[블로그 관리] 스킨 커스텀 삽질(?) 기록

블로그 운영을 시작하고 보니 스킨의 특정 부분을 커스텀하고 싶을 때가 종종 있습니다. 

하지만 전 코딩과는 담을 쌓고 살아온 인간 중 하나죠.

그나마 다행인 건… 뭔가 보고 따라하는 일은 제법 하는 편이라는 겁니다.

그래서 인터넷을 이리저리 찾아보며, HTML과 CSS 코드를 조금씩 고쳐보려 합니다.

스킨 편집 화면에 외계어(?)를 띄워 놓고, 검색 결과를 봐가며 이것저것 고쳐보거나 추가해보면서 

실제 블로그에는 어떤 변화가 나타나는지를 이 포스트에 적어놓을 계획입니다.

나중에 다시 수정하려 할 때 삽질을 덜 하려는 게 주목적입니다만,

혹시라도 다른 분에게 도움이 된다면 그 또한 좋을 겁니다.

제 경우 구글 크롬(Chrome) 브라우저만 사용하고 있기 때문에, 다른 브라우저에서는 테스트를 하지 않고 있습니다.

만약 익스플로러나 엣지, 파이어폭스, 웨일 등으로 제 블로그를 보고 계신 분이라면 좀 다르게 보일 수도 있습니다.

P.S. 사용 중인 스킨을 바꾸거나 하게 되더라도 과거의 기록을 유지하려는 목적이기도 합니다.

선천성 귀차니즘(?)으로 스킨을 변경하는 일은 아마 없지 않을까 예상합니다만…

---

1. 티스토리 'Whatever' 스킨

■ CSS 커스터마이징 기록

.cover-silder .prev,

.cover-slider .next {

 : 홈 커버 아이템 '슬라이더'에 2개 이상의 게시물을 등록했을 때 보이는 <, > 이미지 관련 설정.

 : background-image: url 뒤 괄호 안의 이미지 주소를 수정하면 '커스텀 화살표'를 넣을 수 있을 것으로 추정.

---

.cover-slider ul li .text-box

 : 홈 커버 아이템 '슬라이더'에 노출되는 제목(title) 관련 설정

 : font-weight를 디폴트 값 100;에서 500;으로 변경해서 사용 중.

 : font-weight는 100; 300; normal; 500; Bold; 900;의 6가지 옵션 중 선택 가능 (구글 웹폰트 Noto Sans KR 기준)

 : 위 내용 관련 참고 페이지 (링크 클릭 후 F12 눌러보면 각 옵션 값 확인 가능)

▲ font-weight:100;의 적용 모습

▲ font-weight:500;의 적용 모습

---

.cover-slider ul li .text-box .title

 : 홈 커버 아이템 '슬라이더'에 노출되는 제목(title) 관련 설정

 : font-size를 디폴트 값 3.75em;에서 3.5em;으로 변경해서 사용 중.

---

.cover-thumbnail-list-1 h2 {

 : 홈 커버 아이템 '섬네일 리스트1'에 노출되는 좌측 제목 관련 설정

 : font-weight를 디폴트 값 300;에서 Bold;로 변경해서 사용 중. (변경 비교 스크린샷은 생략)

 : font-size를 디폴트 값 1.85em;에서 2em;로 변경해서 사용 중. (변경 비교 스크린샷은 생략)

 : 참조 포스트 - pt, px, em, percent 변환표

---

.cover-thumbnail-list-1 ul li {

 font-size: 0.875em;

 : 홈 커버 아이템 '섬네일 리스트1'에 노출되는 각 섬네일 하단 제목 관련 설정

 : font-size를 스킨에서 제공하는 디폴트 값 0.875em; 에서 1em;으로 변경해봤으나, 다시 디폴트 값으로 복원. 

▲ "코드는 역시 어렵지 말입니다……"