티스토리 스킨 v3 제작 일지(3)

Size

오늘의 작업은 사이즈를 정의했습니다. 지금까지는 주먹구구식의 사이즈였다면 이번에는 4,8,12,16... 등의 기준을 잡고 작업했습니다. 그러니 예전보다 더 라인을 잡기가 쉬워지고 뭔가 모르게 작업이 잘되고 있다는 생각이 들더군요.

color

이번에는 다크 모드를 먼저 신경 쓰면서 만들기로 했습니다. 예전에는 먼저 만들고 다크 모드를 짜깁기 식으로 하였는데 뭔가 부자연스러움이 있어서 이번에는 다크 모드를 먼저 생각하고 만들다 보니 조금 나아지는 것 같습니다. 그리고 색의 투명도로 색을 내니 예전보다는 색상수가 적어지는 것 같습니다. 그리고 1개의 색으로 통일하다시피 해서 그런지 예전보다는 더 통일성이 있지 않나 싶네요.

         	v3.0 Color 
	100 % 		 #ffffff	<- --ak3-bg-Primary(light)
	95 % 		 #f2f2f3	<- --ak3-bg-Seconday(light)
	90 % 		 #e5e6e6  	<- --ak3-bg(light) 
	85 % 		 #d8d9da	
	80 % 		 #cbcccd
	75 % 		 #bebfc1	<- --ak3-bg-Seconday(light) 속 글자색(placeholder)
	70 % 		 #b1b3b4
	65 % 		 #a4a6a8  	<- --ak3-label-Primary(dark)
	60 % 		 #97999b
	55 % 		 #8a8c8f
	50 % 		 #7d8082	<- --ak3-label-Seconday(light)
	45 % 		 #707375
	40 % 		 #646668	<- --ak3-bg-Seconday(dark) 속 글자색(placeholder)
	35 % 		 #57595b
	30 % 		 #4b4d4e	<- --ak3-label-Seconday(dark)
	25 % 		 #3e4041
	24 % 		 #3c3d3e	<- --ak3-bg-Seconday(dark)
	20 % 		 #323334	<- --ak3-bg-Primary(dark)
	15 % 		 #252627	<- --ak3-bg(dark)
	10 % 		 #191a1a
	5 % 		 #0c0d0d  	<- --ak3-label-Primary(light)
	0 % 		 #000000

약간의 오차가 있지만 위의 이 color로 가기로 했습니다. 

JavaScript

이번에 만들면서 함수 표현식을 사용하기로 했습니다. 그리고 점차 JQuery를 줄여 가기로 했습니다. 하지만 Tistory는 Jquery는 버릴 수가 없더군요. 다음 업데이트가 바뀌면 가능하겠지만...

'use strict';
const blogSetting = function () {
  let
    $documentHtml = document.documentElement,
    $document     = document.body,
    
    ...
    
    module
  ;
  
  module = {
    initialize: function() {
      module.isMobileInvoke(),
      module.category.cutReplace(),
      
      ...
      
      module.name();
    },
    isVariableDefined: function (el) {
      return typeof !!el && (el) != 'undefined' && el != null;
    },
    
    ...
    
    category: {
      // 카테고리 cnt '(', ')' 부분 지우기, 없으면 0 - 카테고리 부분
      cutReplace: function(cntText) { 
        if(!cntText) return document.write('0');
        return document.write(cntText.replace('(','').replace(')',''));
      }
    },
    
    ...
    
    name: function() {
    	...
    }
	module.initialize();
};

document.addEventListener('DOMContentLoaded', () => {
	blogSetting()
});

const로 blogSetting를 만들면서 안에 module를 만들어서 그 안에 function()를 사용합니다. 그러니 전역 변수를 사용하지 않아도 blogSetting안에 변수를 넣어 지역변수 사용 이렇게 하였습니다. 그러니 깔끔하게 정리된 것 같습니다.