note

html5 fileReader를 검색하면서 내용이 생각보다 간단하여 정리해둔다..이미 정리된 글들이 있지만 익혀둘겸 하나씩 해본다.. 감성프로그래밍(?)님의 블로그를 참고. 대부분 브라우저도 지원하는걸 보니 쓰기좋아보인다. https://caniuse.com/#feat=filereader 크게 3가지만 정리... 1. 텍스트파일 읽기2. 이미지파일 읽기3. 이미지파일 읽어 썸네일생성 1. 텍스트파일 읽기 pre태그는 단순히 읽은파일의 텍스트를 출력하기 위한영역.input태그에서 accept="text/*" 로 설정하면 텍스트기준으로 선택할수있는데선택창에서 모든파일보기하면 다른파일도 읽히긴한다. 이미지를 읽을경우 깨진다..readAsText메소드로 읽어둔 후 로드가 완료되면 뿌려준걸 볼 수 있다. 2. 이..

김불꽃이 준 URL에서 회원가입쪽 소스 구경하다가 간단히 써먹을만해 보여서 메모,, 소스 중간에 style로 width:calc(40% - 28px); 부분이 눈에 띄네요,, 써먹어본적은 없었는데 calc쓰면 퍼센트에 px를 계산할수 있나보군요,, 프로모션이나 회원가입 시 사용자 이메일 받는경우 jquery script @ 직접입력 naver.com daum.net hanmail.net gmail.com nate.com yahoo.co.kr hotmail.com dreamwiz.com empal.com // js $(function () { $(".email_sel").change(function () { var selected = $(this).children("option:selected").val(..

PHP 테스트해보기 위하여 bitnami 설치하여 APM 설치함.설치 시 도구들도 선택하여 추가설치가 가능한데, phpmyadmin도 체크하여 설치 ㅋ 현재 bitnami를 이용하여 설치 된 PHP버전은 7.1 MYSQL은 5.7 이다... mysqli확장 : php5이상에 대응하며 mysql 4.1이상 잘 지원된다고 한다... connect_errno) { die('Connect Error: '.$mysqli->connect_error); } // 쿼리문 전송 if ($result = $mysqli->query('SELECT * FROM `test_tb`')) { echo $result->num_rows.' '; // 레코드 출력 while ($row = $result->fetch_object()) {..

vue.js 공부하려고 메모해두는 부분인부분인 부분...IntroductionECMAScript 2015로도 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전입니다. ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트이기도 합니다. 현재 주요 JavaScript 엔진들에서 ES6 기능들을 구현 중에 있습니다. ECMAScript 6 언어의 전체 스펙을 확인하시려면 ES6 Standard10를 확인하세요. ECMAScript 6 에 추가된 기능ArrowsArrows(화살표) 함수는 => 문법을 사용하는 축약형 함수입니다. C#, Java 8, CoffeeScript의 해당 기능과 문법적으로 유사합니다. A..

1. w2ui grid에서 editable 사용하여 일괄수정 개발 필요하다.. - 수정 전 그리드 - 수정 후 그리드 w2ui grid에서는 edit필드에 변화가생기면 셀 오른쪽상단에 빨간표시가 생긴다. (우리가게 > 우리가게2로 수정한걸 기억 ㄱㄱ.)이후 변화된값을 가져오기위하여 getChanges() 메소드를 사용하면.. w2ui['grid'].getChanges(); 변화 된 셀의 정보만 가져와서 수정처리를 해주기 곤란하지않나..(모든셀의정보를 넘겨 수정프로시저를 태워서 변화되지않은 나머지 셀의 정보도 필요) 다행히 getChange()메소드를 통해 얻은 row키값을 알고있어서 아래와 같이 조지면 일단 row전체정보 와 수정된정보 를 얻을 수 있다. var getchanges = w2ui['grid..

화살표이미지에 통통뛰는효과 주기위함 #load-layer #view-layer #btn-arrow { display:block; /* etc...style */ animation: bounce .5s infinite alternate; -webkit-animation: bounce .5s infinite alternate; } @keyframes bounce { from { transform: translateY(0px); } to { transform: translateY(-15px); } } @-webkit-keyframes bounce { from { transform: translateY(0px); } to { transform: translateY(-15px); } }

css3 간단 페이지 로딩화면 HTML : Loading… CSS : /* Absolute Center Spinner */ .loading { position: fixed; z-index: 999; height: 2em; width: 2em; overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0; display:none; } /* Transparent Overlay */ .loading:before { content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); } /* :not..

리스트 > 변경값만을 빼내기위해서 사용 function isEquivalent(a, b) { var aProps = Object.getOwnPropertyNames(a); var bProps = Object.getOwnPropertyNames(b); if (aProps.length != bProps.length) { return false; } for (var i = 0; i < aProps.length; i++) { var propName = aProps[i]; if (a[propName] !== b[propName]) { return false; } } return true; } //사용 예 if(!isEquivalent(objectA[i], objectB[i])){ //오브젝트가 다르면 처리하는 구..

이미지를 넣고,, 페이지에선 줄여서 보여줄경우,, FIREFOX에서 흐리게 번지는,,(blur) 거임 ㅋ FF에선 IMAGE-RENDERING 기본값이 AUTO가 아닌가봄 ㅋ 그래서 AUTO로 하면됨.. img { image-rendering: -moz-auto; /* Firefox */ image-rendering: -o-auto; /* Opera */ image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */ image-rendering: auto; -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ }

원래는 src속성을 attr해주기 전에 변수에 attr로 속성을가져와서 그 스트링값을 수정 후 다시 지정해주었는데 attr메소드 내부에서 match로 체크해주고 replace하면서 return시켜주면 코드도 간결해지고 더 보기 좋은것같다. HTML : 위와 같은 구조에서 a태그 클릭 시 img이미지를 on,off 토글 시키고 싶을 때,, JS : $("a").on("click", function (e) { var $this = $(this); // element a $this.find(">img").attr("src", function (index, attr) { if (attr.match('_on')) { return attr.replace("_on.png", "._off.png"); } else { ..