FOUC(Flash Of Unstyled Content)는 외부의 CSS가 불러오기 전에 잠시 스타일이 적용되지 않은 웹 페이지가 나타나는 현상이다. 이 현상은 스타일이 적용되지 않은 웹 페이지가 스타일이 적용된 웹 페이지로 변화하는 것이다. 웹 브라우저가 웹 페이지에 스타일 정의를 부르고 적용할 때 보여지는 부분을 최대한 빨리 수정하지만, 이 변화는 짧지 않은 시간 동안 나타나므로 사용자는 페이지에 오류가 있다는 생각을 하게된다. "FOUC는 CSS와 HTML의 버전 변화와는 관계가 없으며, 이것은 브라우저의 문제로 보인다." 하지만 이 문제는 브라우저에서 큰 문제가 아닌 것으로 보이는데, 브라우저 내에 프로그램된 우선 사항들이 페이지를 보여줄 때 아래와 같은 방식으로 처리하기 때문이다.브라우저는 웹 ..
크로스 브라우징 window.width / window.heightfunction getWindowWidth() { return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; } function getWindowHeight() { return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; } Element height 1. dom scriptElement.offsetHeight - 엘리먼트 높이값+padding-top+padding-bottom+border-top+border-bo..
Nodemailer - https://nodemailer.com/about/ Node.js 에서 메일을 쉽게 보내주게하는 모듈이다. 1. 메일 서버 이용- 편의상 구글 계정으로 메일 서버로 고고 - 보통 계정당 500 명에게 보낼 수 있다 했는데 200명 정도가 max인듯 - 메일 서버로 사용할 구글 계정을 생성 했다면 아래 주소로 들어가 보안수준이 낮은앱 > '사용함' 으로 설정해야 테스트 메일을 받아볼 수 있다. https://myaccount.google.com/lesssecureapps?pli=1 2. 관련 모듈 설치npm install nodemailer nodemailer-smtp-pool --save3. mailer.js var nodemailer = require('nodemailer');..
화면에 100%로 채우기 css.target{ max-width:none; max-height: 100%; min-width: 100%; min-height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translateX(-50%) translateY(-50%); /* 만약에 다른곳에서 상속되어 width/height가 설정된다면 아래처럼 덮어씌우자. width:auto; height:auto; */ } /*16:9의 비율로 와이드 화면이 된다면 아래처럼 미디어쿼리로 값변경*/ @media (min-aspect-ratio: 16/9){ .target{max-height: ..
request https://www.npmjs.com/package/request simple to use var request = require('request'); request('http://www.google.com', function (error, response, body) { // Print the error if one occurred console.log('error:', error); // Print the response status code if a response was received console.log('statusCode:', response && response.statusCode); // Print the HTML for the Google homepage. consol..
node-rest-client https://www.npmjs.com/package/node-rest-client Simple HTTP GET//node-rest-client호출 var Client = require('node-rest-client').Client; var client = new Client(); //1. 등록없이 바로 사용 client.get("http://remote.site/rest/xml/method", function (data, response) { // parsed response body as js object console.log(data); // raw response console.log(response); }); //2. 사용자 메소드 등록 후 호출하여 사용 clie..
몽고 셸에 접근하기 위해서는 아무 터미널이나 mongo명령어를 실행하면 된다.(단 서버에 접속하는 것이기에 해당 실행하는 장비에 mongod 서버가 구동 중이어야 한다. ) mongo- 기본적으로 로컬 서버에 접속하고 test데이터베이스를 사용하게 된다. show dbs- 서버의 모든 데이터베이스 목록을 출력 use imgView- 디비목록에 imgView 이 있다라고 했을때 해당 디비를 사용.- 존재하지 않는 데이터 베이스를 호출하면 자동적으로 생성한다.- switched to db imgView 라는 멘트가 나오면서 사용 테이블목록이 바뀌게 된다. show collections
path 모듈 - http://nodejs.sideeffect.kr/docs/v0.10.0/api/path.html path.resolve([from ...], to) - to를 절대경로로 변환한다. to가 절대경로가 아니면 절대경로를 찾을 때까지 from 아규먼트들을 우측에서 좌측의 순서로 앞에 이어붙힌다. 모든 from 경로를 사용한 후에도 절대경로를 찾지 못하면 현재 워킹 디렉토리를 사용한다. 최종 경로는 정규화되고 경로가 루트 디렉토리로 처리되지 않는한 마지막 슬래시는 제거한다. 문자열이 아닌 아규먼트는 무시한다.이는 쉘에서 cd 명령어를 순서대로 실행한 것과 같다. path.normalize(path) - '..'와 '.' 부분을 처리해서 문자열 경로를 정규화한다. 슬래시가 여러 개 있는 경우 ..
- Total
- Today
- Yesterday
- JsDoc
- 아이콘 폰트 만들기
- 태그
- 내장요소
- cordova
- for of 구문
- react-router-dom
- CSS
- Angular
- 리프래시토큰
- Intrinsic
- 반복문
- git
- icon font
- interceptors
- react
- RefreshToken
- IntrinsicElements
- git checkout -b
- Aptana
- anime.js
- svg 폰트
- svg모션
- vue-router
- 코도바
- React.StrictMode
- Vue3
- 앵귤러
- svg icon font
- 자바스크립트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |