기본적으로 Ajax로 페이지를 요청할 경우 주소창의 URL은 변경되지 않는다.
그런 이유로 페이지를 URL을 복사해서 지인에게 알려준다던지 기존의 정적인 페이지의 URL 복사 기능이 제한 되었다.

이 부분을 보완하는 방법이 #hash를 이용한 클라이언트 라우팅이다.

[구글 Gmail은 #hash를 적극적으로 사용하는 대표적인 서비스다]

[핵심요소]

// 현재 해쉬 정보를 확인.
console.log(location.hash); 

// 현재 보는 페이지에서 해쉬가 변경되면 동작하는 이벤트.
$(window).bind('hashchange', function() { 
  // do something 
});

[기본적인 구현 개념]

• 페이지가 로드될때 해쉬가 있다면 그 해쉬에 해당하는 페이지를 Ajax 요청 처리.
• 동일한 도메인에서 해쉬가 바뀌면 hashchange 이벤트가 발동하는데 그 경우 Ajax요청 처리.

[얻어 생긴 유용한 기능]

• hash가 생겨 Ajax 호출 페이지라도 자연스럽게 뒤로가기, 앞으로가기 기능이 된다.

[구현 화면 보기]

[참고]

• hashchange 이벤트

투명 gif, png 이미지를 배경에 입혀서 투명 처리를 한 경험이 있을것이다.
하지만, IE6~7 브라우저 사용률 저하와 필요이상으로 사용되었던 이미지 보다 CSS 활용도가 높아짐에 따라 CSS background의 rgba를 활용한 투명 처리와 IE 크로스브라우징 하는 방법을 소개하겠습니다.

CSS

    
    body { background: #96C653; }
    p { padding: 10px;background: #000; color: #fff; }
    div { margin: 5px 0; padding: 10px; height: 200px; color: #fff; }
    #rgba { 
      background: rgba(0, 0, 0, 0.5); 
      /* 
        IE8이하는 rgba가 동작하지 않기 때문에 배경 투명도 적용을 위해 filter의 gradient을 대체 이용한다. 
        컬러값 60000000의 8자리 숫자의 의미: 앞 60 불투명도, 나머지 6자리 컬러값.
        startColorstr와 endColorstr의 색을 같게 하여 배경 투명도 처리를 하는것.
        하지만 원래는 그라데이션 처리하는 기법이기 때문에 같은 60% 투명도라고 해도 약간의 차이는 있다.
      */
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000);
      zoom: 1; /* 일반적이진 않지만 ie6, 7 에서 적용 안되는경우 선언. */
    }
    #opacity { background: #000; opacity: 0.5; filter: alpha(opacity=50); }

HTML

  
DOM element의 투명도를 결정하는 opacity, 배경의 투명도를 결정하는 background rgba.
  

    [background 투명 처리]

    background: rgba(0, 0, 0, 0.5);


    [IE8 이하 배경만 투명도 처리]

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000);
  
  

    [DOM element 투명 처리]

    opacity: 50%


    [IE8 이하 opacity 처리]

    filter: alpha(opacity=50);
  

[참고]
– jsbin 소스보기
– 참고 가이드
– Generate 제공

[별참 – GradientType은 그라데이션 방향]
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#4cffffff’, endColorstr=’#4cffffff’);