쉼터

구글사이트를 보면 참으로 대단하다는 생각 밖에 안든다...
수수하면서...
알맹이는 꽉차있다고나 해야할까...
어쨌든...
이번엔 구글 Adsense에 가입해서...
콘텐츠, 검색, 추천 3가지 광고를 추가했다...
설치해보니깐...
웹2.0에 대한게 몸소 느낄 수 있었다...

웹2.0 새로운 등장과 그 의미

By 김중태 김중태문화원 원장 (www.dal.co.kr)

미래의 웹은 시맨틱웹이며, 웹2.0은 시맨틱웹을 경제적 관점에서 본 말이다.

시맨틱웹이 보급되려는 시점에 웹2.0이라는 말이 나와 혼란을 주고 있다. 결론부터 내리자면 W3C나 팀 버너스 리가 제시하고 있는 차세대웹(NGWeb = Next Generation Web)은 1998년부터 확정되어 전개되고 있는 시맨틱웹이다.

웹2.0(Web 2.0)은 초창기 웹을 1.0이라 생각하고 다음 세대 웹을 2.0으로 구분한 것인데, 이 낱말은 경제적 관점에서 만들어졌다. 시맨틱웹이 RSS 등을 통해 점차 구현되기 시작하자 오라일리(O'Reilly Media, www.oreilly.com)는 2004년 10월 5일부터 일주일 동안 미국 샌프란시스코에서 '웹2.0컨퍼런스(www.web2con.com)'를 개최한다. 이때부터 퍼진 웹2.0 용어는 시맨틱웹의 다른 낱말로 이해되고 있다. 하지만 일부 사람은 이미 시맨틱웹이라는 낱말이 있는데 별도의 웹2.0이라는 낱말을 만든 것이나, 차세대웹(Next Generation Web) 용어가 일개 회사의 전략에 따라 경제적인 관점으로 흘러가는 방향을 탐탁치 않게 생각하고 있다.

웹2.0 컨퍼런스 홈페이지(www.web2con.com)

출처:유미디어랩

실제로 홈페이지를 제작하시다가 격는 아주 머리아픈 경우입니다. 바로 인터넷 익스플로러, Internet Explorer, IE 에서 원래 CSS 에서 의도한대로 렌더링을 하지 않고 다르게 이해를 하는경우입니다. 많은경우 DIV가 깨지기도 하는데요, 이 이유와 해결책을 잠깐 보겠습니다.

보시다시피 CSS 에서 제작자가 의도한데로 width 를 정해놓지만 IE 에서 읽어들일때(IE 5.x 와 quirks 모드의 IE6)에는 그 width 안에 padding 값과 border 값이 같이 계산되어서 렌더링이 됩니다.
*quirk 모드 는 DOCTYPE 이 제대로 잡히지 않아 렌더링이 올바르게 되지 않는것을 일컫습니다. DOCTYPE 만 제대로 된다면 IE6도 렌더링은 제대로 되게 됩니다.

예를 들어보겠습니다.
<div id=”content”></div>
를 해 놓고 너비는 300px 에다가 padding-left 를 한 20px 로 주고 싶습니다.
그렇다면 보통의 CSS 렌더링은 너비 300px + padding값 20px 을 주니 총 너비는 320px 로 측정해야겠죠. 하지만 IE 에서는 너비값 300px 에다가 그 안에 padding값 20px 이 들어가니 총 너비는 그대로 300px 입니다. 그리고 그 안에 div는 작아졌겠죠. 280px 로 말입니다. 이것을 고치는 법은, CSS 를 핵 하는 법입니다. 계산을 거꾸로 해서 오히려 IE 에서는 너비를 320px 로 이해하게 만들면 20px 로 padding 을 주고 나머지 300px 은 div 내용이니 원래의 의도대로 렌더링을 해주니까요.

CSS Hacks and Filters 와 타 ALA 같은 CSS 페이지에서 설명해주고 있는 방법을 소개해 드립니다.

일단 원래의 CSS 코딩을 적습니다.
#content {
  width: 300px;
  padding-left: 20px;
  }


그리고 다음줄에 IE 해킹을 넣습니다.
*html #content {
  width: 320px;
  /*padding은 안적어도 되는것이 위에서 이미 불러주었기때문에 괜찮습니다*/
  }

이 해킹은 *html 을 붙임으로써 다른 브라우저는 인식을 못하고 IE 5.x 버전에서 이해를 하게 되는 부분입니다. 하지만 문제가 있습니다. 이 해킹은 모든 IE 브라우저에 적용이되면서 Mac 에서의 IE 5와 그 이상버전에게 적용이 되어버립니다. Mac 의 Internet Explorer 5와 그 이상, 그리고 IE 6는 은 원래가 CSS 의도대로 렌더링이 되거든요. 그럼 그 버전에서는 다시 깨지게 됩니다. 그러니, 위의 코딩에다 한줄을 더 넣어서 이렇게 넣습니다.

*html #content {
  width: 320px;
  w\idth: 300px;
  }

w\idth 부분이 들어갔죠? 백슬래쉬\ 를 넣으므로써 고쳐질수 있습니다.

정리합니다. padding은 IE 5.x 안에서 다르게 인식되므로 약간의 해킹이 필요합니다. 그래서 예로 width: 300px 에 왼쪽 padding 이 20px 일 경우 이렇게 적습니다.

#content {
  width: 300px;
  padding-left: 20px;
  }
* html #content {
  width: 320px;   /* IE 5.x 버전이 인식 그리고 mac IE, ie6도 인식 */
  w\idth: 300px;  /* Mac IE 와 IE6만이 다시 랜더링 */
  }

border 도 IE 에서는 width 안에 포함되니 border 쓰실때에도 잘 크기를 조절하셔서 쓰시기 바랍니다.
height 을 Mac 의 IE 만 이해하게 하려면 width 는 w\idth 였듯이 he\ight 으로 쓰시면 됩니다.


------
출처 : http://ilmol.com/wp/2005/06/17/38/

많은 웹페이지들은 소스공개를 막고자...
onContextMenu="return false" onDragStart="return false"  onSelectStart="return false"
와 같은 스크립트를 이용한다...
또, 웹페이지의 디렉토리를 포함한 파일명이나 쿼리스트링같은 값들이 주소 표시줄에 보이지 않게...
frame 태그를 이용한다...

view-source:를 이용해서 웹페이지 소스를 볼 수 있지만...
xp서비스팩2가 적용된 IE에서는 실행이 안된다...

asp, php와 같은 언어를 사용해서 소스를 얻어 올 수 있지만...
XMLHTTPXMLHttpRequest를 이용해서 간단히 소스를 얻어 올 수 있다...