extension) tabs.getSelected VS tabs.query tabs.getSelected 크롬 16 이후버전에서 공식적으로 제거된 기능입니다. 파이어폭스에서는 이용하실수 없습니다. 구버전기능이라고 보시면 됩니다. tabs.query //chrome chrome.tabs.query({ currentWindow: true, active: true }, function(tabs){ //code: ex) tabs[0].id }); //firefox browser.tabs.query({ currentWindow: true, active: true }, function(tabs){ //code: ex) tabs[0].id }); 크롬 16 에서 tabs.getSelected가 제거되고 생긴 기능 Parameters object queryInfo boolean (option..
Javascript) innerText vs innerHTML 자바스크립트 코드로 div 내부 글 p 태그 내부 등 내부의 글을 가져올때 innerText 또는 innerHTML 을 사용한다. 또는 반대의 경우 가져올때 입력할때 ! 자기소개서에서 글자수를 체크 해줄때 입력 정보를 활용해서 뭔가를 하고싶을때 등등 여러가지 경우에서 내부의 텍스트값을 가져오고 싶을수 있다. 또는 어떤 값을 넣고 싶을때 사용자의 동작에 따라 HTML을 수정하고 싶을때 등 이렇게 반대의 경우로도 이용가능하다. 이 둘의 차이점을 알아보자. JS에서 주의 : 대소문자를 틀리면 브라우저에서 작동을 안할수 있다. 차이를 알아보기 위해 HTML 코드를 다음과 같이 작성했다. 안녕하세요 ㅎㅎ 이렇게 작성하면 결과는? innerText 안녕하세요 ㅎㅎ 사용자에 보이는 텍스트값만을 가져온다. 복사 붙여 ..
HTML) CSS 불러오기 CSS를 HTML에 불러오려면 아래와 같은 코드를 작성해야 된다. link : 연결 이란 뜻!! rel 은 relation , 즉 연결 관계를 의미 합니다. html에 stylesheet로 연결됨을 의미 ​ type은 minetype으로 해당 파일의 성격을 지정합니다. type은 필수가 아니라 생략가능! text/css: text형식의/css파일 을 의미 ​예시 image/png : image형식의/png파일
썸네일 이미지
HTML) 책갈피 만들기 글자로 이동 사진으로 이동 html 에서 목차를 만들거나 특정위치로 사용자를 보내야 될때가 있다. #여기로 이동(글자) 이와 같이 이동하길 원하는 값에 id값을 지정 해주고 글자로 이동하는 링크 와 같이 링크를 #id값 으로 정해주면 된다. #여기로 이동(글자) 이렇게 작성하면 된다. 글자로 이동 사진으로 이동 html 에서 목차를 만들거나 특정위치로 사용자를 보내야 될때가 있다. #여기로 이동(글자) 이와 같이 이동하길 원하는 값에 id값을 지정 해주고 글자로 이동하는 링크 와 같이 링크를 #id값 으로 정해주면 된다. #여기로 이동(글자) 이미지 이렇게 작성하면 된다.
썸네일 이미지
HTTPS 홈페이지 무료로 운영하기 만약 당신이 벡엔드 기능을 포기하면 선택 폭이 넓어진다. 그 중 하나를 소개 할것이다. 벡엔드 기능이라 하면 DB이용한 무언가.. 회원 관리 등을 말한다. 만약, 당신이 지금 스타트업을 하고 있고 + 홈페이지를 구축 하려면 이 글을 끝까지 읽기를.. 홈페이지 저렴하게 운영하는 방법은?? 바로 내가 지금 글을 쓰고 있는 티스토리를 이용하는 것이다. (또는 깃허브 페이지를 이용해서 만들수도 있다.) 티스토리 홈페이지는 자유롭게 수정이 가능해서 다양하게 꾸밀수 있다. 기본 스킨 말고도 직접 소스를 작성할수있다. https://tistory.github.io/document-tistory-skin/ 웹 소스코드(html,css,js)를 만질수 있는 사람이라면 누구나 쉽게 제작할수 있다. 이 치환자가 대부분 기능..
썸네일 이미지
크롬 확장 프로그램 분석하기 이번엔 크롬 확장 프로그램을 분석해 보려한다. 먼저 프로그램을 한번 사면 소스코드까지 분석이 가능해져 개발자 입장에서는 확장프로그램 개발이 꺼려질수 있다. 왜냐면 사용료로 $1 에 파는거랑 소스코드를 $1 에 파는거랑은 느낌이 다르니까.. 구글이 악성 프로그램을 방지하고자 만든 obfuscation 금지 정책은 이러한 부작용도 있다. 이 부분은 딜레마다 사용자를 먼저 생각하느냐 개발을 먼저 생각하느냐 가장 좋은 방법은 구글만 코드를 보고 사용자에겐 난독화 하여 설치 되면 된다. 분석 인력이 많이 필요하겠지만 개발자들이 프로그램을 안 만든다 > 문제 사용자들이 위험하다 > 문제 분석 인력이 많이 필요하다 > 문제 이런 문제에서 빠져나갈 구멍은 거의 없는거 같다. 이제 분석을 해보자 먼저 준비물은 : < 크..
HTML 내용을 한글 파일로 다운로드 하기(Js방식 / 테스트 가능) 예제 코드 넣기 한글(.hwp) 다운로드 워드(.doc) 다운로드 한가지 주의: hwp다운로드 후 열때 UTF-8으로 여셔야 됩니다. 웹브라우저 상에서는 UTF-8를 메인으로 사용 하기 때문에 자바스크립트로 hwp 생성, 자바스크립트 hwp만들기,자바스크립트 문서 만들어 다운 더보기 hwp 파일을 직접 만들어서 다운이 가능한 경우가 안보였다. 그래서 만들게된 자바스크립트로 hwp파일 생성하기 소스 보통은 php 같은 서버기반 프로그램으로 만들던데 웹에서 돌릴수도 있다. 소스코드 예제 코드 넣기 한글(.hwp) 다운로드 워드(.doc) 다운로드 한가지 주의: hwp다운로드 후 열때 UTF-8으로 여셔야 됩니다. 웹브라우저 상에서는 UTF-8를 메인으로 사용 하기 때문에
썸네일 이미지
페이지 로딩속도를 빠르게 <link rel="preload"> 활용 이 페이지를 운영하면서 페이지 소스에는 크게 신경을 안썻다. 티스토리에서 제공한 기본스킨이니 잘 만들었겠거니 근데 좀 들여다 보다 보니 이상한게 보인다.. padding-top: 0px; padding-left: 34px; padding-right: 34px; padding-bottom: 0px; 이런식으로.. padding: 0px 34px; 이런식으로 쓰면되는걸 그러던 중 웹을 둘러보다가 사이트 속도측정이 보이길래 해보았다 ㅎ https://www.webpagetest.org WebPageTest - Website Performance and Optimization Test Select Test Location Moto G (gen 4)Alcatel 1X (Android Go)Moto G (gen 1..