IT 정보공간 - front-end & publisher

function isCapLockOn(e){
 var charKeyCode = e.keyCode ? e.keyCode : e.which; // To work with both MSIE & Netscape
 var shiftKey = e.shiftKey ? e.shiftKey : ((charKeyCode == 16) ? true : false);

 // Check both the condition as described above
 if (((charKeyCode >= 65 && charKeyCode <= 90) && !shiftKey)|| ((charKeyCode >= 97 && charKeyCode <= 122) && shiftKey)){
 // Caps lock is on
   return true;
 }
 else{
 // Caps lock is off.
   return false;
 }
}

네이버에서 로그인을 하려고 아이디 넣고, 비밀번호를 치는데...
어머나 caplock이 켜져있다고 레이어가 이쁘게 나오는것[!]

그래서 찾아봤다_ capslock check!
이 이벤트는 파라메타로 이벤트객체 자체를 넘겨야 하니

```

$(#checkLock).keypress(function(e){
var check = isCapLockOn(e);
alert(check);
});

```

요딴식으로 쓰도록 하자

ALT: 18,
BACKSPACE: 8,
CAPS_LOCK: 20,
COMMA: 188,
COMMAND: 91,
COMMAND_LEFT: 91,
COMMAND_RIGHT: 93,
CONTROL: 17,
DELETE: 46,
DOWN: 40,
END: 35,
ENTER: 13,
ESCAPE: 27,
HOME: 36,
INSERT: 45,
LEFT: 37,
MENU: 93,
NUMPAD_ADD: 107,
NUMPAD_DECIMAL: 110,
NUMPAD_DIVIDE: 111,
NUMPAD_ENTER: 108,
NUMPAD_MULTIPLY: 106,
NUMPAD_SUBTRACT: 109,
PAGE_DOWN: 34,
PAGE_UP: 33,
PERIOD: 190,
RIGHT: 39,
SHIFT: 16,
SPACE: 32,
TAB: 9,
UP: 38,
WINDOWS: 9

1. Star 핵 : IE6, IE7

일반적으로 *뒤에 스타일을 적어주면 IE6 과 7에서만 적용이 된다.

.selector {margin:100px; *margin:90px;}

2. _(언더바) 핵 : IE6

정말 사용할 일이 많은 언더바 핵, 크로스브라우징 작업을 하다보면 정말로 쓸일이 많은 아주아주 유용한 핵이다. 크로스브라우징 하려면 절대적으로 꼭 알아야 할 핵

.selector {margin:100px; _margin:90px;}

3. 응용편

위의 두가지를 이용하면 가각의 브라우져의 구미에 맞게 알맞은 핵을 적용할 수 있다.

우선 호환모드로 작동하지 않게 위의 meta값을 적용해주고

.selector {margin:100px; *margin:90px; _margin:110px;}

위와 같이 스타일시트를 작성하게 되면 IE8 등의 표준에 가까운 브라우져에서는 margin:100px; 이 적용되고 IE7 에서는 margin:90px; 이 적용되며, IE6에서는 margin:110px; 이 적용되게 된다.

핵은 왠만하면 사용하지 않는 것이 가장 좋지만, 어쩔 수 없는 상황에서 깨진 디자인으로 우리의 마음을 해치지 않기 위해서 적절하게 최소화하여 사용하는 것도 건강에는 이로울 것이다.

해상도 : 아래 기재

LG전자:옵티머스G : 1280x768 (WXGA)

옵티머스 뷰 : 1024x768 (XGA)

옵티머스 뷰2 : 1280x768 (XGA)

아이폰5 : 해상도:1136 x 640

갤럭시S3 , 갤럭시 노트 2 : 해상도: 1280 x 720

아이폰4 , 아이폰4S : 해상도: 960 x 640

갤럭시 노트1 , LG전자-옵티머스LTE : 1280 x 800

아이패드 iPad : 해상도: 1024 x 768

아이폰 3GS : 해상도: 480 x 320

해상도 : 800 x 480

삼성전자 - 갤럭시GIO, 갤럭시ACE, 갤럭시ACE PLUS
LG전자 - 옵티머스원, 옵티머스시크, 안드로원
KT테크 - 스마트볼
팬텍(스카이) - 미라크A
모토로라 - 모토믹스
HTC - 레전드

해상도 : 854 x 480

삼성전자

갤럭시NEO, 갤럭시S, 갤럭시S호핀, 갤럭시U, 갤 럭시K, 갤럭시A, 갤럭시S2, 갤럭시S2 LTE, 넥서스S

LG전자

옵티머스Q, 옵티머스Z, 옵티머스마하, 옵티머스블 랙, 옵티머스빅, 옵티머스2X, 옵티머스3D, 옵티머스EX, 옵티 머스Q2, 프라다폰3.0

KT테크

