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:..
CSS) list-style 다양한 종류 (list-style-type) list-style-type 표준으로 제공되는 스타일을 우선적으로 알아 볼 예정입니다. none HTML 삽입 미리보기할 수 없는 소스 list-style-type: none none는 아무 기호가 없습니다. disc HTML 삽입 미리보기할 수 없는 소스 list-style-type: disc disc는 기본값으로 많은 목록에 쓰입니다. circle HTML 삽입 미리보기할 수 없는 소스 list-style-type: circle; circle은 가운데가 비어있는 원 모양 입니다. square HTML 삽입 미리보기할 수 없는 소스 list-style-type: square; square은 정사각형 모양입니다. decimal HTML 삽입 미리보기할 수 없는 소스 list-style-type: deci..
썸네일 이미지
CSS content 깨지는 현상(주의점) CSS content는 좋은 기능이다. :after 이나 :before 등에서 사용가능하며 HTML또는 JS없이도 글을 작성가능한 기능이다. 다만 이걸로 글을 쓰기에는 SEO에는 부적절하다. 그런데, 이 content는 영어+숫자가 아닌 일반기호, 한글등은 가끔 깨진다. ">" 같이 일반적으로 사용하는 기호도 새로고침 여러번 하다보면 가끔씩 깨진다. 이런 버그가 있어서 CSS를 작성시 유니코드문자로 작성할 수 있으며, 이렇게 작성해야 안깨진다. 그냥써도 거의 대부분(99% 이상)에서 안깨지지만 아주 가끔(1% 미만) 깨질수있다. 문자로 작성한 글은 div#main>div.input:after{ content: '또는 클릭해서 파일을 선택하실 수 있습니다.'; } 아래와 같이 유니코드로 변환해주는게 좋다...
HTML) Link, Script 태그 integrity 옵션 integrity 라는 옵션도 있다. 태그나 특정 버전의 파일이 변경되거나 변조된 경우 막을 수 있다. 이를 이용해 악의적인 스크립트 변조를 막을수도 있다. 지원하는 해시는 sha256 sha384 sha512이며 이 옵션은 IE는 적용되지 않습니다. 요즘 많은 웹사이트에서 CDN을 사용하나, 만약 CDN보안이 뚫리거나 CDN내용을 변조한다면(게시자의 코드수정 포함), CDN을 사용하는 모든 웹사이트에 아래 예시와 같은 공격을 할 수 있을겁니다. (예) CDN의 JS내용을 변조하여 접속한 사이트의 정보를 탈취(XSS방지가 대부분되어있으므로 최신 브라우저에서는 안됨) 또는 악성 스크립트 실행(크립토재킹, 악성사이트로 리다이렉트, 피싱사이트로 리다이렉트 등) CDN이 뚫릴일은 희박하지만 보안은 가능성이 0%..
PHP8 JIT 업데이트후 차이 예상은? PHP8이 2021년쯤 나올 예정입니다. JIT 컴파일러를 내장할것으로 발표되어 많은 PHP 개발자가 기대를 하고있습니다. 지금 PHP7의 속도도 충분히 올라와서 실제 서비스를 처리하는데 큰 문제없습니다. PHP에 JIT(Just In Time)이 달리면 얼마나 빨라질까요? JIT(Just In Time)이 필요한 이유 기존의 PHP에는 String을 불러와서 스크립트를 해석하고 실행했습니다. 당연히 실행마다 해석하니 실행에 시간이 더 걸렸죠.. 그래서 실행을 한번하면 임시 저장하여 다시 실행할때 속도를 높이는 opcache같은 플러그인이 있었습니다. 다만, 호환문제로 오류가 나는 경우도 있었습니다. JIT은 String을 재해석하는게 아닌 컴퓨터가 더 빠르게 실행할수있는 Byte코드로 변환해두어 실행하..
Pure CSS Side Toggle Menu CSS만으로도 Side 메뉴(클릭 및 닫기 가능한)를 만들 수 있을것 같아서 만들어봤는데 성공했다. IE9+ 로 IE9 이상의 모든 브라우저는 지원가능하다. 원리부터 말해보자면 label과 checkbox를 활용하였다. CSS로 아래와 같이 표현가능하다. input[id="ch"]:checked + label{ /* CSS if checked */ } input[id="ch"] + label{ /* CSS if not checked */ } label 안에 기본적으로 보여줄 메뉴 버튼과 sidemenu를 넣었다. menu menu1 menu2 menu3 menu4 #menu_toggle_c 는 display:none;를 하면 된다. 테스트시 어떻게 작동하나 보여주기 위해 적용은 안해놨다. 최종으로 닫기 ..
IE ')'가 필요합니다. 해결하기 IE에서만 종종 ')'가 필요합니다. 오류가 뜬다. 웹 페이지를 건드리다 보면 IE만 안되는 경우를 많이 볼수있는데 이런것 때문에 개발자들이 IE를 싫어한다. 표준을 안지키는 웹브라우저! 위의 코드에서 왜 오류가 떳는지 감이 왔을것이다. parameter의 기본 값 설정시 IE는 ')'가 필요합니다. 오류와 함께 해석을 중단해버린다. 아래와 같은 방법으로 해결가능하다. function function_hi098123(args) {// IE 정상 실행 args = args || '기본 값 형태는 알아서.. true, false, 0, 1, string'; console.log(args);//console에 찍어보자 } function_hi098123(); function_hi098123('hi098123'..