반응형

Web/WEB기본 79

[CSS] IE6에서 레이어 고정시키기 핵. Fixed Layer Hack for IE6

CSS에는 position:fixed 라는 속성이 존재하고 이 속성이 부여된 엘리먼트는 화면에 고정되어 스크롤을 해도 움직이지 않고 항상 같은 자리에 머물게 됩니다. 흔히 "스크롤을 따라다니는 배너" 라고 표현하는 이런 UIO(User Interface Object) 따위를 코딩할 때 이 속성을 사용할 수 있는데 보통의 경우 IE6에서 지원하지 않기 때문에 별도의 자바스크립트를 추가하여 이 기능을 구현해 왔습니다. 하지만 이제는 더이상 그럴 필요가 없을것 같습니다. 자바스크립트는 전혀 사용하지 않고 CSS Hack을 사용하여 IE6 에서 position:fixed 상태의 레이어를 구현할 수 있는 팁을 발견하였습니다. 예제 미리보기 http://naradesign.net/open_content/refere..

Web/WEB기본 2009.06.09

[펌]IE8의 WebSlices기능을 웹사이트에 추가하기

WebSlices라는건 IE8에 추가된 브라우저 부가기능인데요.. 개인적으로는 굉장히 마음에 드는 기능입니다. 대략 어떤 기능인지 살펴보자면.. 웹페이지상에 WebSlices기능이 적용된 부분이 있다면 마우스 커서가 올라갔을때 위처럼 초록색상자가표시되면서 WebSlices기능이 있는것을 알려줍니다. 그리고 초록색 아이콘을 누르면 아래와같은 창이 나타나 WebSlice를 자신의 브라우저에 추가가 가능합니다. 추가된 WebSlices는 링크바에 표시된 링크를 클릭하면 아래와 같이 간략하게 해당Feed?의 내용을 확인할수 있는데요.. 해당 웹사이트에 가지않고 정보를 바로바로 볼수있다는 거죠.. 실제로 매일매일 접속하는 사이트가 있는데 대부분이 즐겨찾기를 해놓는다고 해도 원하는 정보에 액세스하려면 몇번의 클릭이..

Web/WEB기본 2009.04.10

레이아웃에 사용되는 두가지 속성 position 과 float

레이아웃에 사용되는 두가지 속성 position 과 float div 속성의 비교 레이아웃속성 positon float 기본속성 static, absoulte, relative left, right, none 속성내용 static : 기본값 absolute : 화면값에 영향을 주지 않고 위치지정 가능 (layer라고 부른다.) relative : static과 비슷, offset 지정가능, 하위엘리먼트의 기준 left : 엘리먼트 왼쪽배치 right : 오른족 배치 none : float하지 않음 보통 position, float를 어디에 사용할지는 꼭 구분된것은 아니지만 position: 자유로운 위치선정, 블럭의 크기가 크게 유동적이지 않을 때 사용 float: postion에 비해 위치선정이 자유롭..

Web/WEB기본 2009.04.10

Javascript Event요소

