티스토리 북클럽 스킨 수정_폰트 종류, 사이즈, 색상 수정

티스토리 북클럽 스킨 폰트를 Open Sans, Roboto 두 종류를 추가하고, CSS 에 잘못 수정한 것으로 보이는 폰트 크기도 일률적으로 맞추어서 변경하였다.

 

북클럽 스킨 폰트 종류, 사이즈 수정

 1. 폰트 서체 변경없이 종류 추가

  - 북클럽 스킨 기본 웹폰트 로드

@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');

 

@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

 

여기에 Open Sans, Roboto 2 종류의 폰트를 추가 하였는데, 구글 애드센스 인피드 광고 폰트에 Open Sans, Roboto가 있어서 추가로 불러오게 하였다.

 

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

 

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

 

  - 북클럽 스킨 폰트-패밀리 순서 변경

폰트-패밀리 기본 순서는

font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif;

이렇게 되어 있었으나,

 

'Open Sans',  'Roboto' 룰 추가하여. 다음과 같은 순으로 변경하였다.

font-family: AppleSDGothicNeo, 'Open Sans', sans-serif, 'Roboto', 'Noto Sans KR';

 

Open Sans 는 한글은 없나 보다.영어용인지 한글은 보이지 않는다. Noto Sans KR은 한글이 옆으로 아주 살짝 길~게 늘어나는 듯한 모습이어서 순서를 뒤로 보냈다.

 

2. 폰트 사이즈 수정

잘 모르다 보니 CSS 를 수정하면서 font-size 부분을 임의로 변경하였는데, 애드센스 인피드 광고 폰트 크기를 보면서 PX 와 (r)em 의 사이즈 비교를 하기 위해 인터넷을 검색해 보니, 기존에 변경하였던 수치와는 조금 달라서 규격처럼 나온 수치로 다시금 변경작업을 하였다.

 

여기에서 16PX = 1em 이라는 것을 알게 되었고, 내가 많은 부분을 다르게 적었구나 싶었다.

 

하나 중요한 점은 h1 보다 h2는 더 커서는 안된다는 것을 알게 되었다.

 

3. 폰트 컬러(색상) 수정

마지막으로 폰트 컬러를 수정하였다. 그렇다고 많은 컬러를 수정한 것이 아니라 진하고 연하고의 차이만 수정하였다. 색상 수정을 PC에서 미리보기 하면서 조금씩 변경해 나갔는데, 변경 후 모바일에서 보면 너무 진하거나 연하게 나와서 PC에서만 미리보기 하면 안되겠다 싶어서 모바일과 함께 미리보기를 해 가면서 수정을 하였다.

 

아직도 수정해야 할 부분과, 먼저 수정한 부분을 다시 수정해야 하는 경우가 있겠지만, 왠만큼 수정을 한 것 같아서 마음은 편해졌다.