썸네일 이미지
2021년에도 IE를 지원해야될 끔찍한 이유 제목을 그럴듯하게 지은것 같다. 어짜피 2021년에도 특수목적 사이트를 제외하고 단순히 문서용이라면 IE를 지원해야될것이다. 여기서 특수목적은 Youtube등 IE에서 실행하기에 버거울 수 있거나, 대체재가 없는 컨텐츠 등을 의미하고, 단순히 문서용은 블로그나, 회사 소개 등을 의미한다. 2021년에도 각종 웹 표준을 안지키고, 자바스크립트 엔진 최적화도 안되어 소스 실행이 매우 느린 IE를 지원해야된다는 점은 굉장히 골칫거리일 수 있습니다. 각종 함수를 미지원하여 JS, CSS 파싱(인식)부터 오류가 날 뿐 아니라 실행조차 제대로 안되는 브라우저를 대한민국에서는 아직도 5% 이상이 이용한다는 사실이 믿기지 않을 수 있습니다. statcounter의 통계를 인용해보자면, 2020년 01월 IE 점유율은 ..
여러 웹툴을 만들어보며 느낀점, 프론트엔드 제가 웹툴을 만들고 운영한지는 약 1년 반쯤 되었습니다. 처음 만든게 대소문자 변환툴이었고, 이것저것 쓸때가 많았던 때라서 이왕 만들때 남들도 사용하기 쉽게 웹에서 무설치형 프로그램을 만들어서 쓰자던게 이러한 툴을 만들게된 계기가 되었습니다. 웹브라우저에서 실행가능하다 라는 말이 몇번 나올지는 모르겠지만, 웹브라우저에서 실행가능하다의 의의는 모바일 기기등 웹페이지를 보고 실행할수 있는 거의 대부분의 기기에서 실행이 가능함을 의미합니다. PC 설치보다 간편하고, 쉽게 사용할수 있는 각종 툴을 만들면서 기억나는 내용을 정리해봤습니다. 이 글의 내용은 계속 추가될 수 있습니다. 시작은 간단히 그리고 간단히 만들수있는 각종 툴을 만들고... 글자수 세기 (간단함) 해시 암호 (오픈소스 이용, 간단함) 글자 치환..
썸네일 이미지
웹브라우저 한국어체크 ko-KR이 전부가 아니다? (ko) 웹브라우저에서 한국어 체크를 할때, 서버 또는 클라이언트에서 실수할 수 있는 내용이 한개가 있습니다. 일반적으로 대부분의 브라우저에서는 한국어를 ko-KR로 표시를 하는데, 개발시 한가지 실수를 할 수 있습니다. (실제 한국 방문자가 제 많은 사이트의 분석 자료를 보면 90%이상이 ko-KR입니다.) 대부분의 브라우저에서 브라우저 언어를 표시하거나, 서버에 알려줄때 ko-KR 방식의 타입으로 사용하기 때문에 잘 몰랐던 경우에는 언어 확인이 필요한 경우 ko-KR만 처리할 수 있습니다. 그러나 ko방식으로 표기하는 브라우저가 있습니다. Edge브라우저가 바로 그렇습니다. 오래전에 언어처리를 할 때 아무생각없이 ko-KR만으로 한국어를 분류한적이 있었는데, 일부 사용자에게서 제대로 분류가 안되는 경우가 있었..
PHP) glob 함수가 빈 배열을 반환 하는 경우? PHP에서 폴더 경로를 검색하려할때 glob 함수를 쓸 수 있습니다. 예를 들어, 아래와 같이 사용시 $files = glob("path/to/file/*"); //['path/to/file/1.txt','path/to/file/2.txt','path/to/file/3.txt'] path to file 1.txt 2.txt 3.txt 위와 같은 문서 경로가 있을때 아래 내용을 배열로 반환합니다. path/to/file/1.txt path/to/file/2.txt path/to/file/3.txt 그런데 [ ] { } 같은 대괄호,중괄호 기호가 포함되어있다면 검색이 안되고 빈 배열이 반환되는 경우가 있습니다. $files = glob("path/to/[file]/*"); // [] [ ] { } 를 이스캐..
CSS) nth-child, nth-of-type 다양한 활용방법 CSS에서 nth-child를 사용하면 쉽게 n번째 요소를 선택 가능하다. li:nth-child(2) { color: lime; } /* 4,8,12,16 ... */ div:nth-child(4n) { color: lime; } 선착순 1등, 2등, 3등에 아이콘을 넣고자 할때 꼭 아래 코드처럼 li가 아니어도된다. div등의 요소도 당연히 선택할 수 있다. li:nth-child(1):before { background:url('이미지 주소1 - hi098123'); } li:nth-child(2):before { background:url('이미지 주소2 - hi098123'); } li:nth-child(3):before { background:url('이미지 주소3 - hi098123'); }..
웹브라우저에서 와이파이 감지하기 만약, 영상을 WIFI환경에서만 자동재생시키고 싶을때 웹브라우저에서 와이파이임을 확인해야할 때가 있다. 예전에 작성해둔 코드인데 올린건 오늘 올렸다. function isWIFI() { var conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection || 0; if(!conn){return -1;} if(typeof(conn.type)!="undefined"){ switch(conn.type){ case "wifi": return 3; case "cellular": return 0; default: return -1; } }else if(typeof(conn.saveData)!="undefined"){ if(c..
썸네일 이미지
구글 검색 더 눈에 띄게 꾸미기 FAQ편 구글 검색에서 조금 더 눈에 띄게 글을 작성할 수 있습니다. 다만 티스토리 에디터에서 지원하지 않기 때문에 복잡합니다. 난이도 상 : 처음부터 끝까지 HTML로 작성 또는 전용 편집기 사용이 필요함 중 : 스키마 스크립트(application/ld+json) 작성시 가능합니다. 기능 설명 구글 검색결과내에서 상호작용이 가능한 QnA 기능을 넣을 수 있습니다. 웹사이트를 열지않고도 내용이 일부 표시되므로 검색하는 사람이 페이지를 열지 않고도 필요한 정보가 있는지 확인 가능하여 페이지 내용이 원하는 글이 아니라고 생각되면 안 들어갈 수 있습니다. 크기가 일반 검색보다 눈에 띄어 더 잘들어올수도 있습니다. 결론적으로는 좋은 컨텐츠를 작성해야만 유입에 도움이 됩니다. (안 좋은 컨텐츠라고 구글이 판단 시 해당 ..
JS) AudioContext 음소거(mute) 브라우저에서 AudioContext를 활용할때 gainNode를 이용해서 오디오의 볼륨을 조절할 수 있습니다. HTML의 태그 보다 훨씬더 많은 작업을 할 수 있습니다. 유튜브 영상을 올리고 BGM을 중간에 넣을때 어떤 소리를 더 크게 넣나 섞는 기능도 있는데 해당기능에 AudioContext가 활용될겁니다. 아래와 같이 퍼센트라고 생각하면 좋습니다. gainNode.gain.value : 1 0 = 0 % 1 = 100 % 2 = 200 % 이 글은 gainNode mute가 안될때 해결방법을 알려주는 글이 될수도 있겠습니다. 공식적으로 함수 설명이 잘 되어있는게 아니라 이런 함수가 있다 정도로만 작성된 문서가 많아 IE를 제외한 모든 브라우저를 지원하는데도 잘 쓰이는것 같지는 않습니다. 함수에 대해 ..