trycode

FOUC(Flash Of Unstyled Content) 외부의 CSS가 불러오기 전에 잠시 스타일이 적용되지 않은 웹 페이지가 나타나는 현상이다. 이 현상은 스타일이 적용되지 않은 웹 페이지가 스타일이 적용된 웹 페이지로 변화하는 것이다. 웹 브라우저가 웹 페이지에 스타일 정의를 부르고 적용할 때 보여지는 부분을 최대한 빨리 수정하지만, 이 변화는 짧지 않은 시간 동안 나타나므로 사용자는 페이지에 오류가 있다는 생각을 하게된다. "FOUC는 CSS와 HTML의 버전 변화와는 관계가 없으며, 이것은 브라우저의 문제로 보인다." 하지만 이 문제는 브라우저에서 큰 문제가 아닌 것으로 보이는데, 브라우저 내에 프로그램된 우선 사항들이 페이지를 보여줄 때 아래와 같은 방식으로 처리하기 때문이다. 브라우저는 웹 ..

Nodemailer https://nodemailer.com/about/ Nodemailer :: Nodemailer Nodemailer Nodemailer is a module for Node.js applications to allow easy as cake email sending. The project got started back in 2010 when there was no sane option to send email messages, today it is the solution most Node.js users turn to by default. Nodem nodemailer.com Node.js 에서 메일을 쉽게 보내주게하는 모듈이다. 1. 메일 서버 이용 - 편의상 구글 계정으로 메일 ..

크로스 브라우징 window.width / window.height function 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 script Element.offsetHeight - 엘리먼트 높이값+padding-top+padding-bottom+border-top+border-..

CSS 100%로 채우기 화면에 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){ .targ..

익스프레스 기본 서버 구동. 기본 프로젝트 폴더를 하나 만들어준다. 1. 터미털에서 그 프로젝트 폴더로 이동 - cd 프로젝트경로 ( IDE 터미널같은 경우 프로젝트 폴더에서 기본 시작한다 ) 2. package.json생성을 시켜준다. npm init 3. express 설치 npm install express 4. server.js 파일 만들고 아래와 같은 내용 코딩. require() : 코드에 모듈을 호출할 때 사용. NPM 애플리케이션의 최상위 폴더 아래 node_modules라는 폴더에 외부 모듈을 설치한다.외부모듈을 사용하려면 핵심 모듈을 require로 호출하면 된다. 노드는 핵심 모듈 폴더에서 해당 모듈을 찾은 다음에 node_modules 폴더 내부에서 모듈을 찾으려 시도한다. requ..

path 모듈 ( nodejs ) path 모듈 - http://nodejs.sideeffect.kr/docs/v0.10.0/api/path.html Path Node.js v0.10.0 Manual & Documentation Path# Stability: 3 - Stable This module contains utilities for handling and transforming file paths. Almost all these methods perform only string transformations. The file system is not consulted to check whether paths are valid. Use require('path') to use nodejs.sideef..

익스프레스 요청, 응답객체 1. 애플리케이션 객체 - app.set( name, value ) : 익스프레스가 구성에서 사용할 환경 변수를 설정한다. - app.get( name ) : 익스프레스가 구성에서 사용할 환경 변수를 가지고 온다. - app.engine( ext, callback ) : 특정 파일 타입을 출력하기 위해 필요한 템플릿 엔진을 정의한다. - app.locals : 애플리케이션 수준의 변수를 출력하기 위해 모든 템플릿에 전송한다. - app.use( [path], callback ) : 서버로 전송된 HTTP요청을 처리하기 위해 익스프레스 미들웨어를 생성한다. 옵션으로 특정 경로에 응답하는 미들웨어를 등록할 수도 있다. - app.VERB(path, [callback...], cal..

handlebars 기본 1. express-handlebars 설치( 터미털에서 ) npm install express-handlebars --save 2. handlebars 등록 var exphbs = require('express-handlebars'); //여기서 매개변수 app은 var app=express(); 로 익스프레스앱을 뜻함. module.exports=function(app) { //handlebars template app.engine('handlebars', exphbs.create({ defaultLayout:'main', // 디폴트레이아웃사용. layoutDir:app.get('views')+'/layouts', //레이아웃 파일( handlebars ) 경로 partia..