자바스크립트 이벤트 ..................................................... 아주 중요한 이벤트!!! 이벤트란 모든 행위를 말하는 것으로 프로그램에서는 미리 사용자의 행위를 예측하여 미리 사용할 수 있도록 이벤트를 많이 준비해 놓고 있다. 예를 들어 사용자가 마우스를 클릭할 것이다.... 이건 click 이벤트로 준비! 이게 없다면 우리는 사용자가 마우스를 클릭했는지 부터 알아내야 다음 일을 할 수 있을 것이다. 고맙게도 click이 일어났다는 걸 자동으로 알 수 있으니 얼마나 고마운 일인가... (Click, MouseOver, MouseOut, Submit...) 이벤트 핸들러란 ? 이러한 이벤트와 우리가 준비한 프로그램을 연결해 주는 구실을 한다 (onClic..

Web/WEB기본 2009.01.06

Eclipse Font 설정하기

Eclispe의 Windows메뉴에 Preferences에서 Genral → Appearance → Colors and Fonts → Basic → Text Font → Change → Courier New 9폰트 or 굴림체 10폰트 추가로 MAC OS에서 사용하는 Textmate의 기본 폰트인 Monaco Font : - mac에서는 서체목록:Monaco, 글자체:일반체, 크기:11 를 놓고 쓴다. - 윈도우에서는 11은 너무 크고, 10이 정당한것 같다. 9는 너무 작은 느낌이 든다. Monaco 폰트는 개인적으로 너무 좋아하는 폰트중에 하나이다. 아쉽게도 window에서는 완벽하게 구현되는것 같지는 않아 아쉽긴하다. 폰트 출처: http://www.webdevkungfu.com/?s=monaco&..

Web/WEB기본 2008.12.01

[펌]IE7.0에서 Firebug사용하기.

스크립트을 쓰다보면 제일 난감한 것이 디버깅이다. 물론 firefox에서는 상당한 수준의 디버깅 툴인 firebug가 있기 때문에 다행이고 opera등 타 브라우져도 그럭저럭 괜찬은 수준의 디버깅툴을 지원하고 있다.하지만 제일 디버깅 하기가 난감한 브라우져는 ie....난감할때가 많다. 물론 ie developer tool을 제공하고 기타 visual studio와 연동되어 에러시 해당 부분을 알려주는 등 많이 편해지긴 했으나 아직은... 불편하다. 그러다 몇일전 우리 팀의 한분인 태곤씨에게서 ie pro를 추천받았다. ie pro는 간단히 말하면 ff의 장점인 user script,plug in 등 기타 부가기능을 사용할수 있게 해주는 add on 프로그램이다. 이 것 저것 살펴보다가 plugin 쪽에..

Web/WEB기본 2008.06.27

[펌]HTML5와 HTML4의 차이점

올해 3월 새로 조직된 W3C HTML 워킹 그룹에서 Invited Expert로 활동하고 있습니다. 소수 전문가에게만 제한적으로 열었던 Invited Expert 제도로 480여명의 웹 관련 기술자들이 새 HTML 규격에 대한 토론을 벌이고 있습니다. 많은 토론 끝에 WHATWG에서 만든 Web Application 1.0 즉, HTML5를 W3C에서 Working Draft 초안 문서로 가져오기로 하였습니다. 특별한 이견이 없는 한 이 문서를 기초로 HTML5의 첫 워킹 드래프트가 나올 예정입니다. 덕분에 WHATWG에서 조금 기여했던 부분에 이름이 올랐던 이유로 W3C Editor’s Draft에 제 한글 이름이 올라 있네요. 아울러 워킹그룹에서 활발한 활동을 벌이고 있는 사람 중 한명인 Opera..

Web/WEB기본 2008.06.25

LightWindow 라이트박스의 업그레이드

LightWindow 라이트박스을 모태로 업그레이드 된 스크립트네요. 라이트박스 계열의 약점인 iframe에서 안되는 부분도 잘 보강된것 같네요. 라이트 윈도우 --> http://stickmanlabs.com/lightwindow/#why [ HTML정의 내용 ] 주의: iframe안의 링크를 parent에 입히기 DOCTYPE를 XHTML로 주어야 합니다. [ 자바스크립트 file ] [ iframe Call ] Open a LightWindow from an iframe! var links = $$('.lightwindow_iframe_link'); links.each(function(link) { Event.observe(link, 'click', function() {parent.myLightW..

Web/WEB기본 2008.06.10

[펌]Yahoo User Interface Library(YUI)

YUI (Yahoo User Interface) 자바스크립트 라이브러리는 야후에서 진행하고 있는 오픈소스프로젝트로 웹애플리케이션 개발에 필요한 UI 컴포넌트들을 제공하고 있습니다. 물론 Ajax 와 같은 기능도 제공을 하고 있습니다. 이미 시장에서 Prototype, jQuery 등이 많이 사용되고 있지만, UI 측면을 고려했을때는 YUI 의 다양한 컴포넌트와 완성도를 무시할 수 없을것으로 보여집니다. 하지만 Selector 의 측면에서는 jQuery 의 직관적인 인터페이스가 더 나아보이긴 합니다. 공식홈페이지 : http://developer.yahoo.com/yui YUI 는 Charts, Button, Animation, DataTable 등의 다양한 UI 컴포넌트들을 제공하고 있습니다. 각각의 컴..

Web/WEB기본 2008.04.24

javascript 이벤트 핸들러

onAbort 이미지를 읽다가 중단시켰을 때 발생 onActivate 개체가 활성활 될 때 발생 onAfterPrint 문서가 출력되거나 혹은 출력하기 위해 출력미리보기를 한후에 발생 onAfterUpdate 데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가 업데이트 되었을 때 발생 onBeforeActivate 개체가 활성화 상태로 되기 바로 직전에 발생 onBeforeCopy 선택 영역이 시스템의 클립보드로 복사되기 바로 직전에 발생 onBeforeCut 선택 영역이 지워지기 바로 직전에 발생 onBeforedeActivate 현재 개체에서 다른 개체로 activeElement가 바뀌기 직전에 발생 onBeforeEditFocus 편집가능한 개체 내부에 포함된 개체가 편집활성화 ..

Web/WEB기본 2008.04.22

링크에 대한 blur처리하기(css방식,script방식)

스타일시트를 통한 일괄 적용 A { selector-dummy:expression(this.hideFocus=true); } FF, 파이어폭스용 A:active, A:focus { outline:0; } 또는 A { -moz-outline-style:none; } 개별적으로 추가 링크마다 onfocus="blur()" 또는 onfocus="this.blur()" 스크립트를 이용한 방법 (1) function bluring() { if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus(); } document.onfocusin=bluring; 스크립트를 이용한 방법 (2) function autoBlur()..

Web/WEB기본 2008.04.01

자스크립트로 마우스 위치 얻기(IE, FF)

자바스크립트를 사용해 마우스 좌표를 얻고자 한다. 마우스 좌표를 얻기 위해서는 이벤트 객체를 이용해야 하는데, Internet Explorer(이하 IE)와 Firefox(이하 FF)가 이벤트 객체를 이용하는 방법이 서로 틀리다. IE의 경우를 먼저 살펴 보자. [CODE type=javascript] Mouse Pointer Over [/CODE] 이것이 IE에서 마우스 위치를 얻는 전체 소스 이다. 먼저, 움직임을 감지할 영역 captureObj를 잡는다. 이 영역에 마우스가 올라가면 captureObj의 setCapture() 메소드를 이용해 마우스 위치 추적을 시작한다. 이 영역에서 마우스가 빠져나가면 releaseCapture() 메소드를 이용해 마우스 위치 추적을 종료 한다. 마우스의 좌표는 ..

Web/WEB기본 2008.03.04

[펌]웹해킹 시리즈 7) file upload 알고리즘 시의 주의할점 -4

