css 변수에 자바스크립트로 innerHeight 값을 할당해준다.
var vh;
setVh();
window.addEventListener( "resize", setVh );
function setVh() {
vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty( "--vh", vh+"px" );
}vh라는 변수를 하나 선언해준다.
setVh라는 함수를 하나 만들어주고 바로 호출을 해준다.
함수에서는 아래 두가지 명령을 수행해준다.
그리고 창 크기가 변경될 때 마다 함수를 호출해서 vh값을 갱신해주면 끝.
IE에서 Math.sign과 isNaN 함수가 작동하지 않는다.
swiperjs 플러그인을 사용하는데 내부에 위 함수들이 포함되어 있어서 IE에서 오류가 발생했다. (자바스크립트 플러그인을 쓰다보면 IE는 호환이 안되는 경우가 종종 있다.)
그래서 IE까지 크로스브라우징을 원하면 같은 기능을 하는 함수를 만들어줘야한다.
※ NaN : Not a Number (숫자가 아님)
Math.sign 함수는 숫자가 음수인지 양수인지 판별해주는 기능을 한다.
반환값은 -1, -0, 0, 1, NaN 이렇게 5개인데 -0이나 0이나 같은 값이고 NaN일 경우는 예외처리를 위한 것이니 -1, 0, 1 이렇게 3개의 값을 반환하는 함수만 만들어줘도 대부분 잘 작동할 것 같다.
function customMathSign(n) {
if( n > 0 ) return 1;
else if( n < 0 ) return -1;
else return 0;
}isNaN 함수는 숫자가 맞는지 아닌지 판별해주는 기능을 한다.
인수가 숫자면 false를 반환하고 숫자가 아니라면 true를 반환한다.
typeof를 사용해 간단하게 숫자인지 아닌지 체크해볼 수 있다.
typeof를 사용하면 숫자일 경우 값은 number이다.
함수의 뜻이 is not a number(숫자가 아니다)이기 때문에 숫자일 경우 true가 아니라 false인 점을 기억하자.
function customIsNaN(n) {
if( typeof(n) === 'number ) {
return false;
} else {
return true;
}
}개발을 하다보면 숫자를 쓸 때 1, 2, 3, 4가 아닌 01, 02, 03, 04 로 사용하는 경우가 종종 있다. 파일명에 사용되는 숫자라던지 아니면 화면에 카운트 되는 숫자라던지…
그래서 1을 01로 표현하고 싶을 경우 간단한 함수 하나를 제작하여 사용하면 된다.
function digits( n, l ) {
var _result;
n += '';
if( n.length < l ) {
_result = new Array( l - n.length + 1 ).join( '0' ) + n;
} else {
_result = n;
}
return _result;
}함수는 자리수를 변경할 ‘숫자’와 ‘자리수’를 매개변수로 받는다.
먼저 숫자를 문자열로 변환해준다.
원하는 자리수에서 기존 숫자의 자리수를 빼준(모자란 자리수) 만큼의 길이보다 1칸 더 많은 길이를 가진 배열을 만들어주고 배열을 값 사이에 ‘0’을 넣어서 합쳐준다.
예를 들어서 12를 5자리수로 만들고 싶다고 치면 00012가 될 것이다.
그럼 0이 3개가 필요하고 길이가 4인 배열을 값 사이에 0을 넣어서 합치게 되면
'빈값' 0 '빈값' 0 '빈값' 0 '빈값'
결과는 ‘000’이 된다. 그래서 모자란 자리수에 1을 더한 길이의 배열이 필요한것이다.
모자란 만큼 0을 만든 값을 기존 숫자 앞에 붙여주면 끝.
다른 방법도 있는데 숫자 앞에 ‘00000000000000000000’ 이렇게 많은 0을 붙여준 다음 뒤에서부터 자리수만큼 자르면 된다.
둘 중 어떤 방법이 더 성능면에서 유리한지는 잘 모르겠으니 성능이 중요하다면 알아서 검색해보도록…
위 함수는 원리 설명을 위해 풀어서 쓴거고 약식 조건문으로 한줄로 해결도 가능하다.
function digits( n, l ) {
return String( n ).length < l ? new Array( l - String(n).length + 1 ).join( '0' ) + n : n;
}