웹 페이지에 숨겨진 메세지를 찾아라!

앞으로 웹사이트를 통해서 중요한 단서가 되는 메세지를 숨겨 놓는 트릭을 걸 수 있게 될 것 같다.

다음은 IDG에 실린 IE8에 대한 기사 중 일부다. 만약 지금 인터넷 익스플로어를 제외한 파이어폭스, 오페라, 사파리, 크롬 등의 최신 버전을 사용중이라면 Ctrl + A 를 눌러보자.

지난 해 인터넷 익스플로러는 시장점유율을 잃었지만, 모질라의 파이어폭스, 애플의 사파리 그리고 새로 생긴 구글의 크롬 같은 브라우저는 날로 인기를 더해가고 있다.

...

온라인에 등장하는 비즈니스 애플리케이션이 많아지면서 브라우저의 보안이 IT 관리자에겐 최고의 우선순위가 되었고, IE와 파이어폭스를 두고 어떤 브라우저가 더 안전한가에 대한 논쟁은 아직도 진행형이다.

윈도우제품관리 VP인 마이크 내쉬는 최근 IE8에 포함된 새로운 보안과 사생활 보호 특성을 논의한 바 있다. 마이크로소프트는 이런 특성들이 기업 사용자의 생산성 및 해커로부터의 안전을 지켜주길 바라고 있다.

...

내쉬는 “과거에 웹페이지에 버그가 있어 장애가 발생하면 브라우저 전체 또는 운영체제마저 장애가 발생할 수 있었다”라면서, “IE8에서는 장애가 난 탭이 자동으로 복구된 후, 장애가 발생하기 전 사이트로 돌려놓는다”라고 설명했다.

스마트스크린 필터

해커와 악성 사이트가 바이러스를 보내고 개인정보를 훔치는 방식이 날로 복잡해지면서 이를 퇴치하기 위해 스마트스크린 필터가 IE8에서 보강되었다.

...

수수께끼가 풀렸는가?

아주 재밌지 않은가? 이것이 가능한 이유는 IE를 제외한 주요 브라우저의 최신 버전들이 대부분 CSS 3의 스펙을 일부 지원하고 있기 때문인데, 그 중에 문자열을 선택하는 ::selection 속성 때문이다. 이 속성을 이용하면 사용자가 특정 문자열을 선택했을 때 하이라이트 되는 스타일(글자 색과 배경 색 등)을 지정할 수 있게 된다.

p::selection { background:#000;color:#000; }
p::-moz-selection { background:#000;color:#000; }
p span::selection { background:#fff;color:#000; }
p span::-moz-selection { background:#fff;color:#000; }

추신 / 이 트릭은 Ph.Creative 의 글 CSS Trick: Hidden Messages에서 참조한 것입니다.