썸네일 이미지
2021년에도 IE를 지원해야될 끔찍한 이유 제목을 그럴듯하게 지은것 같다. 어짜피 2021년에도 특수목적 사이트를 제외하고 단순히 문서용이라면 IE를 지원해야될것이다. 여기서 특수목적은 Youtube등 IE에서 실행하기에 버거울 수 있거나, 대체재가 없는 컨텐츠 등을 의미하고, 단순히 문서용은 블로그나, 회사 소개 등을 의미한다. 2021년에도 각종 웹 표준을 안지키고, 자바스크립트 엔진 최적화도 안되어 소스 실행이 매우 느린 IE를 지원해야된다는 점은 굉장히 골칫거리일 수 있습니다. 각종 함수를 미지원하여 JS, CSS 파싱(인식)부터 오류가 날 뿐 아니라 실행조차 제대로 안되는 브라우저를 대한민국에서는 아직도 5% 이상이 이용한다는 사실이 믿기지 않을 수 있습니다. statcounter의 통계를 인용해보자면, 2020년 01월 IE 점유율은 ..
여러 웹툴을 만들어보며 느낀점, 프론트엔드 제가 웹툴을 만들고 운영한지는 약 1년 반쯤 되었습니다. 처음 만든게 대소문자 변환툴이었고, 이것저것 쓸때가 많았던 때라서 이왕 만들때 남들도 사용하기 쉽게 웹에서 무설치형 프로그램을 만들어서 쓰자던게 이러한 툴을 만들게된 계기가 되었습니다. 웹브라우저에서 실행가능하다 라는 말이 몇번 나올지는 모르겠지만, 웹브라우저에서 실행가능하다의 의의는 모바일 기기등 웹페이지를 보고 실행할수 있는 거의 대부분의 기기에서 실행이 가능함을 의미합니다. PC 설치보다 간편하고, 쉽게 사용할수 있는 각종 툴을 만들면서 기억나는 내용을 정리해봤습니다. 이 글의 내용은 계속 추가될 수 있습니다. 시작은 간단히 그리고 간단히 만들수있는 각종 툴을 만들고... 글자수 세기 (간단함) 해시 암호 (오픈소스 이용, 간단함) 글자 치환..
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를 제외한 모든 브라우저를 지원하는데도 잘 쓰이는것 같지는 않습니다. 함수에 대해 ..
JS) getComputedStyle로 스타일 가져오기 함수 사용 방식 var style = window.getComputedStyle(element[, pseudoElt]); 첫번째 매개변수에는 element 선택자가 들어갑니다. DOM의 객체를 선택하는 방법은 여러 가지입니다. 두번째 매개변수인 pseudoElt는 생략가능 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 이전에는 pseudoElt 매개 변수가 필요했습니다. 다른 주요 브라우저에서는 pseudoElt 매개변수의 값이 null 인 경우에는 생략해도 됩니다. Gecko는 다른 브라우저의 동작과 일치하도록 업데이트 되었습니다. getComputedStyle은 IE9 이상의 브라우저에서 지원됩니다. HTML hi098123 JS var p = d..
CSS 선택자로 유튜브 링크에 아이콘 넣기 CSS의 선택자 중 HTML의 속성 값(attribute)를 선택할 수 있는 선택자가 있습니다. [] 대괄호 a[href="https://hi098123.tistory.com/"]{ color:blue; } 위의 코드는 a태그의 href속성값이 https://hi098123.tistory.com/ 인 경우를 의미합니다. 정확히 일치하면 a태그의 색상은 파란색이 될것입니다. 링크에 아이콘 넣기 아래의 코드는 *=을 이용하여 포함하는 경우를 지칭합니다. contain, indexOf, instr 등의 함수를 생각해볼 수 있습니다. a[href*="//www.youtube.com"]:before,a[href*="//youtube.com"]:before{ content: '\ec32 '; font-family:..