AWS ubuntu 12.10 - nodejs 설치

sudo apt-get install nodejs
명령으로 인스톨을 하면 0.6.x 버전의 nodejs 가 설치된다

$ sudo add-apt-repository ppa:chris-lea/node.js
$ sudo apt-get update
$ sudo apt-get install nodejs npm

repo를 추가하고 인스톨하면 0.8.x 버전이 인스톨된다. :)

forever 와 forever-monitor도 설치하자.

forever는 어플의 프로세스가 죽으면 자동으로 되살리는 녀석이다
(참고 : http://entireboy.egloos.com/4751324 )



Facebook 코멘트 플러그인 가로 100% 만들기

Facebook comment plugin

Facebook comment plugin 을 사용하려고 하면 width 가로 크기를 지정하게 되어있다. 가로 크기는 px 단위로만 지정할 수 있게 되어있는데 가로를 100%로 하고 싶을때는 이와같은 방법을 써보자.

<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="200"></div>

설정으로는 data-width="200" 이 되어있다. 이 커스텀 데이터인 data-width 는 페이스북의 코멘트가 iframe으로 나타날때 인라인 스타일로 style="width:200px" 의 값을 셋팅한다. 하지만 이 data-width와 인라인 스타일이 몇으로 설정되었던 상관없이 CSS로 재정의 하며 !important로 인해 CSS의 width 값이 더 높은 순위를 갖게 만들어 봅시다.

다음과 같은 스타일시트를 먹여주자

CSS

.fb-comments {width:100% !important}.fb-comments > span {width:100%  !important}.fb-comments > span > iframe {width:100%  !important}

이거면 끝 :D

테스트는 http://jsfiddle.net/sZ5pT/1/


링크 자동 새창 연결하기

링크 자동 새창 연결하기

HTML 페이지 안에 있는 모든 링크 중 외부 링크 ( 내 도메인이 아닌 다른 링크 ) 일 경우 새창에서 여는 간단한 방법

jQuery를 이용해서 만든다.

HTML

<a href="http://example.com">외부링크</a><br /><a href="/">내부링크</a>

JavaScript

$(document.links).filter(function() {    	return this.hostname != window.location.hostname;}).attr('target', '_blank');​

친절한 설명 :

$(document.links) // HTML 문서에서 모든 링크들	.filter(function() { // jQuery의 filter 메소드는 조건에 맞는 내용을 필터링    		return this.hostname != window.location.hostname 	}) // 필터링의 조건. 접속한 URL주소의 도메인과 다른 경우일때만 	.attr('target','_blank'); // 링크 태그 target 속성에 _blank 를 넣음

예 : http://jsfiddle.net/7j2mk/1/


IE 버전에 따라 CSS hack 을 사용하지 않고 스타일 처리하기

IE 버전에 따라 CSS hack 을 사용하지 않고 스타일 처리하기

HTML 마크업의 가장 상위인 html 태그에 CC를 이용한 클래스를 사용

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--><head>  <title>welcome to OXch</title></head><body>...</body></html>

Boilerplate 에서 나온 HTML base template 이용, 예전 버전에서는 ie6, ie7, ie8 등의 클래스를 사용했지만 지금은 CC와 비슷한 형태의 클래스 명으로 사용하고 있다 ( lt-ie7, lt-ie8, lt-ie9 )

이처럼 클래스를 주고 나면 css 에서 핵을 사용하지 않고 IE 브라우저별로 대응이 가능해진다.

예를들어 IE6 에서만 margin 값을 다르게 줘야 한다면 css 의 셀렉터를

기본

.hello-box {margin:20px; width:200px; height:200px; background:green;}

인 형태를 IE6에서는 margin을 30px 로 줄 때

.hello-box {margin:20px; width:200px; height:200px; background:green;}.lt-ie7 .hello-box {margin:30px}

이와같이 html 태그에 부여한 클래스를 이용해 hello-box 라는 클래스를 재정의 하면 CSS에서 익스플로러 버전에 따라 css hack 을 사용하지 않고 깔끔하게 작업할 수 있다.


컨디셔널 코멘트

컨디셔널 코멘트

Conditional comments는 IE(익스플로러)에서만 작동한다. 그렇기 때문에 IE의 렌더링을 CC를 통해 제어하면 IE 버전에 따라 대응할 수 있다.

<!--[if IE 6]><p>IE6 으로 접속중.</p><![endif]-->

사용방법

<div class="browser-test"><!--[if IE]><p>이 CC는 모든 IE에서 출력됩니다.</p><![endif]--><!--[if IE 6]><p>이 CC는 IE 6</p><![endif]--><!--[if IE 7]><p>이 CC는 IE 7</p><![endif]--><!--[if IE 8]><p>이 CC는 IE 8</p><![endif]--><!--[if IE 9]><p>이 CC는 IE 9</p><![endif]--><!--[if gte IE 8]><p>이 CC는 IE 8 이상 ( IE8을 포함한 상위 버전 )</p><![endif]--><!--[if lt IE 9]><p>이 CC는 IE 9미만</p><![endif]--><!--[if lte IE 7]><p>이 CC는 IE 7 이하</p><![endif]--><!--[if gt IE 6]><p>이 CC는 IE 7 이상 ( IE6보다 상위 버전 )</p><![endif]--><!--[if !IE]> --><p>이 CC는 IE가 아닐경우 나타납니다.</p><!-- <![endif]--></div>

이와 같이 사용할 수 있다. 테스트는 http://jsfiddle.net/64V2w/1/ IE브라우저와 크롬,파폭,사파리,오페라 등으로 접속했을 때 보이는 화면을 참고.

syntax

  • gt : greater than ( 보다 상위 )
  • gte : greater than or equal to ( 같거나 보다 상위, 이상 )
  • lt : less than ( 보다 하위 )
  • lte : less than or equal to ( 같거나 보다 하위, 이하)

IE7 이하의 브라우저에 경고문구 보이기

<!--[if lte IE 7]>    <p class="ie-warning">오래된 브라우저네요. <a href="http://browsehappy.com/">여기</a> 또는 <a href="http://www.google.com/chromeframe/?redirect=true">크롬브라우저</a>를 사용해 보세요. 더 좋은 웹서핑을 할 수 있어요. http://oxch.net</p><![endif]-->

IE 버전에 따라 스타일시트 로드

<!--[if IE 6]><link rel="stylesheet" href="style.ie6.css" /><![endif]--><!--[if IE 7]><link rel="stylesheet" href="style.ie7.css" /><![endif]--><!--[if IE 8]><link rel="stylesheet" href="style.ie8.css" /><![endif]-->


1