/* http://beist.org beist@hanmail.net wowcode at wowhacker team */ 7) file upload 알고리즘 시의 주의할점 -4- 이번 주제는 Web CGI Board 에서 File Upload 시의 취약성에 대해서 알아보겠다. 벌써 file upload 관련 글이 4 개나 나왔는데 이 것으로 보아 Cracker 가 가장 좋아하는 것중 하나가 File Upload 라는 것은 확실하다. 그만큼 취약점이 나왔는데도 이번에는 어떠한 취약점이 나올까. 이번 역시 File 을 Upload 할때의 이름과 관계가 있다. 어떻게 보면 이번 버그는 개발자가 알고리즘을 짤때의 취약성은 아니고, php 에서 처리하는 방식에 따라서 문제가 있다. 우리가 파일을 올릴때는 보통 다음..

Web/WEB기본 2008.01.23

[펌]RFC 1945 Korean Edition(HTTP/1.0 Korean Version 3.0)

출처 : http://raonism.net/CSdb/protocol/rfc1945-kr.html RFC 1945 - Hypertext Transfer Protocol -- HTTP/1.0 Network Working Group Request for Comments: 1945 Category: Informational T. Berners-Lee : MIT/LCS R. Fielding : UC Irvine H. Frystyk : MIT/LCS May 1996 하이퍼텍스트 전송 프로토콜 - HTTP/1.0 305-350, 대전광역시 유성구 가정동 161번지 한국전자통신연구소 멀티미디어표준연구실 김 용 운 E-mail : qkim@pec.etri.re.kr URL : http://pec.etri.re.kr/~q..

Web/WEB기본 2008.01.11
1 2 3
반응형