테이크, 테이크2, 테이크 타키
팬택(스카이) : 이자르, 미라크, 베가, 시리우스, 베가X, 베가X +, 베가S, 베가레이서, 베가넘버5

HTC

인크레더블S, 디자이어, 디자이어HD, 넥서스원, 센세이션XL**

델 : 델베뉴, 델스트릭

SK텔레시스 : 리액션, WYNN

아이리버 : 바닐라

해상도 : 960 x 540

모토로라 - 모토쿼티, 모토로이, 모토글램, 디파이

소니에릭슨 - X10, 아크, 레이

해상도 : 1024x600

KT테크 - 테이크 야누스
HTC - 이보4G+, 레이더4G, 센세이션
모토로라 - 레이저, 아트릭스

해상도 : 1280x720

삼성전자 - 갤럭시탭 7.0

기기 실측 사이즈

320 x 480 아이폰4

320 x 530 갤럭시s

400 x 683 갤럭시탭 7인치

800 x 1280 갤럭시10.1

768 x 1024 아이패드

초간단 json 서버 만들기 : https://samchi-it.tistory.com/21

ajax post 로 데이터 전송하기

초간단 json 서버를 만들어서 아래 ajax url 에 서버를 연결해주면 끝납니다.

userInforCreate()

function userInforCreate(){
    var _data = {
            name : userName.val(),
            gender : gender,
    birth : userbirth.val(),
    phone : userPhone.val(),
    }


    $.ajax({
    type: 'POST',
    url: 'http://localhost:3000/UserInfo',
    dataType: 'json',
    async: false,
    data: _data,
    beforeSend: function(xhr) {},
    complete: function(request,status) {}
    }).done(function(data, textStatus, jqXHR) {
    console.log(data)
    }).fail(function(jqXHR, textStatus) {
    alert('textStatus: ' + textStatus);
    return;
    });
}

json 서버 간단하게 만들기

1. npm install -g json-server 글로벌설치
2. db.json 파일을 하나만든다
3. db.json 에는 아래처럼 예시로만든다

   {
   "UserInfo": [
   ]
   }

4. json-server --watch db1.josn 서버를 실행한다.
5. http://localhost:3000/ 서버를 확인한다

code 태그 이쁘게 출력하기

1. SyntaxHighlighter
2. https://github.com/syntaxhighlighter/syntaxhighlighter/releases
   syntaxhighlighter 다운로드 한후에 아래처럼 적어준다.

간격이 이쁘지 않으면, line-height: 1.7em !important; em 단위를 올려준다.

XRegExp.js , shCore.js 기본으로 호출하고,
필요한 타입의 용도를 스크립트나 태그나 적용한다.
예시 : <script type="syntaxhighlighter" class="brush: js;">
테마는 shCoreEmacs.css css 별로 찾아서 적용한다.

    <script type="text/javascript" src="./syntaxhighlighter/js/XRegExp.js"></script>
    <script type="text/javascript" src="./syntaxhighlighter/js/shCore.js"></script>
    <script type="text/javascript" src="./syntaxhighlighter/js/shBrushJScript.js"></script>
    <script type="text/javascript" src="./syntaxhighlighter/js/shBrushSass.js"></script>
    <script type="text/javascript" src="./syntaxhighlighter/js/shBrushCss.js"></script>
    <script type="text/javascript" src="./syntaxhighlighter/js/shBrushXml.js"></script>


    <link type="text/css" rel="stylesheet" href="./syntaxhighlighter/css/shCore.css"/>    
    <link type="text/css" rel="Stylesheet" href="./syntaxhighlighter/css/shCoreEmacs.css" />
    <script type="text/javascript">SyntaxHighlighter.all();</script>

gulp sass nodejs 최신버전 충돌이슈

아래 소스처럼 변경해주면 사용할 수 있다.

  [gulp-sass 4버전]

  ★package.json
  "devDependencies": {
    "gulp": "4.0.2",
    "gulp-sass": "4.0.2",
  },

  ★gulp.js
  const gulp = require("gulp");
  const sass = require("gulp-sass");


  [gulp-sass 5버전]

  ★package.json
  "scripts": {
    "start": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^5.1.0",
    "sass": "^1.50.1"
  },
  "main": "gulpfile.js",
  "author": "",
  "license": "ISC",
  "description": ""

  ★gulp.js
  const gulp = require("gulp");
  const sass = require('gulp-sass')(require('sass'));

nodejs 가 업데이트되면

npm install browser-sync@latest --save-dev 등등 최신 버전으로 모듈을 설치해주는것이 좋다

샘플예제 : https://jsfiddle.net/leetaesu/tvhjorLf/27/

html

<div class="circular-chart_wrap">
  <svg viewBox="0 0 36 36" class="circular-chart point_color">
    <path class="circle-bg"
          d="M18 2.0845
             a 15.9155 15.9155 0 0 1 0 31.831
             a 15.9155 15.9155 0 0 1 0 -31.831"
          />
    <path class="circle type1"
          stroke-dasharray="0 100"
          d="M18 2.0845
             a 15.9155 15.9155 0 0 1 0 31.831
             a 15.9155 15.9155 0 0 1 0 -31.831"
          />
  </svg>
  <span class="percentage">0%</span>
</div>
<div class="circular-chart_wrap">
  <svg viewBox="0 0 36 36" class="circular-chart point_color">
    <path class="circle-bg"
          d="M18 2.0845
             a 15.9155 15.9155 0 0 1 0 31.831
             a 15.9155 15.9155 0 0 1 0 -31.831"
          />
    <path class="circle type2"
          stroke-dasharray="0 100"
          d="M18 2.0845
             a 15.9155 15.9155 0 0 1 0 31.831
             a 15.9155 15.9155 0 0 1 0 -31.831"
          />
  </svg>
  <span class="percentage">0%</span>
</div>
<div class="circular-chart_wrap">
  <svg viewBox="0 0 36 36" class="circular-chart point_color">
    <path class="circle-bg"
          d="M18 2.0845
             a 15.9155 15.9155 0 0 1 0 31.831
             a 15.9155 15.9155 0 0 1 0 -31.831"
          />
    <path class="circle type3"
          stroke-dasharray="0 100"
          d="M18 2.0845
             a 15.9155 15.9155 0 0 1 0 31.831
             a 15.9155 15.9155 0 0 1 0 -31.831"
          />
  </svg>
  <span class="percentage">0%</span>
</div>

scss

@keyframes CircularProgress {
    0% {
        stroke-dasharray: 0 100;
    }
}
.circular-chart_wrap {
    margin:20px;
    position: relative;
    display: none;
    float:left;
    .circular-chart {
        display: block;
        width: 42px;
        height: 42px;
    }
    .circle-bg {
        fill: none;
        stroke:#E7EBEF;
        stroke-width: 2.8;
    }
    .circle {
        fill: none;
        stroke-width: 4;
        stroke-linecap: round;
        animation: CircularProgress 1s ease-out forwards;
    }
    .circular-chart.point_color .circle {
        stroke:#E22D72;
    }
  .circular-chart.point_color .circle.type2 {
    stroke:#4285f4;
  }
  .circular-chart.point_color .circle.type3 {
    stroke:#fbbc05;
  }
    .percentage {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.12rem;
        font-weight: 600;
        color: #000;
        letter-spacing: -0.006rem;
        &.zero {
            color: #cccccc;
        }
    }
}

javascript

function randomHundred() {
  return Math.floor(Math.random() * 100);
}
$(".circular-chart_wrap").each(function () {
  var random = randomHundred();   // 이곳에서 처리
  var percentElement = $(this).children('span');
  var animateElement = $(this).children('.circular-chart').children('.circle');
  animateElement.attr('stroke-dasharray', random + ' 100');
  percentElement.text(random + '%');
  if (random <= 0) {
    animateElement.hide(0);
    percentElement.addClass('zero');
  }
  $(this).show(0);
});

샘플 보는곳 : https://jsfiddle.net/leetaesu/g349tky6/1/

html

<div class="graph_con"></div>
<div class="graph_con"></div>
<div class="graph_con"></div>

scss

.graph_con{
    position: relative;
    display:inline-block;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: conic-gradient(#8b22ff 0% 0%,#dcdfe4 0% 100%);
    transition: 10s;
    p.ranking{
        background: #fff;
        display : inline-block;
        position: absolute;
        z-index: 40;
        top:50%; left:50%;
        width:100px;
        height:100px;
        border-radius: 50%;
        text-align:center; 
        font-size:14px;
        font-weight: bold;
        line-height: 24px;
        transform: translate(-50%, -50%);
        span{
        display: block;
        font-size:18px;
        font-weight: bold;
        padding-top: 32px;
        }
    }
}

js

const chart1 = $('.graph_con').eq(0);
const chart2 = $('.graph_con').eq(1);
const chart3 = $('.graph_con').eq(2);
const donutChart = (percent, classname, color,time,delay=0) => {
  setTimeout(() => {
    let i = 1;
    let chartFn = setInterval(function() {
      if (i <= percent) {
        colorFn(i, classname, color);
        i++;
      } else {
        clearInterval(chartFn);
      }
    },time);
  }, delay);
}
const colorFn = (i, classname, color) => {
  classname.css({"background":"conic-gradient("+color+" 0%"+i+"%,#dcdfe4 0% 100%)"});
}
donutChart(75, chart1, '#c3b859',10);
donutChart(95, chart2, '#02bc77',10,1000);
donutChart(50, chart3, '#ff2366',30);