100: Continue.

 

101: Switching Protocols.

 

200: OK, 에러없이 전송 성공.

 

202: Accepted, 서버가 클라이언트의 명령을 받음.

 

203: Non-authoritavive Information, 서버가 클라이언트 요구 중 일부만 전송.

 

204: Non Content, 클라이언트 요구를 처리했으나 전송할 데이터가 없음.

 

205: Reset Content.

 

206: Partial Content.

 

300: Multiple Choisces, 최근에 옮겨진 데이터를 요청.

 

301: Moved Permanently, 요구한 데이터를 변경된 임시 URL에서 찾았음.

 

302: Moved Permanently, 요구한 데이터가 변경된 URL에 있음을 명시.

 

303: See Other, 요구한 데이터를 변경하지 않았기 때문에 문제가 있음.

 

304: Not modified.

 

305: Use Proxy.

 

400: Bad Request, 요청 실패.

문법상 오류가 있어, 서버가 요청 사항을 이해하지 못함, 클라이언트는 수정없이 요청 사항을 반복하지 않을 것이다.

 

401.1: Unauthorized, 권한 없음 (접속실패).

이 에러는 서버에 로그온 하려는 요청사항이 서버에 들어있는 권한과 비교했을 때 맞지 않을 경우 발생한다. 이 경우, 여러분이 요청한 자원에 접근할 수 있는 권한을 부여받기 위해 서버 운영자에게 요청해야 할 것이다.

 

401.2: Unauthorized, 권한 없음(서버설정으로 인한 접속 실패).

이 에러는 서버에 로그온 하려는 요청사항이 서버에 들어있는 권한과 비교했을 때 맞지않을 경우 발생한다. 이것은 일반적을 으로 적절한 www-authenticate head field를 전송하지 않아서 발생한다.

 

401.3: Unauthorized, 권한 없음(자원에 대한 ACL에 기인한 권한 없음).

이 에러는 클라이언트가 특정 자원에 접근할 수 없을 때 발생한다. 이 자원은 페이지가 될 수도 있고 , 클라이언트의 주소 입력란에 명기된 파일일 수도 있다. 아니면 클라이언트가 행당 주소로 들어갈 때 이용되는 또 다른 파일일 수도 있다. 여러분이 접근할 전체 주소를 다시 확인해 보고 웹 서버 운영자에게 여러분이 자원에 접근할 권한이 있는지를 확인해 본다.

 

401.4: Unauthorized, 권한 없음(필터에 의한 권한 부여 실패).
이 에러는 웹 서버가 서버에 접속하는 사용자들을 확인하기 위해 설치한 필터 프로그램이 있음을 의미한다. 서버에 접속한는 데 이용되는 인증 과정이 이런 필터 프로그램에 의해 거부되었다.

 

401.5: Unauthorized, 권한 없음(ISA PI/CGI 애플리케이션에 의한 권한부여 실패).
이 에러는 여러분이 이용하려는 웹 서버의 어드레스에 ISA PI나 CGI프로그램이 설치되어 있어 사용자의 권한을 검증하고 있음을 의미한다. 서버에 접속하는 데 이용되는 인증 과정이 이 프로그램에 의해 거부되었다.

 

402: Payment Required, 예약됨.

 

403.1: Forbidden, 금지(수행 접근 금지).
이 오류는 CGI나 ISAPI, 혹은 수행시키지 못하도록 되어있는 디렉토리 내의 실행 파일을 수행시키려고 했을 때 발생한다.

 

403.2: Forbidden,  금지(읽기 접근 금지).
이 에러는 브라우저가 접근한 디렉토리에 가용한 디폴트 페이지가 없을 경우에 발생한다. 아니면 Eecute나 Script로 분한이 부여된 디렉토리에 들어있는 HTML페이지를 보려했을 때 발생한다.

 

403.4: Forbidden,  금지(SSL 필요함).
이 에러는 여러분이 접근하려는 페이지가 SSL로 보안 유지 되고 있는 것일 때 발생한다. 이것을 보기 위해서 여러분은 주소를 입력하기 전에 먼저 SSL을 이용할 수 있어야 한다.


403.5: Forbidden,  금지 (SSL 128필요함).
이 에러는 접근하려는 페이지가 SSL로 보안유지 되고 있는 것일 때 발생한다. 이 자원을 보기 위해서는 여러분의 브라우저가 SSL의 해당 레벨을 지원해야 한다. 여러분의 브라우저가 128비트의 SSL을 지원하는 지를 확인해 본다.

 

403.6: Forbidden,  금지(IP 주소 거부됨).
이 에러는 서버가 사이트에 접근이 허용되지 않은 IP주소를 갖고 있는데, 사용자가 이 주소로 접근하려 했을 때 발생한다.

 

403.7: Forbidden,  금지(클라이언트 확인 필요).
이 에러는 여러분이 접근하려는 자원이 서버가 인식하기 위해 여러분의 브라우저에게 클라이언트 SSL을 요청하는 경우 발생한다. 이것은 여러분이 자원을 이용할 수 있는 상용자임을 입증하는데 사용된다.

 

403.8: Forbidden,  금지 (사이트 접근 거부됨).
이 에러는 웹 서버가 요청사항을 수행하고 있지 않거나, 해당 사이트에 접근하는 것이 허락되지 않았을 경우 발생한다.

 

403.9: Forbidden, 접근 금지(연결된 사용자수 과다).
이 에러는 웹서버 BUSY 상태에 있어서 여러분의 요청을 수행할수 없을 경우에 발생한다. 잠시 후에 다시 접근해 보도록 한다.

 

403.10: Forbidden,  접근 금지(설정이 확실 하지 않음).
이 순간 웹 서버의 설정쪽에 문제가 있다.

 

403.11: Forbidden,  접근금지(패스워드 변경됨).
이 에러는 사용자 확인단계에서 잘못된 패스워드를 입력했을 경우 발생한다. 페이지를 갱신한 후 다시 시도해 본다.

 

403.12: Forbidden,  접근금지(Mapper 접근 금지됨).
여러분의 클이언트 인증용 맵이 해당 웹 사이트에 접근하는 것이 거부되었다. 사이트 운영자에게 클라이언트 인증 허가를 요청한다. 또한 여러분은 여러분의 클라이언트 인증을 바꿀 수도 있다.

 

404: Not Found, 문서를 찾을 수 없음.
웹 서버가 요청한 파일이나 스크립트를 찾지 못했다. URL을 다시 잘 보고 주소가 올바로 입력되었는지 확인해본다.
- 해결방법: a.
도구 ▶ 인터넷옵션 ▶ 일반 ▶ 쿠키삭제, 파일삭제, 목록지우기
               b.도구 ▶ 인터넷옵션 ▶ 고급 ▶ [URL을 항상 UTF-8FH로 보냄] 체크 해제.

 

405: Method not allowed, 메쏘드 허용 안됨.
Request 라인에 명시된 메쏘드를 수행하기 위해 해당 자원의 이용이 허용되지 않았다. 여러분이 요청한 자원에 적절한 MIME 타입을 갖고 있는지 확인해 본다.

 

406: Not Acceptable, 받아들일 수 없음.
요청 사항에 필요한 자원은 요청 사항으로 전달된 Acceptheader에 따라 "Not Acceptable"인 내용을 가진 Response 개체만을 만들 수 있다.

 

407: Proxy Authentication Required, 대리(Proxy) 인증이 필요함.
해당 요청이 수행되도록 proxy 서버에게 인증을 받아야 한다. proxy서버로 로그온 한 후에 다기 시도해 본다.

 

408: Request timeout, 요청 시간이 지남.

 

409: Conflict.

 

410: Gone, 영구적으로 사용할 수 없음.

 

411: Length Required.

 

412: Precondition Failed, 선결 조건 실패.
Request-header field에 하나 이상에 선결조건에 대한 값이 서버에서 테스트 결과 FALSE로 나왔을 경우에 발생한다. 현재 자원의 메타-정보가 하나 이상의 자원에 적용되는 것을 막기 위한 클라이언트 선결조건이 의도되어졌다.

 

413: Request entity too large.

 

414: Request-URI too long, 요청한 URI가 너무 길다.
요청한 URI가 너무 길어서 서버가 요청 사항의 이행을 거부했다. 이렇게 희귀한 상황은 아래와 같은 경우에만 발생한다. 클라이언트가 긴 탐색용 정보를 가지고 POST 요청을 GET으로 부적절하게 전환했다. 클라이언트가 Redirection문제를 접하게 되었다. 서버가, 몇몇 서버가 사용하고 있는 요청한 URI 를 읽고 처리하는 고정된 길이의 메로리 버퍼를 이용해 보안체계에 들어가려는 , 클라이언트에 의한 공격을 받고 있다.

 

415: Unsupported media type.

 

500: Internal Server Error, 서버 내부 오류.
웹 서버가 요청사항을 수행할 수 없다. 다시 한 번 요청해 본다.

 

501: Not Implemented, 적용 안됨.
웹 서버가 요청사항을 수행하는 데 필요한 기능을 지원하지 않는다. 에러가 발생한 URL을 확인한 후에, 문제가 지속될 경우에는 웹 서버 운영자에게 연락한다.

 

502: Bad gateway, 게이트웨이 상태 나쁨/서버의 과부하 상태.
Gateway나 proxy로 활동하고 있는 서버가 요구 사항을 접수한 upstream 서버로부터 불명확한 답변을 접수 했을 때 발생한다. 만약 문제가 지속된다면 웹 서버 운영자와 상의해 본다.

 

503: Service Unavailable, 외부 서비스가 죽었거나 현재 멈춘 상태 또는 이용할 수 없는 서비스.
서버는 현재 일시적인 과부하 또는 관리(유지,보수) 때문에 요청을 처리할 수 없다. 이것은 약간의 지연후 덜게될 일시적인 상태를 말한다. Retry-After 헤더에 지연의 길이가 표시하게 될지도 모른다. 만약 Retry-After를 받지 못했다면 클라이언트는 500 응답을 위해 하고자 했는것처럼 응답을 처리해야 한다. 상태코드의 존재는 서버가 과부하가 걸릴때 그것을 사용해야한다는 것을 말하는 것이 아니다. 몇몇 서버는 접속을 거부하는 것을 바랄지도 모른다.

 

504: Gateway timeout.

 

505: HTTP Version Not Supported.

php-ini-dist 를 php.ini로 수정  
  cod_root 수정  작업디렉토리로..   extension_dir = "C:\php\"

php.ini 와 php4ts.dll 복사해서 winNT , system32 에 붙여넣기..

 apache2\conf\httpd.conf 맨아래에..

LoadModule php4_module "C:/php/sapi/php4apache2.dll"
AddType application/x-httpd-php .php .htm .html

=============================================================

1. apache 인스톨 apache를 다운
apache_2.0.54-win32-x86-no_ssl.msi 사용 함
윈도우 위저드 인스톨 방식에 따라 설치 하면됨

2. php 인스톨
php를 다운받는다.
php-4.3.11-Win32.zip 버전을 사용함
binary 형태이기때문에 c:php 디렉토리를 만들어서 이쪽으로 풀어 놓으면된다.

3. 설정
1) php설정
* 압축을 풀어놓은 c:php 디렉토리에 있는 php.ini-dist 메모장으로 열어
extension_dir을 찾아 다음 처럼 작성해 놓고 xp의 운영체제 디렉토리인 c:windows 밑에 php.ini로 복사해 넣는다.
extension_dir = "c:php"

* php4ts.dll 파일을 syatem32 폴더 아래 카피하기

2) httpd.conf 에 다음추가
LoadModule php4_module c:/php/sapi/php4apache2.dll
AddType application/x-httpd-php .php4 .php .html .htm .inc .php3 .phtml

4. 확인
1) 메모장을 열어
위와 같이 작성한 후 info.php로 저장하고 아파치를 리스타트 하여 확인해 본다.

<style type="text/css">
  #r {width:   150px   ;font:bold 7pt tahoma;color:gray;} /* 크기조절 */
  #r b{display:block;height:1px;overflow:hidden;}
  #r b, #r #r5{border:   gray   ;background:   #ffffff   ;} /* 바탕 색상 */
  #r #r1{background:   gray   ;}
  #r #r1{margin:0px 5px 0px 5px;}
  #r #r2{border-left:solid 2px;border-right:solid 2px;margin:0px 3px 0px 3px;} 
  #r #r3, #r #r4, #r #r5{border-left:solid 1px;border-right:solid 1px;} 
  #r #r3{margin:0px 2px 0px 2px;}
  #r #r4{height:2px;} /* 놀이조절 */
  #r #r4{margin:0px 1px 0px 1px;} 
  #r #r5{padding:0px 5px 0px 5px;}
</style>

<div id=r>
<b id=r1></b>
<b id=r2></b>
<b id=r3></b>
<b id=r4></b>
<div id=r5>
<!-- 내용 시작 -->

  <div style="height:600"> /* 놀이조절 */
  the new empty space.<br/>
  <a href=http://skystory.kr target="_blank">at fifth night</a>

   </div>
</div>
<b id=r4></b>
<b id=r3></b>
<b id=r2></b>
<b id=r1></b>
</div>

<?

/******************************************************************************

Program: waterMark.php
Description : 서비스 이미지에 워터마크 적용하기
Author      : Ryu Jee Hyoung
CreateDate  : 2007.01.18
CopyRight   : Copyright(c) 청명공자 All Right Reserved.
UpdateDate  :

Todo        :

 워터마크가 적용되도록 이미지 URL 변경
 - 사용법
 > $img_url = http://localhost/images/test.jpg;
 > $img_url = waterMark($img_url);
 > echo $img_url;

******************************************************************************/

function waterMark($image,$thumbW=null,$thumbH=null)
{
  $argTmp = $thumbW."|".$thumbH."|".$image;
  $arg = base64_encode($argTmp);
  $arg = urlencode($arg);

  $img_info = @getImageSize($image);
  if($img_info[2] == 6) {
    $chgURL = $image;
  }
  else {
    $chgURL = "http://localhost/imgView.php?image=$arg";
  }

  return $chgURL;
}

$img_url = http://localhost/images/test.jpg;
$img_url = waterMark($img_url);
echo $img_url;

?>


<?

/******************************************************************************

Program: imgView.php
Description : 서비스 이미지에 워터마크 적용하기
Author      : Ryu Jee Hyoung
CreateDate  : 2007.01.18
CopyRight   : Copyright(c) 청명공자 All Right Reserved.
UpdateDate  :

Todo        :

******************************************************************************/
flush();


# 특정경로에 워터마크 처리할 이미지가 존재해야 함!!
# 워터마크 이미지는 필히 JPG 여야 합니다.

define("WATERMARK", "/home/httpd/html/images/watermark.jpg");


header("Content-type: image/jpeg");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");


$photoTmp = base64_decode($image);
$photo = $photoTmp; # waterMarkImage($arg) 이런 형식(w,h가 지정이 안된 경우)으로 사용된 것
if (ereg("\|",$photo)) {
  # waterMarkImage($arg,100,50) 이런 형식(w,h가 지정된 경우)으로 사용된 것
  list($w1,$h1,$photo) = explode("|", $photoTmp, 3);
  $thumb_w1 = $w1;
  $thumb_h1 = $h1;
}

$photo = urldecode($photo); # %C24%.... 이런식으로 encode되어 오는 파일오류를 방지

$img_info = getImageSize($photo);
$photo = ereg_replace("%","%25",$photo);
$image_url = urldecode($photo);
if (!@fopen($image_url, "r")) {
  $dst_img = imagecreatefromjpeg(WATERMARK);
  $res = imagejpeg($dst_img, "", 100);
  die();
}

$file = pathinfo($image_url);
if ($img_info[2] == "1") {
  $file["extension"] = "GIF";
}
else if ($img_info[2] == "2") {
  $file["extension"] = "JPG";
}
else if ($img_info[2] == "3") {
  $file["extension"] = "PNG";
}
switch(strtoupper($file["extension"])) {
  case "JPEG":
    $src_img = imagecreatefromjpeg($image_url);
    break;
  case "JPG":
    $src_img = imagecreatefromjpeg($image_url);
    break;
  case "GIF":
    $src_img = imagecreatefromgif($image_url);
    break;
  case "PNG":
    $src_img = imagecreatefrompng($image_url);
    break;
}

$src_w = imagesx($src_img);
$src_h = imagesy($src_img);

$portion = $src_h / $src_w;


# w, h값이 있으면 thumbnail로 보여주기
if(!is_numeric($w1) || empty($w1)) $w1 = $img_info[0];
if(!is_numeric($h1) || empty($h1)) $h1 = $img_info[1];
$dest_w = $w1;
$dest_h = $h1;
$dst_img = imagecreatetruecolor($dest_w, $dest_h);


# 배경이미지 흰색으로 채우는 부분 - 투명이미지가 이상하게 보이는 현상을 방지
$white = imagecolorallocate($dst_img,255,255,255);
imagefill($dst_img, 0, 0, $white);

imagecopyresized($dst_img, $src_img, 0, 0, 0, 0, $dest_w, $dest_h, $src_w, $src_h);

imagedestroy($src_img);

flush();

$watermark = imagecreatefromjpeg(WATERMARK);

$watermark_w = imagesx($watermark);
$watermark_h = imagesy($watermark);

$resize_w = $watermark_w;
$resize_h = $watermark_h;
if ($dest_w < 100) {
  $resize_w = $watermark_w / 2;
  $resize_h = $watermark_h / 2;
}
else if ($dest_h < 100) {
  $resize_w = $watermark_w / 2;
  $resize_h = $watermark_h / 2;
}
$overlay_img = imagecreatetruecolor($watermark_w, $watermark_h);
imagecopyresized($overlay_img, $watermark, 0, 0, 0, 0, $resize_w, $resize_h, $watermark_w, $watermark_h);
imagedestroy($watermark);

$white = imagecolorallocate($overlay_img, 0xFF, 0xFF, 0xFF);
$black = imagecolorallocate($overlay_img, 0x00, 0x00, 0x00);
imagecolortransparent($overlay_img, $black);


# 워터마크 중앙에 배치
$offsetX = ($dest_w - $watermark_w - 3) / 2;
$offsetY = ($dest_h - $watermark_h - 3) / 2;

# 워터마크 좌상단에 배치
# $offsetX = 3;
# $offsetY = 3;

# 워터마크 우상단에 배치
# $offsetX = $dest_w - $watermark_w - 3;
# $offsetY = $dest_h - $watermark_h - 3;


# w, h값이 있으면 thumbnail로 보여주되 워터마크 적용안함!!
if (empty($thumb_w1) && empty($thumb_h1)) imagecopymerge($dst_img,$overlay_img,$offsetX,$offsetY,0,0,$watermark_w,$watermark_h, 30);
imagedestroy($overlay_img);

$res = imagejpeg($dst_img, "", 100);
imagedestroy($dst_img);

flush();

exit;
?>

복잡한 사용방법이 있고 여러 특수문자와의 조합으로 배우기가 쉽지 않아 간단한 예제를 통해 설명한다.

1. 각 문자와 숫자는 해당 문자 또는 문자열이 테스트할 문자열에 있을경우 true 가된다.


<script>
// 'a' 가 있는 문자열 모두가 TRUE (대소문자 구분)
var filter = /a/
if (filter.test("some test words") == true) { alert("ok"); } else { alert("fail"); }
</script>


<script>
// "about" 가 있는 문자열 모두가 TRUE (대소문자 구분)
var filter = /about/
if (filter.test("some test words") == true) { alert("ok"); } else { alert("fail"); }
</script>


2. 대소문자 구분없이 해당 문자 또는 문자열을 검색할 경우 끝에 i 를 붙인다.

<script>
// 'a' 또는 'A' 가 있는 문자열 모두가 TRUE (대소문자 구분 안함)
var filter = /a/i
if (filter.test("some test words") == true) { alert("ok"); } else { alert("fail"); }
</script>


3. 여러개의 이어지는 내용들을 검색할 경우는 '-' 를 넣어 표현한다.

<script>
// 'a' 에서 'z' 까지중 하나만 있으면 모두가 TRUE (대소문자 구분)
var filter = /[a-z]/
if (filter.test("some test words") == true) { alert("ok"); } else { alert("fail"); }
</script>


4. 여러가지의 문자 또는 문자열을 검색할 경우 '|' 를 넣는다.


<script>
// 'a' 또는 'b' 또는 'c' 가 있는 문자열 모두가 TRUE (대소문자 구분)
var filter = /a|b|c/
if (filter.test("some test words") == true) { alert("ok"); } else { alert("fail"); }
</script>


<script>
// 'a' 에서 'z' 까지 또는 '0' 에서 '9' 까지중 하나만 있으면 모두가 TRUE (대소문자 구분)
var filter = /[a-z]|[0-9]/
if (filter.test("some test words") == true) { alert("ok"); } else { alert("fail"); }
</script>


5. 해당 문자또는 문자열이 없는 경우를 검색할 경우 브래킷('[', ']') 안에 '^' 를 넣는다.


<script>
// 'a' 에서 'z' 까지의 문자가 아닌 문자가 있을 경우 TRUE (대소문자 구분)
var filter = /[^a-z]/
if (filter.test("some test words") == true) { alert("ok"); } else { alert("fail"); }
</script>


6. 문자열의 첫번째 글자가 일치해야할 경우는 '^' 를 브래킷('[', ']') 밖에 넣는다.


<script>
// 'a' 에서 'z' 까지의 문자로 시작하는 문자열일 겨우 TRUE (대소문자 구분)
var filter = /^[a-z]/
if (filter.test("some test words") == true) { alert("ok"); } else { alert("fail"); }
</script>


7. 문자열의 끝쪽 글자가 해당 문자 또는 문자열과 일치해야할 경우는 '$' 를 넣는다.


<script>
// 'a' 에서 'z' 까지의 문자로 끝나는 문자열일 겨우 TRUE (대소문자 구분)
var filter = /[a-z]$/
if (filter.test("some test words") == true) { alert("ok"); } else { alert("fail"); }
</script>


8. 특수문자('\', '^', '$', '*', '+', '?', '.', '(', ')', '|', '{', '}', '[', ']')를 검색할 경우는 '\' 를 넣는다.


<script>
// '\' 가 있는 문자열일 겨우 TRUE (대소문자 구분)
var filter = /\\/
if (filter.test("some test words") == true) { alert("ok"); } else { alert("fail"); }
</script>

 

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css"></style>
</HEAD>
<BODY>
<div style="position:relative;background:red;left:100px;top:200px">relative</div>
<div style="position:absolute;background:blue;left:100px;top:200px">absolute</div>
</BODY>
</HTML>

실행해보시면 아시겠지만...
또한 div를 span으로 바꾸게 되면 위치는 변하지 않지만
relative속성의 레이어가 배경색이 라인전체에서 부분으로 바뀌게 됩니다.

첫째, absolute 와 relative의 차이점
둘째, div와 span의 차이점

포지션에 대한 속성에서 absolute와 relative를 보면

absolute(절대적 위치)
브라우저를 기준으로 위치 속성을 사용 하며 parent 요소에 의해 하위 위치에
있다면 그 곳을 기준으로 합니다.

즉, 레이어 속성인 z-index를 쓸경우 top, left, right, bottom을 통해서
좌표를 잡는데 실제 브라우저를 기준으로 위치하게 됩니다.

relative(상대적 위치)
객체가 위치 속성에 의해 설정 되거나 태그내에 위치시 마지막 위치를
기준으로 상대값을 정해 줍니다.
즉, 포지션을 정하지 않은 상태에서 보면 그곳에 위치가 브라우저에
나올것입니다. 바로 그곳을 기준으로 포지션에 relative를 사용해서
top, left, right, bottom을 이용해서 위치를 정할수 있습니다.

위에 질문 하신 소스에 보시면 relative를 먼저 사용 하셨는데요
두 태그를 바꿔서 해보시면 아실 겁니다.

그리고 div와 span태그는 서식에 관한 태그입니다.

div
div태그는 문단 서식에 관한 태그입니다. 그래서 스타일을
이용해서 크기를 잡지 않는다면 기본적으로 줄바꿈이 됩니다.
즉, 라인 전체에 적용이 되는 이유입니다.

span
span태그는 서식에 관한 태그이긴 하나 문단이 아닌 한줄에 관한 서식
입니다.

그래서 span태그에 스타일로 크기를 잡아주지 않으면 태그가 쓰인곳 안에
내용까지만 적용이 됩니다.

예를 들어
<div style="background-color: blue">줄전체에 색상</div>

줄전체에 색상
위 경우는 라인전체에 해당(문단을 적용 하기 위해 자동으로 줄바꿈)
<span style="background-color: blue">이글에만 색상</span>

이글에만 색상
위의 경우는 줄서식이므로 태그안에 쓰인 글에만 적용 됩니다.
DIV 를 불럭(Block) 태그, SPAN 을 인라인(Inline) 태그라고 하죠


margin과 padding을 구별 --------------------------------

일반적으로 margin과 padding을 구별하기가 힘듭니다.
간단한 예제소스를 만들어 연습하시면 이해가 쉬울것 같네요
아래에 비교 예제를 올렸습니다.

margin : 특정 영역(box)의 바깥쪽 여백을 의미
padding : 특정 영역(box)의 안쪽 여백을 의미

margin은 보통 화면에서 여백을 주거나 없앨 경우 사용합니다.

html파일에 아무테그 없이 1234라는 글을 쳐보시고 실행 해보세요.
그러면 특이하게 1234라는 글자 상단부분과 좌측부분에 약간의 공백이 생깁니다.
이것을 홈페이지를 만들때 배경이미지를 넣게되면 하얀 공백이 생기는 문제가 발생합니다.

이럴때 body테그에 상단과 좌측에 margin값에 0을 주면 공백을 없앨 수 있습니다.

padding은 주로 테이블 안에서 사용합니다.
테이블내에서 특정 셀안에 있는 내용물이 너무 좌측이나 상단에 붙었을경우 값을 어느정도 주어 해당 픽셀만큼 여백을 주는 것입니다.
참고로 테이블테그에서는 margin이란 속성값은 사용하지 않습니다.

굳이 두 테그의 차이가 뭐냐고 말한다면 쓰이는 곳이 다르다고 말할 수 있습니다.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

css에서 잘못알고있는 width  (3) 2009.06.10
CSS 라운드  (0) 2008.11.21
id와 class의 구분  (0) 2008.10.26
IE6에서 position:fixed 구현하기  (0) 2008.10.24
HTML 특수문자표, ( 숫자표현,문자표현 ) 코드표  (3) 2008.10.21

위와 같은 경우는 id로 정의된 이름을 스타일을 적용시키기 위해서 사용 합니다.

그리고 정의된 스타일을 사용하기 위해서는

(#) 으로 아이디 이름을 지정합니다.

보통 id를 사용하는 이유는 자바스크립트를 사용해서 DHTML 을 적용하기

위해서 입니다.


클래스나 아이디 모두 스크립트에서 사용할수 있습니다.

클래스인 경우는

객체.className .......이런식으로 사용하구요

객체.id이름...........이런식으로 사용합니다.


다만 클래스는 본문내에(웹페이지내에소스중에) 동일한 이름을 가진 클래스를

여러번 사용할수 있기 때문에 스타일을 통해서 일관성을 주기 위해서

사용하구요

아이디는 본문내에 동일한 이름을 가진 아이디가 중복될수 없습니다.

그래서 스타일을 이용해서 일관성을 주는데는 사용할수 없습니다.(사용하려면

여러개의 틀린 이름을 가진 아이디를 정의 해야 합니다.)

이렇듯
 
홈페잊에 일관성을 주기 위해서는 클래스를 주로 사용하고

DHTML 을 적용할때에는 아이디를 주로 사용합니다.
 
출처 : 지식검색 검색중

홈페잊에 일관성을 주기 위해서는 클래스를 주로 사용하고

DHTML 을 적용할때에는 아이디를 주로 사용합니다.

IE6에서도 동일한 디자인을 만들기 위해 알아두어야 하는것.

*{
  margin:0;
  height:0;
}

html{
  _overflow:hidden;
}

body{
  _height:100%;
  _width:100%
  _overflow:auto;
}

#fixed{
  _position:absolute;
  _z-index:-1;
}


주의사항 - position:absolute는 무조건 fixed (absolute 사용불가) , z-index 설정에 따라 가로스크롤을 가리거나 링크,드래그 사용 불가.

표현문자

숫자표현

문자표현

설명

-

&#00;-&#08;

-

사용하지 않음

space

&#09;

-

수평탭

space

&#10;

-

줄 삽입

-

&#11;-&#31;

-

사용하지 않음

space

&#32;

-

여백

!

&#33;

-

느낌표

"

&#34;

&quot;

따옴표

#

&#35;

-

숫자기호

$

&#36;

-

달러

%

&#37;

-

백분율 기호

&

&#38;

&amp;

Ampersand

'

&#39;

-

작은 따옴표

(

&#40;

-

왼쪽 괄호

)

&#41;

-

오른쪽 괄호

*

&#42;

-

아스트릭

+

&#43;

-

더하기 기호

,

&#44;

-

쉼표

-

&#45;

-

Hyphen

.

&#46;

-

마침표

/

&#47;

-

Solidus (slash)

0 - 9

&#48;-&#57;

-

0부터 9까지

:

&#58;

-

콜론

;

&#59;

-

세미콜론

<

&#60;

&lt;

보다 작은

=

&#61;

-

등호

>

&#62;

&gt;

보다 큰

?

&#63;

-

물음표

@

&#64;

-

Commercial at

A - Z

&#65;-&#90;

-

A부터 Z까지

[

&#91;

-

왼쪽 대괄호

\

&#92;

-

역슬래쉬

]

&#93;

-

오른쪽 대괄호

^

&#94;

-

탈자부호

_

&#95;

-

수평선

`

&#96;

-

Acute accent

a - z

&#97;-&#122;

-

a부터 z까지

{

&#123;

-

왼쪽 중괄호

|

&#124;

-

수직선

}

&#125;

-

오른쪽 중괄호

~

&#126;

-

꼬리표

-

&#127;-&#159;

-

사용하지 않음


&#160;

&nbsp;

Non-breaking space

¡

&#161;

&iexcl;

거꾸로된 느낌표

&#162;

&cent;

센트 기호

&#163;

&pound;

파운드

¤

&#164;

&curren;

현재 환율

&#165;

&yen;

|

&#166;

&brvbar;

끊어진 수직선

§

&#167;

&sect;

섹션 기호

¨

&#168;

&uml;

움라우트

&#169;

&copy;

저작권

ª

&#170;

&ordf;

Feminine ordinal

&#171;

&laquo;

왼쪽 꺾인 괄호

&#172;

&not;

부정

­


&#173;

&shy;

Soft hyphen

?

&#174;

&reg;

등록상표

&hibar;

&#175;

&macr;

Macron accent

°

&#176;

&deg;

Degree sign

±

&#177;

&plusmn;

Plus or minus

²

&#178;

&sup2;

Superscript two

³

&#179;

&sup3;

Superscript three

´

&#180;

&acute;

Acute accent

μ

&#181;

&micro;

Micro sign (Mu)

&#182;

&para;

문단기호

·

&#183;

&middot;

Middle dot

¸

&#184;

&cedil;

Cedilla

¹

&#185;

&sup1;

Superscript one

º

&#186;

&ordm;

Masculine ordinal

&#187;

&raquo;

오른쪽 꺾인 괄호

¼

&#188;

&frac14;

4분의 1

½

&#189;

&frac12;

2분의 1

¾

&#190;

&frac34;

4분의 3

¿

&#191;

&iquest;

거꾸로된 물음표

A

&#192;

&Agrave;

Capital A, grave accent

A

&#193;

&Aacute;

Capital A, acute accent

A

&#194;

&Acirc;

Capital A, circumflex accent

A

&#195;

&Atilde;

Capital A, tilde

A

&#196;

&Auml;

Capital A, dieresis or umlaut mark

A

&#197;

&Aring;

Capital A, ring (Angstrom)

Æ

&#198;

&AElig;

Capital AE diphthong (ligature)

C

&#199;

&Ccedil;

Capital C, cedilla

E

&#200;

&Egrave;

Capital E, grave accent

E

&#201;

&Eacute;

Capital E, acute accent

E

&#202;

&Ecirc;

Capital E, circumflex accent

E

&#203;

&Euml;

Capital E, dieresis or umlaut mark

I

&#204;

&Igrave;

Capital I, grave accent

I

&#205;

&Iacute;

Capital I, acute accent

I

&#206;

&Icirc;

Capital I, circumflex accent

I

&#207;

&Iuml;

Capital I, dieresis or umlaut mark

Ð

&#208;

&ETH;

Capital Eth, Icelandic

N

&#209;

&Ntilde;

Capital N, tilde

O

&#210;

&Ograve;

Capital O, grave accent

O

&#211;

&Oacute;

Capital O, acute accent

O

&#212;

&Ocirc;

Capital O, circumflex accent

O

&#213;

&Otilde;

Capital O, tilde

O

&#214;

&Ouml;

Capital O, dieresis or umlaut mark

×

&#215;

&times;

Multiply sign

Ø

&#216;

&Oslash;

width="130"Capital O, slash

U

&#217;

&Ugrave;

Capital U, grave accent

U

&#218;

&Uacute;

Capital U, acute accent

U

&#219;

&Ucirc;

Capital U, circumflex accent

U

&#220;

&Uuml;

Capital U, dieresis or umlaut mark

Y

&#221;

&Yacute;

Capital Y, acute accent

Þ

&#222;

&THORN;

Capital Thorn, Icelandic

ß

&#223;

&szlig;

Small sharp s, German (sz ligature)

a

&#224;

&agrave;

Small a, grave accent

a

&#225;

&aacute;

Small a, acute accent

a

&#226;

&acirc;

Small a, circumflex accent

a

&#227;

&atilde;

Small a, tilde

a

&#228;

&auml;

Small a, dieresis or umlaut mark

a

&#229;

&aring;

Small a, ring

æ

&#230;

&aelig;

Small ae diphthong (ligature)

c

&#231;

&ccedil;

Small c, cedilla

e

&#232;

&egrave;

Small e, grave accent

e

&#233;

&eacute;

Small e, acute accent

e

&#234;

&ecirc;

Small e, circumflex accent

e

&#235;

&euml;

Small e, dieresis or umlaut mark

i

&#236;

&igrave;

Small i, grave accent

i

&#237;

&iacute;

Small i, acute accent

i

&#238;

&icirc;

Small i, circumflex accent

i

&#239;

&iuml;

Small i, dieresis or umlaut mark

ð

&#240;

&eth;

Small eth, Icelandic

n

&#241;

&ntilde;

Small n, tilde

o

&#242;

&ograve;

Small o, grave accent

o

&#243;

&oacute;

Small o, acute accent

o

&#244;

&ocirc;

Small o, circumflex accent

o

&#245;

&otilde;

Small o, tilde

o

&#246;

&ouml;

Small o, dieresis or umlaut mark

÷

&#247;

&divide;

Division sign

ø

&#248;

&oslash;

Small o, slash

u

&#249;

&ugrave;

Small u, grave accent

u

&#250;

&uacute;

Small u, acute accent

u

&#251;

&ucirc;

Small u, circumflex accent

u

&#252;

&uuml;

Small u, dieresis or umlaut mark

y

&#253;

&yacute;

Small y, acute accent

þ

&#254;

&thorn;

Small thorn, Icelandic

y

&#255;

&yuml;

Small y, dieresis or umlaut mark


HTML 코딩을 할때 문자표현을 사용하면 된다.
<head> 와 </head> 사이에 넣어 주세요.
<style type=text/css>
BODY {background-image:url(그림경로);
background-repeat:no-repeat;
background-position:right;
background-attachment:fixed;
}
</style>

저 위의 right 를 원하는 위치로 바꾸시면 됩니다


background-position:right; --> 이렇게하면 이미지가 우측으로 정렬은 되지만, 세로정렬은
기본정렬(중앙)로 항상 정렬됩니다.

background-position:right bottom;
--> 이렇게 해주시면 "우측, 하단"으로 고정하실수 있습니다.

바꿀수 있는 정렬위치
가로(left, center, right)
세로(top, middle, bottom)
Internet Explorer 7부터는 알파 PNG 이미지를 지원하기때문에 상관이 없지만 대다수가 아직 Internet Explorer 6 버전을 사용하고 있기에 종종 부자연스러운 이미지를 발견할 수 있다. 스크립트와 CSS를 이용하여 알파 PNG 이미지의 투명도를 설정할 수 있다. (ex.이미지의 클래스는 png24로 지정한다.)

다음과 같이 CSS를 정의한 후에 png 이미지의 클레스를 지정해 주면 png 파일도 웹에서 출력할 수 있다.

<
script language="javascript">
function setPng24(obj) {
var request_os = window.navigator.userAgent;
var os_array = request_os.split(";");

if(os_array[1] != " MSIE 7.0") {
obj.width=obj.height=1;
obj.className=obj.className.replace(/png24/i,'');
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');";
obj.src='';
}

return '';
}
</script>

<style type="text/css">
.png24 {tmp:expression(setPng24(this));}
</style>

<img src="a.png" class="png24" />

/////////////////////// HTML / Javascript ////////////////////////

1. 용어 정리
 (1) HTML (Hypertext Markup Language)
  웹페이지를 표시하는 기본언어
  최신의 HTML 표준은 4.01이지만 HTML을 XML과 결합한
  XHTML(eXtensible Hypertext Markup Language)이 권고안으로 나와있다.

 (2) CSS(Cascading Style Sheets)
  CSS 는 사용자 정의의 디자인 속성, 즉 글꼴, 크기, 색상, 이벤트 등을 지정할 수 있으며
  CSS 를 사용한 모든 페이지는 기존 버전과의 호환성 되게 어떤 브라우저에서도 내용을 열
  람할 수 있다. CSS 를 이용하여 설계자는 서로 다른 화면 해상도와 브라우저 상에서, 테이
  블 없이도 동일하게 보여질 수 있는 페이지를 생성할 수 있다.

 (3) XML(eXtensible Markup Language)
  XML(eXtensible Markup Language)은 HTML이나 CSS로서 표현되지 못하는 영역을
  DTD를 이용하여 정의하여 사용자 정의의 태그를 생성하여 제작할 수 있는 메타 마크업
  언어이다.

 (4) DOM(Document Object Model)
  DOM(Document Object Model)은 웹페이지에 표현되는 모든 속성에 대해 객체화 하여
  이를 자유 자재로 사용할 수 있도록 만든 것이다.

 (5) ECMAScript (Javascript)
  자바 스크립트는 W3C 표준으로 제정된 것은 아니다. 자바 스크립트는 주석 코드를
  사용하여 비 호환성의 웹 브라우저로부터 숨겨져야 한다. 자바 스크립트는
  HTML 문서의 Head 내에 위치해야 제대로 동작한다 따라서 문서의 Body 내에 자바 스
  크립트를 위치시키는 것은 피해야 한다.


2. 웹 표준 검사
 http://validation.w3.org

3. XHTML 사용해야 하는 이유
 (1) 호환성 및 확장 가능성이 좋다.
 (2) 유지비용 감소 및 재생산성 확대
 (3) 경량의 로딩속도

4. DOCTYPE 문서형식
 (1) HTML 2.0 표준문서 형식
  <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
 (2) HTML 3.2 표준 문서 형식
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
 (3) HTML 4.01 표준 문서 형식
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
 (4) XHTML 1.0 표준 문서 형식
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 (5) XHTML 1.1 표준 문서 형식
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

5. 일반 형식(Transitional)과 엄격한 형식(Strict)
 HTML 4.01 Transitional은 예전에 있었거나 없어진 태그도 지원하며,
 <font>에 지정된 스타일도 제대로 표현하여 준다.
 
 HTML 4.01 Strict은 HTML을 엄격하게 적용한다.
 <font> 태그에 적용된 스타일 보다는 CSS파일에서 지정된 스타일을 지켜 표현 해야 한다.

 가장 최상의 브라우저 호환성을 제공해 주는 문서 형식은 XHTML 1.0 Transitional을 사용하는 것이다.

6. XHTML 일반 문법 준수
 (1) 정확한 문서 구조 준수
  문서의 루트 요소는 html이 되어야 하며, 이 html 요소는 XHTML 네임스페이스를 지정해야 한다.
  <html xmlns="http://www.w3.org/1999/xhtml">
  표준 문서에는 head, title 및 body 구조 요소가 포함되어야 한다. 프레임 세트 문서에는
  head, title 및 frameset 구조 요소가 포함되어야 한다

 (2) 모든 요소는 완벽하게 중첩되어야 한다.
  <p>This is a <i>bad example.</p></i>
  <p>This is a <i>good example.</i></p>
 
 (3) 모든 속성 값은 인용 부호(“나 ‘)로 묶어야 한다.
  <a href=http://sample.com>틀린 경우</A>
  <a href="http://sample.com">맞는 경우</a>
 
 (4) 모든 요소와 속성은 소문자여야 한다.
  <A HREF="http://sample.com">틀린 경우</A>
  <a href="http://sample.com">맞는 경우</a>
 
 (5) 모든 요소는 닫아야 한다.
  XML을 사용할 수 없는 이전 브라우저와의 호환성을 위해 /> 앞에 공백이 있어야 한다
  (예: <br/>가 아니라 <br />)
 
 (6) 모든 속성값은 속성이 함께 선언되어야 한다.
  <option value="wrong" selected>틀린 경우</option>
  <option value="right" selected="selected">맞는 경우</option>
 
 (7) 모든 script 및 style 요소에는 type 속성이 포함되어야 한다.
  <script type="text/javascript” language="javscript"></script>
  <style type="text/css"></style>
 
 (8) 모든 img 및 area 요소에는 alt 속성이 포함되어야 한다.
 
 (9) 모든 SCRIPT내의 태그는 Escape 시켜야 한다.
  <script type="text/javascript">
  <!--
  // 틀린 표현!
  document.write("</P>");
  // -->
  </script>

  <script type="text/javascript">
  <!--
  // 맞는 표현!
  document.write("<\/P>");
  // -->
  </script>

  <script type="text/javascript">
  <![CDATA[
  ... <h1>데이터</h1> ...
  ]]>
  </script>

 (10) 모든 문서 내 URL에서 &를 쓰면 안 된다.
  <!.에러! --> <a href="foo.cgi?chapter=1&section=2">...</a>
  <!.적합! --> <a href="foo.cgi?chapter=1&amp;section=2">...</a>
 
 보너스
 테이블 구성시 <table><form></form></table> 식으로 form의 여백을 일부러
 없애는 경우가 있는데 이것은 css로 바로 해결 가능.
 form { margin: 0; }

7. CSS
 http://csszengarden.com
 http://phonophunk.com/

 (1) CSS의 선언
  <1> Selector 와 선언부 (p.text : Selector, {} : 선언부)
   p.text {
    margin: 0;
   }
  <2> Selector는 ,로 구분할 수 있다.  
   p.text,
   span.name {
    color: #666;
   }
  <3> 일반 선택자
   - 공용 선택자 * : 모든 태그 지정
    div.search * {
     vertical-align: middle
    } --> div.search 안의 모든 엘리먼트가 다 적용
   - 타입 선택자 A : 태그 A 지정
   - 클래스 선택자 .A : 클래스가 A인 태그를 지정
   - ID 선택자 #A : 아이디가 A인 태그를 지정
  <4> 복합 선택자
   - 하위 선택자 A B : 태그 A로 감싸져 있는 모든 태그 B 지정
    <ul id="list">
     <li><a href="list.html?id=34&amp;type=blah">item 34</a></li>
     <li><a href="list.html?id=35&amp;type=blah">item 35</a></li>
     ...
     ...
     <li><a href="list.html?id=99&amp;type=blah">item 99</a></li>
    </ul>
    --> a 태그에 속성 지정시
    ul#list a:link,
    ul#list a:visited {
     color: #999;
    }
    ul#list a:hover,
    ul#list a:active {
     color: #000;
    }
    --> 한방에 해결
   - 자식 선택자 A > B : 태그 A로 감싸져 있는 바로 하위단계 B만 지정
    <ul class="depth1">
     <li>
      <a href="about.html">Company</a>
      <ul class="depth2">
       <li>
        <a href="overview.html">Overview</a>
       </li>
       <li>
        <a href="ceo.html">Ceo.html</a>
       </li>
      </ul>
     </li>
    </ul>
    ul.depth1 li {
     background: #f9f9f9;
     border-bottom: 1px solid #ddd;
    }
    ul.depth1>li {
     background: #f9f9f9;
     border-bottom: 1px solid #ddd;
    }
   - 인접 선택자 A + B : 태그 A와 B가 연속으로 나와 있는 것을 지정
    <h2>브라우져 워</h2>

    <p>웹스탠다드를 보다 잘 이해하기 위해서는 브라우져 워에 대해서 짚어볼 필요가
    있습니다.</p>

    <h2>어쩌고 저쩌고</h2>

    <p>또다시 어쩌고 저쩌고</p>

    --> 제목 뒤 첫글자만 크게 하고 싶다면??
    h2+p:first-letter {
     float: left;
     font-size: 2.2em;
    }
  <5> 가상 클래스 선택자
   - :first-child선택자 A:first-child : 태그 A로 감싸져 있는 가장 처음 태그 지정
   - 언어선택자 A:lang(B) : 태그 A중 언어가 B인 태그 지정
   - 링크선택자 A:link : 태그 A중 링크가 걸려있는 것 지정
          A:visited : 태그 A중 링크가 걸려있고, 사용자가 이미 클릭한 태그 지정
   - 동적선택자 A:active : 태그 A중 사용자가 마우스를 누르고 있는 태그 지정
       A:hover : 태그 A중 사용자가 마우스 포인터를 위에 올려놓은 태그 지정
       A:focus : 태그 A중 사용자의 키보드 입력을 받는 태그 지정
  <6> 동적 선택자
   - :first-line선택자 A:first-line : 태그 A의 문단중 첫번째 줄 지정
   - :first-letter선택자 A:first-letter : 태그 A의 문단중 첫번째 글자 지정
   - :before선택자 A:before : 태그 A의 문단 앞을 지정
   - :after선택자 A:after : 태그 A의 문단 뒤를 지정

 (2) CSS 선언 방법
  <1> 외부 선언 (external css) - 우선순위가 낮다.
   <link rel="stylesheet" type="text/css" href="myCss.css" />
  <2> 엘리먼트에 직접 선언 (inline css)
   <div style="padding: 10px; border: 1px solid #eee;">
    <p>contents</p>
   </div>
  <3> 사용자 정의 스타일 (user defined css)
   가장 우선 순위가 높은 선언으로 웹페이지 제작자가 선언하는 것이 아니라 웹사이트를 이
   용하는 사용자가 직접 자신에게 맞는 스타일을 선언하는 방법이다.
 
 (3) CSS 적용의 체크 포인트 4가지
  <1> XHTML이 표준 문법이어야 한다.
  <2> XHTML 문서가 의미와 구조적으로 구성되어야 한다.
  <3> CSS가 표준 문법이어야 한다.
  <4> CSS를 표준대로 잘 구현한 브라우져를 이용해야 한다.

 (4) CSS Editor Firefox plugin
  <1> Web Developer 확장 기능
  <2> HTML Tidy

8. DOM / Script
 문서 객체 모델(DOM; Document Object Model)은 HTML내에 들어 있는 요소를 구조화
 객체 모델로 표현하는 형식이다. DOM은 플랫폼/언어 중립적으로 구조화된 문서를
 표현하는 W3C 표준 모델이 기반이 된다.

 (1) 객체 접근방법
  <1> document.getElementById(aId)
  <2> document.getElementByTagName(aTagName)
  <3> 기존방식 밖에 지원안하는 IE 지원
   function getObject(objectId) {
    if(document.getElementById && document.getElementById(objectId) {
     return document.getElementById(objectId); // check W3C DOM
    }
    else if (document.all && document.all(objectID) {
     return document.all(objectID); // IE4
    }
    else if (document.layers && document.layers[objectID] {
     return document.layer[objectID]; // NN4
    }
    else {
     return false;
    }
   }
 (2) 객체 사용 방법
  구성요소의 내용을 바꾸거나 수정하는 innerText, innerHTML, outerText, outerHTML을
  사용하는 것은 원래 잘못된 것이다. 왜냐하면 이는 W3C DOM 표준이 아니고 MS DOM 이기 때문이다.
  firefox에서는 innerHTML만이 지원된다. 나머지는 지원불가!
 
  속성 사용
  1. x.id 나 x.style 같은 방법으로 먼저 속성을 찾는다.
  2. 값이 나오지 않으면 x.getAttribute(“align”)나 x.getAttributeNode(“align”).value 로 찾는다.
  3. 그래도 나오지 않으면 다른 속성 인터페이스를 시도하되, attributes[]는 절대 사용하지 않는다.
 

런타임 오류
스크립트에서 시스템이 실행할 수 없는 동작을 수행하려고 할 때 발생하는 오류입니다.
런타임 오류는 해당 스크립트가 실행되는 동안 또는 변수식이 평가되거나 메모리가 동적으로 할당될 때 발생합니다.
오류 번호 설명
5029 배열의 길이는 유한한 양수값이어야 합니다
5030 배열의 길이는 유한한 양수값이어야 합니다
5028 Array 또는 arguments 개체가 필요합니다
5010 Boolean이 필요합니다
5003 함수 결과에 할당할 수 없습니다
5000 'this'에 할당할 수 없습니다
5006 날짜 개체가 필요합니다
5015 열거형 개체가 필요합니다
5022 예외적인 흐름으로 잡을 수가 없습니다
5020 정규식에 ')'가 필요합니다
5019 정규식에 ']'가 필요합니다
5023 함수에 유효한 표준 개체가 없습니다
5002 함수가 필요합니다
5008 잘못된 할당
5021 잘못된 범주의 문자 집합입니다
5014 JScript 개체가 필요합니다
5001 숫자가 필요합니다
5007 개체가 필요합니다
5012 개체 구성원이 필요합니다
5016 정규식 개체가 필요합니다
5005 문자열이 필요합니다
5017 정규식에서 구문 오류가 발생하였습니다
5026 소수부 자리수가 범위를 초과하였습니다
5027 정밀도가 범위를 초과하였습니다
5025 디코딩될 URI가 유효한 인코딩이 아닙니다
5024 인코딩될 URI가 유효하지 않은 문자를 포함하고 있습니다
5009 정의되지 않은 식별자
5018 예기치 않은 수량사
5013 VBArray가 필요합니다
구문 오류
스크립트에서 문법 규칙을 하나 이상 위반할 경우 발생하는 오류입니다.
구문 오류는 프로그램이 실행되기 전에 프로그램을 컴파일하는 단계에서 발생합니다.
오류 번호 설명
1019 루프 밖에서는 'break'를 사용할 수 없습니다
1020 루프 밖에서는 'continue'를 사용할 수 없습니다
1030 조건부 컴파일이 해제되었습니다
1027 'switch' 문에서 'default'는 한번만 나타날 수 있습니다.
1005 '('가 필요합니다
1006 ')'가 필요합니다
1012 '/'가 필요합니다
1003 ':'가 필요합니다
1004 ';'가 필요합니다
1032 '@'가 필요합니다
1029 '@end'가 필요합니다
1007 ']'가 필요합니다
1008 '{'가 필요합니다
1009 '}'가 필요합니다
1011 '='가 필요합니다
1033 'catch'가 필요합니다
1031 상수가 필요합니다
1023 16진수가 필요합니다
1010 식별자가 필요합니다
1028 식별자나 문자열 또는 숫자가 필요합니다
1024 'while'이 필요합니다
1014 유효하지 않은 문자입니다
1026 레이블을 찾을 수 없습니다
1025 레이블이 재정의되었습니다
1018 함수 밖의 'return' 문장
1002 구문 오류
1035 동일한 원본 줄에 수식이 뒤따라야 합니다
1016 종결되지 않은 주석입니다
1015 종결되지 않은 문자열 상수입니다

/*-----------------------------------------------------------------------------*/
// 특수문자 체크
// - obj : form name
/*-----------------------------------------------------------------------------*/
function inputCheckSpecial(obj){

 var ft = "true";
  obj = obj.elements;
 for (var i = 0; i < obj.length; i++){

  if( obj[i].type == "text" ||obj[i].type == "password"){

    var strobj = obj[i].value; //입력값을 담을변수.
    re = /[~!@\#$%<>^&*\()\-=+_\']/gi;
    if(re.test(strobj)){
   alert("특수문자는 입력하실수 없습니다.");
   obj[i].value=strobj.replace(re,"");
   obj[i].focus();
   ft += ",false";
    }else {
   ft += ",true";
    }//end if

  }//end if
 }//end for

 if (ft.indexOf("false")!=-1){
  return false;
 }else{
  return true;
 }
}

<script type="text/javascript" >
var childWindow1;

//보고서팝업
function openRpt(frm){
 childWindow1 = window.open("","srchRpt","scrollbars=no,toolbar=no,resizable=no,width=420,height=510,left=0,top=0");
 //alert(childWindow1);
 frm.target = "srchRpt";
 frm.action = "/fs/dis/com/DISRptSrch.jsp"
 frm.method="post";
 frm.submit();
 childWindow1.focus();
}


/*-- 팝업 닫기--*/
function windowClose() {
 try {
  if(childWindow1) childWindow1.close();
 }
 catch(e) {}


 try {
  if(childWindow2) childWindow2.close();
 }
 catch(e) {}
}
window.attachEvent("onunload",windowClose);

javascript 에서 배열을 사용할때 유의점!


배열의 length는 배열의 길이가 2이상일때만 구해올수 있다.

1개이하일때는 배열이 아닌 Object로 인식하기 때문이다.


1개이하일때는 undefined 처리를 해줘야 한다.


----------------------------------------------

sample

----------------------------------------------

  var chks;
 var frame = document.getElementById(obj);
  chks = document.all.popChk;


if(chks.length == undefined && chks.value!=''&& chks.value!=null){
   var divID =  chks.value;
   var emt = document.getElementById(divID);
   emt.removeNode(true);
 }else{
  for(i=0; i<chks.length; i++) {  
    if(chks[i].checked) {  
   var divID =  chks[i].value;
   var emt = document.getElementById(divID);
   emt.removeNode(true);
   i--;
    } //end of if
   }//end of for
  }//end of ifelse

/*******************************

document.all 에서 id값들을 가져오기

********************************/

 function viewElement()
 {
  var coll = document.all.tags("span");
  if (coll!=null)
  {
   for (i = 0; i < coll.length; i++)
     alert(coll[i].id);  
  }
 }



/*****************************

searchForm 에 있는 태그 이름들 가져오기

*******************************/

function setInfo()
{
 var es = document.searchForm.elements;
 for (var i = 0; i < es.length; i++)
 {
  var tname = es[i].tagName.toLowerCase();
 
  var oname = es[i].name;
  var otext = "";
  if (tname == "select")
  {
   var tobj = eval("document.searchForm." + oname);
   if (tobj.options.length < 1)
    continue;
   otext = tobj.options[tobj.selectedIndex].text;
  }
  else
   otext = es[i].value;
  try
  { /*검색조건*/
   eval("document.all.info_" + oname).innerText = otext;

   /*레포트출력검색조건*/
   eval("document.searchForm.rpt_" + oname).value = otext;
  }
  catch (e)
  {}//end of try catch
 }//end of for
}




---------------------응용-------------------------------------

function clearDetail(){
 var es = document.all.tags("span");
 if (es!=null)
 {
  for (var i = 0; i < es.length; i++)
  {
   var oname = es[i].id;
   try
   {
    if(oname.indexOf('detail_') > -1){
     document.getElementById(oname).innerHTML = "&nbsp;";
    }
   }
   catch (e)
   {}//end of try catch

  }//end of for
 }//end of if
}


최근 인터넷에서 가장 많이 보이는 숫자는
2.0입니다. 웹2.0이 나오면서 웹을 통해서 제공되고 있던 서비스들마다 2.0이라는 버전을 달고 서비스 중입니다. 그러한 서비스들의 또 다른 특징이라고 하면 모두 beta 딱지를 계속해서 붙여둔다는 점입니다. 웹2.0은 기존의 웹과는 조금은 다른 특징을 보이는 웹을 말합니다. 어떠한 특징들이 있을까요?

플랫폼으로서의 웹, 데이터에 대한 데이터(메타데이터), 영원한 베타(지속적인 실험과 개선), 참여구조를 이용한 네트워크 효과, 다양한 플랫폼을 통합적으로 지원, 롱 테일 효과 등이 있습니다. 앞으로 알아볼 Open API도 웹2.0이라는 개념이 나오면서 생긴 트렌드라고 할 수 있습니다. 이는 플랫폼으로서의 웹을 나타냅니다. API는 Application Programming Interface로 기존에는 데스크탑 환경에서 사용하는 프레임워크에 공개된 API에 필요한 데이터를 넣으면 원하는 정보를 얻을 수 있는 형태로 프로그래밍을 할 수 있는 개념을 말합니다. Open API는 말 그대로 공개된 API로서 기존의 웹서비스에서 제공하는 데이터를 이용할 수 있는 API를 의미합니다.

웹에서 Mashup이라고 하면 이러한 Open API를 이용해서 하나의 서비스를 만들어내는 것을 말합니다. 그렇다면 이러한 Open API는 어떻게 이용할 수 있을까요? 보통 Open API를 제공하는 사이트에서는 Open API만을 위한 페이지를 따로 가지고 있습니다. 기본적인 문서부터 Open API의 종류를 찾아볼 수 있도록 되어있습니다. 여기에서 Open API를 사용하기 위해서는 보통 사용자 인증 Key를 받아야 합니다. 이 Key를 이용해서 API를 사용할 수 있습니다. 데이터를 이용해서 API를 이용하게 되면 그 결과를 RSS나 XML, JSON과 같은 XML 기반의 파일을 받아서 작업을 할 수 있습니다. 간단하게 그림을 통해서 구조를 보면 다음과 같습니다.

사용자 삽입 이미지


그렇다면 Open API는 어디에서 제공하고 있을까요? 우리가 자주 사용하는 사이트들에서 대부분 제공하고 있습니다. 그 종류는 사이트마다 조금씩 다르지만 점차 확대되고 있는 추세입니다. 네이버와 같은 경우에는 기본적으로 블로그, 카페, 쇼핑, 책 검색을 비롯해서 지도까지 제공하고 있습니다. 구글의 경우에도 이와 비슷하게 제공하고 있으며 이러한 포털사이트 이외에도 블로그 사이트들에서도 기본적으로 Open API를 제공하고 있습니다. 따라서, Live Writer와 같이 외부 프로그램을 통해서 블로그에 글을 쓸 수 있습니다.

Open API가 무엇인지는 대충 알겠는데 왜 쓰는지 모르겠다고요? Open API는 말 그대로 열린 서비스입니다. 이것을 이용하여 할 수 있는 일은 끝이 없습니다. 이미 좋은 아이디어들로 만들어진 Mashup 사이트들도 상당히 많이 있습니다. 외국의 경우에는 지도서비스와 부동산서비스를 합쳐서 인터넷으로 부동산 사이트을 만들기도 했습니다. 우리나라의 경우에는 미친토끼라는 사이트가 있습니다. 약속장소를 정하기 위한 서비스로 지도 API를 통해서 위치를 선택하고 약속시간과 함께 메세지로 전송하여 약속을 정할 수 있습니다.

아직까지 Open API를 지원하는 국내 사이트가 많지 않고 개발자 입장에서도 Open API를 많이 이용하고 있는 편은 아니지만 꾸준히 그 활용범위가 늘어날 것이라고 생각합니다. 이는 다음과 네이버에서 주최하는 매쉬업 경진대회를 통해서도 알 수 있습니다. 꾸준한 Open API 발전을 위해서 경진대회를 통해서 아이디어를 구현하도록 하고 있습니다. Open API로 펼치는 나만의 웹2.0 세상!! 신나지 않나요?

'Web(웹) Study > OpenAPI' 카테고리의 다른 글

국내외 오픈 API  (0) 2008.09.02
MapAPI (네이버맵,야후맵,구글맵)  (0) 2008.07.09

Naver Open api (http://openapi.naver.com)
 -  검색결과API : 지식in, 블로그, 카페/카페글, 전문자료, 웹문서, 책, 쇼핑, 백과사전,
 -  국어/일어/영어사전,뉴스,지역,동영상,이미지,내PC
 -  검색관련 : 실시간 검색, 추천 검색 , 성인검색어, 오타변환, 바로가기
 -  서비스 API : 지식스폰서, 지도, 데스크톱 위젯


Daum Open api (http://dna.daum.net/apis/)
 - 검색 API : 신지식, 게시판, 카페, 블로그, 뉴스, 도서, 일본어, 동영상, 이미지
 - 키워드 API : 문맥 키워드 추천
 - UCC API : 블로그
 - 쇼핑 API :  디앤샾 상품 정보, 검색
 - 여행 API : 할인 항공권, 해외호텔,국내호텔및숙박, 여행상품검색
 - 인증 API : 어플리케이션 인증


Auction Open api (http://developer.auction.co.kr/Default.aspx)
 - 크게 2가지로 Web Application의 Service를 제공하는 APIv(일반 개발자를 대상으로)와 제휴 회사의 시스템과 통합을 지원하기 위해 제공되는 Partner API (ArcheSystem)
 - AUTHENTICATION, BUY, MEMBERE, SCROW, SELL, SEARCH API


오픈마루 Open api (https://api.openmaru.com/)
 - myid.net 관련 Open api
 - 스프링노트 관련 Open api
 - 귓속말 관련 Open api


Aladdin Open api (http://www.aladdin.co.kr)
 - 검색 API, 상품 API


Pandora Open api(http://interface.pandora.tv/)
 - Video 업로드 & 플레이 API


카멜레온 Open api (http://www.open-api.co.kr/)
- 카멜레온 Beta : User 관리, 동영상 업로드, 동영상 변환, 동영상 검색, 동영상 Display


maniadb Open api (http://www.maniadb.com/api/apispec.asp)
- 가수 검색 및 앨범 검색(현재 Key값 발부 안 하고 테스트가능)

위자드닷컴
http://wzdapi.com/

태그스토리 API
http://blog.tagstory.com/tagstory/10

한RSS API
http://www.hanrss.com/help/api/

이글루스 BlogAPI
http://help.egloos.com/2922

티스토리 BlogAPI
http://manual.tistory.com/719



외국 Open API 링크 

야후
http://developer.yahoo.com/

MS
http://dev.live.com/

야후! 지도 오픈 API
http://kr.open.gugi.yahoo.com/

YouTube API
http://www.youtube.com/dev

Flickr API
http://www.flickr.com/services

구글맵 API
http://www.google.com/apis/maps/

아마존(Amazon Web Services)
http://www.amazon.com/gp/browse.html?node=3435361


기타 Open api
http://pumfit.com/home/openapi
http://lifepod.co.kr 

'Web(웹) Study > OpenAPI' 카테고리의 다른 글

OpenAPI 라는 것은...?  (0) 2008.09.02
MapAPI (네이버맵,야후맵,구글맵)  (0) 2008.07.09
가끔 PHP로 웹페이지를 작성할 일이 있는데, 유용한 팁을 우연히 보게 되어 한글로 옮겨적어본다.
원본은 40 Tips for optimizing your php Code


1. If a method can be static, declare it static. Speed improvement is by a factor of 4.
메쏘드가 static이 될 수 있다면 static으로 선언하라. 4배 빨라진다.

2. echo is faster than print.
echo가 print보다 빠르다.

3. Use echo’s multiple parameters instead of string concatenation.
문자열을 이어붙이지 말고, echo를 이용하여 여러 개의 파라미터를 적어라.

4. Set the maxvalue for your for-loops before and not in the loop.
for 루프을 위핸 최대값(탈출조건)을 루프 안에서가 아니고 루프 시작 이전에 지정하라.

5. Unset your variables to free memory, especially large arrays.
메모리를 해제하기 위해 변수를 unset하라. 특히 커다란 배열은 그래야 된다.

6. Avoid magic like __get, __set, __autoload
__get, __set, __autoload와 같은 마법을 피해라.

7. require_once() is expensive
require_once()는 비싸다.

8. Use full paths in includes and requires, less time spent on resolving the OS paths.
include와 require를 사용할 때, 경로를 찾는데 시간이 적게 걸리는 full path를 사용하라.

9. If you need to find out the time when the script started executing, $_SERVER[’REQUEST_TIME’] is referred to time()
스크립트가 언제 실행했는지 알고 싶으면 time()보다 $_SERVER[’REQUEST_TIME’]이 좋다.

10. See if you can use strncasecmp, strpbrk and stripos instead of regex
정규표현식보다는 가능하면 strncasecmp나 strpbrk, stripos를 사용하라.
* 역주
strncasecmp: 두 문자열의 앞쪽 일부가 대소문자 구분없이 일치하는지 확인할 때 사용
strpbrk: 문자 집합에 속한 특정 문자가 문자열에 나타나는지 확인할 때 사용
stripos: 대소문자 구분없이 특정 문자열이 다른 문자열에 포함되는지 확인할 때 사용

11. str_replace is faster than preg_replace, but strtr is faster than str_replace by a factor of 4 str_replace가 reg_replace보다 빠르지만, strtr은 str_replace보다 4배 빠르다.

12. If the function, such as string replacement function, accepts both arrays and single characters as arguments, and if your argument list is not too long, consider writing a few redundant replacement statements, passing one character at a time, instead of one line of code that accepts arrays as search and replace arguments.
만약 문자열 교체 같은 함수가 배열과 문자열을 인자로 받아들이면, 그리고 그 인자 리스트가 길지 않다면, 배열을 한 번에 받아들여서 처리하는 것 대신에 한 번에 문자열을 하나씩 넘겨서 처리하는 것을 고려해봐라.

13. It’s better to use select statements than multi if, else if, statements.
여러 개의 if/else if 문장 대신에 select 문장을 사용하는 게 더 좋다.

14. Error suppression with @ is very slow.
@를 이용한 에러 출력 방지는 매우 느리다.

15. Turn on apache’s mod_deflate
Apache의 mod_deflate를 켜라.
*역주
mod_deflate는 서버의 출력을 클라이언트에게 보내기 전에 압축하는 모듈임

16. Close your database connections when you’re done with them
DB를 다 사용했으면 연결을 닫아라.

17. $row[’id’] is 7 times faster than $row[id]
$row[’id’]가 $row[id]보다 7배 빠르다.

18. Error messages are expensive
에러 메시지는 비싸다.

19. Do not use functions inside of for loop, such as for ($x=0; $x < count($array); $x) The count() function gets called each time.
for 루프의 표현식 안에서 함수를 사용하지 마라.
for ($x = 0; $x < count($array); $x)에서 count() 함수가 매번 호출된다.

20. Incrementing a local variable in a method is the fastest. Nearly the same as calling a local variable in a function.
메쏘드 안에서 지역 변수를 증가시키는 것이 거의 함수 안에서 지역 변수를 호출(증가?)하는 것만큼 빠르다.

21. Incrementing a global variable is 2 times slow than a local var.
전역 변수를 증가시키는 것이 지역 변수를 증가시키는 것보다 2배 느리다.

22. Incrementing an object property (eg. $this->prop++) is 3 times slower than a local variable.
객체의 멤버변수를 증가시키는 것이 지역 변수를 증가시키는 것보다 3배 느리다.

23. Incrementing an undefined local variable is 9-10 times slower than a pre-initialized one.
값이 지정되지 않은 지역 변수를 증가시키는 것이 미리 초기화된 변수를 증가시키는 것보다 9~10배 느리다.

24. Just declaring a global variable without using it in a function also slows things down (by about the same amount as incrementing a local var). PHP probably does a check to see if the global exists.
전역 변수를 함수 안에서 사용하지 않으면서 그저 선언하기만 해도 (지역 변수를 증가시키는 것만큼) 느려진다. PHP는 아마 전역 변수가 존재하는지 알기 위해 검사를 하는 것 같다.

25. Method invocation appears to be independent of the number of methods defined in the class because I added 10 more methods to the test class (before and after the test method) with no change in performance.
메쏘드 호출은 클래스 안에서 정의된 메쏘드의 갯수에 독립적인 듯 하다. 왜냐하면 10개의 메쏘드를 테스트 클래스에 추가해봤으나 성능에 변화가 없었기 때문이다.

26. Methods in derived classes run faster than ones defined in the base class.
파생된 클래스의 메쏘드가 베이스 클래스에서 정의된 것보다 더 빠르게 동작한다.

27. A function call with one parameter and an empty function body takes about the same time as doing 7-8 $localvar++ operations. A similar method call is of course about 15 $localvar++ operations.
한 개의 매개변수를 가지고 함수를 호출하고 함수 바디가 비어있다면(함수 내부에서 아무것도 실행하지 않는다면) 그것은 7~8개의 지역변수를 증가시키는 것과 똑같은 시간을 차지한다. 비슷한 메쏘드 호출은 마찬가지로 15개의 지역변수를 증가시키는 연산쯤 된다.

28. Surrounding your string by ‘ instead of ” will make things interpret a little faster since php looks for variables inside “…” but not inside ‘…’. Of course you can only do this when you don’t need to have variables in the string.
문자열을 이중 따옴표 대신에 단일 따옴표로 둘러싸는 것은 좀 더 빠르게 해석되도록 한다. 왜냐하면 PHP가 이중 따옴표 안의 변수를 찾아보지만 단일 따옴표 안에서는 변수를 찾지 않기 때문이다. 물론 문자열 안에서 변수를 가질 필요가 없을 때만 이렇게 사용할 수 있다.

29. When echoing strings it’s faster to separate them by comma instead of dot. Note: This only works with echo, which is a function that can take several strings as arguments.
문자열을 echo할 때 마침표 대신에 쉼표로 분리하는 것이 더 빠르다.
주의: 이것은 여러 문자열을 인자로 받아들이는 함수인 echo로만 작동한다.

30. A PHP script will be served at least 2-10 times slower than a static HTML page by Apache. Try to use more static HTML pages and fewer scripts.
Apache에 의해 PHP 스크립트는 정적 HTML 페이지보다 최소 2에서 10배 느리게 서비스된다. 더 많은 정적 HTML 페이지와 더 적은 스크립트를 사용하려고 노력하라.

31. Your PHP scripts are recompiled every time unless the scripts are cached. Install a PHP caching product to typically increase performance by 25-100% by removing compile times.
PHP 스크립트는 캐시되지 않으면 매번 재 컴파일된다. 컴파일 시간을 제거함으로써 25~100%만큼의 성능을 증가시키기 위해 PHP 캐싱 도구를 설치하라.

32. Cache as much as possible. Use memcached - memcached is a high-performance memory object caching system intended to speed up dynamic web applications by alleviating database load. OP code caches are useful so that your script does not have to be compiled on every request
가능한 한 많이 캐시하라. memcached를 사용하라. memcached는 고성능 메모리 객체 캐싱 시스템이다.

33. When working with strings and you need to check that the string is either of a certain length you’d understandably would want to use the strlen() function. This function is pretty quick since it’s operation does not perform any calculation but merely return the already known length of a string available in the zval structure (internal C struct used to store variables in PHP). However because strlen() is a function it is still somewhat slow because the function call requires several operations such as lowercase & hashtable lookup followed by the execution of said function. In some instance you can improve the speed of your code by using an isset() trick.
문자열을 가지고 작업하며 문자열이 특정 길이인지 확인할 필요가 있을 때, strlen() 함수를 쓸 것이다. 이 함수는 계산없이 zval 구조체에서 사용할 수 있는 이미 알려진 문자열 길이를 반환하기 때문에 매우 빠르다. 그러나 strlen()이 함수이기 때문에 여전히 조금 느리다. 왜냐하면 함수 호출은 언급된 함수의 실행 뒤에 lowercase와 hashtable lookup같은 여러 개의 연산을 호출하기 때문이다. 어떤 경우에는 isset() 트릭을 이용하여 코드의 스피드를 증가시킬 수도 있다.

Ex.
if (strlen($foo) < 5) { echo "Foo is too short"; }
vs.
if (!isset($foo{5})) { echo "Foo is too short"; }

Calling isset() happens to be faster then strlen() because unlike strlen(), isset() is a language construct and not a function meaning that it's execution does not require function lookups and lowercase. This means you have virtually no overhead on top of the actual code that determines the string's length.
isset()을 호출하는 것은 strlen()과는 달리 isset()이 언어 기본문법이고 함수가 아니기 때문에 함수 찾와 lowercase 작업을 필요로 하지 않으므로 strlen()보다 더 빠를 수도 있다. 이것은 가상적으로 문자열의 길이를 결정하는 실제 코드에 과부하가 없다는 것을 의미한다.

34. When incrementing or decrementing the value of the variable $i++ happens to be a tad slower then ++$i. This is something PHP specific and does not apply to other languages, so don't go modifying your C or Java code thinking it'll suddenly become faster, it won't. ++$i happens to be faster in PHP because instead of 4 opcodes used for $i++ you only need 3. Post incrementation actually causes in the creation of a temporary var that is then incremented. While pre-incrementation increases the original value directly. This is one of the optimization that opcode optimized like Zend's PHP optimizer. It is a still a good idea to keep in mind since not all opcode optimizers perform this optimization and there are plenty of ISPs and servers running without an opcode optimizer.
변수 $i의 값을 증가시키거나 감소키킬 때, $i++은 ++$i보다 조금 더 느릴 수 있다. 이것은 PHP의 특징이고 다른 언어에는 해당되지 않으니 좀 더 빨라질 것을 기대하면서 C나 Java 코드를 바꾸러 가지 마라. 안 빨라질 것이다. ++$i는 PHP에서 좀 더 빠른데 그것은 $i++에 4개의 opcode가 사용되는 대신에 3개만 필요하기 때문이다. 후증가는 사실 증가될 임시변수의 생성을 초래한다. 반면에 전증가는 원래 값을 직접 증가시킨다. 이것은 opcode가 Zend의 PHP optimizer처럼 최적화하는 최적화 기법의 하나이다. 모든 opcode optimizer들이 이 최적화를 수행하는 것은 아니고 많은 ISP와 server들이 opcode optimizer없이 수행되고 있기 때문에 명심하는 게 좋을 것이다.

35. Not everything has to be OOP, often it is too much overhead, each method and object call consumes a lot of memory.
모든 것이 OOP일 필요는 없다. 종종 그것은 너무 많은 과부하가 된다. 각각의 메쏘드와 객체 호출은 메모리를 많이 소비한다.

36. Do not implement every data structure as a class, arrays are useful, too
모든 데이터 구조를 클래스로 구현하지 마라. 배열도 유용하다.

37. Don't split methods too much, think, which code you will really re-use
메쏘드를 너무 많이 분리하지 마라. 어떤 코드를 정말 재사용할지 생각해봐라.

38. You can always split the code of a method later, when needed
항상 메쏘드의 코드를 나중에 필요할 때 분리할 수 있다.

39. Make use of the countless predefined functions
수많은 미리 정의된 함수를 활용해라.

40. If you have very time consuming functions in your code, consider writing them as C extensions
매우 시간을 소비하는 함수가 있다면, C 확장으로 작성하는 것을 고려해봐라.

41. Profile your code. A profiler shows you, which parts of your code consumes how many time. The Xdebug debugger already contains a profiler. Profiling shows you the bottlenecks in overview
당신의 코드를 프로파일해봐라. 프로파일러는 코드의 어떤 부분이 가장 많은 시간을 소비하는지 보여준다. Xdebug 디버거는 이미 프로파일러를 포함하고 있다. 프로파일링은 전체적인 병목을 보여준다.

42. mod_gzip which is available as an Apache module compresses your data on the fly and can reduce the data to transfer up to 80%
Apache 모듈로 사용가능한 mod_gzip은 실행 중에 데이터를 압축하여 전송할 데이터를 80%까지 줄일 수 있다.

<?  
shell_exec("rm -rf (계정경로)/zbxe/files");  
?>

위 소스를 rmrf.php로 저장후 변경하고자 하는 폴더 한단계 상위 폴더에 업로드후 웹에서 실행시켜주시면 됩니다.
이런식으로 하면. 노바디 권한(FTP상에서 삭제되지 않는 폴더를 삭제해 줍니다.)

EX// 삭제하고자 하는 files 디렉토리가 홈루트/zbxe/files에 잇다면
        rmrf.php는 홈루트/zbxe에 업로드후 실행.


files대신에 삭제고자 하는.. 폴더명을 입력하시면 됩니다.

주의
*하위 디렉토리의 퍼미션까지 조정됩니다.
<?php
$cmd = "chmod -R 777 files";
@exec($cmd);
echo "변경되었습니다.";
?>

위 소스를 chmod.php로 저장후 변경하고자 하는 폴더 한단계 상위 폴더에 업로드후 웹에서 실행시켜주시면 됩니다.
이런식으로 하면. 노바디 권한(FTP로 변경되지 않는 파일의 경우에도 퍼미션을 변경해준답니다~)

EX// 퍼미션 변경 하고자 하는 files 디렉토리가 홈루트/zbxe/files에 잇다면
        chmod.php는 홈루트/zbxe에 업로드후 실행.


files대신에 퍼미션 변경하고자 하는.. 폴더명을 입력하시면 됩니다.

주의
*하위 디렉토리의 퍼미션까지 조정됩니다.

1. 한 부분만 링크 점선없애기

<a href="http://blog4u.kr">블로그포유</a> 라는 링크가 있을 경우..
<a href="http://blog4u.kr">이 태그 사이에..
onfocus='this.blur()' 이 문구를 삽입하시면 됩니다..
ex> <a onfocus='this.blur()' href="http://blog4u.kr">블로그포유</a>


2. 페이지 전체의 링크 점선 없애기
<head></head> 사이에.. 아래 태그를 삽입하시면 됩니다..
<script language="javascript">
<!--
function allblur() {
for (i = 0; i < document.links.length; i++)
document.links[i].onfocus = document.links[i].blur;
}
//-->
</script>
이렇게 하시면 BODY에 이벤트를 발생 시키지 않아도 됩니다..

(참고 : 맵에는 적용 되지 않는다.)

1.  onfocus='this.blur()' 문구를 삽입 하지 않았을경우
이곳을 눌러주세요!!

2.  onfocus='this.blur()' 문구를 삽입 하였을 경우
이곳을 눌러주세요!!

탭을 누르면 ID -> PASSWORD -> LOGIN 순으로 가야 입력하기 편하죠?
아니라고요.? ㅡ.ㅡ 그럼 그냥 쓰시고요.. 그렇지 않은 분들을 위해
허접팁을 씁니다.

<input type=text name=user_id value=' size=9 class=input >
<input type=password name=password value=' size=9 class=input >
<input type=checkbox name=auto_login value=1 onclick=check_autologin()>

대략 이런식으로 outlogin skin 을 제작하실텐데요..

이렇게 제작한후 페이지의 중간에 위치하게될경우 또는 iframe으로
들어갈경우 탭을 누르면 이상한 곳으로 가거나 id입력하고 패스워드를
입력할려고 탭을 눌렀더니 엉뚱한곳으로 가거나  로그인버튼으로 가서
마음에 안드셨던 부분이 계셨죠...?

해답은 바로 tabindex 입니다.

<input type=text name=user_id value=' size=9 class=input tabindex=1>
<input type=password name=password value=' size=9 class=input tabindex=2>
<input type=checkbox name=auto_login value=1 onclick=check_autologin() tabindex=3>

예를들어 이와같이 수정하신다면 id 입력한후 tab을 눌러서 패스워드를 입력
하고 탭을 눌러 오토로그인 체크를 하실수 있게 됩니다. ^.^

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

원하는 위치에 배경 고정 시키기  (0) 2008.10.08
깔끔하게 링크에 점선 없애기...  (0) 2008.08.07
CSS핵(hack) 정리  (0) 2008.07.31
DOCTYPE HTML PUBLIC 선언  (0) 2008.07.15
XHTML 1.0 Transitional 기본 css  (0) 2008.07.09

CSS핵(hack) 정리

브라우저의 버그를 hack으로 해결할 수 있는 부분이 많이 있습니다만 그보다 사이트의 CSS구조를 설계할때 각 브라우저의 속성을 파악해고 조금만 더 주의해서 설계를 하시면 hack을 사용하지 않고도 해결할 수 있는 부분이 많이 있습니다. hack을 사용할때는 조금 더 신중하게 사용하시는게 좋습니다. 특히 예전 버전의 브라우저에 적용되었던 hack이 새로운 브라우저에 영향을 끼칠 가능성이 있으며 CSS를 변경 할 때 업무효율을 저하시키는 한 요인이 될 것 입니다.
Intenet Explorer계열의 브라우저에서 제대로 표시가 되지 않는 경우에는 일단 width값이나 float관련 설정을 변경해 보시는 것도 하나의 방법인 것 같습니다. 혹시 Intenet Explorer에서 float와 margin을 같은 방향으로 설정했을때 문제가 생긴 경우라면 이 포스트를 참조하시기 바랍니다.




Netscape 4 제외시키기

Netscape 4은 media속성값에 “screen”이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다.


이나


라고 지정할 경우 Netscape 4은 읽어 들이지 못한다.

부분적으로 읽어들이지 못하게 하는 경우에는 Caio’s hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다.

p {
/*/*/ color:white; /* */
}



Mac IE 4.5, Netscape 4 제외시키기

@import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다.
Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다.

@import url("/css/style.css")



Mac IE 5 제외시키기

CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다.

p {
/* \\*/ color:white; /* */
}



Win IE 4~5 제외시키기

셀렉터 바로 뒤에 /**/라고 적는다.

p/**/ { color:white;}



Win IE 4~5, Mac IE 4.5~5 제외시키기

프로퍼티와 값을 구분하는 콜론(;) 앞에 코멘트에 스페이스를 포함하여 /* */라고 적는다.

p { color/* */:white;}



Win IE 4~6, Mac IE 4, Netscape 4 제외시키기

셀렉터 앞에 html>body를 붙인다.

html>body p { color:white;}



Win IE 6 제외시키기

프로퍼티와 값을 구분하는 콜론(;)의 앞에, 스페이스와 코멘트를 /**/라고 적는다.

p { color /**/:white;}



star hack

셀렉트 앞에 *html를 붙이면, Win IE 4~6, Mac IE 4~5 등에는 스타일이 적용되고, 그 외의 브라우저에서는 적용되지 않는다.

*html p { color:white; }



underscore hack

프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면, Win IE 4~6에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

p { _color:white; }



hash hack

프로퍼티의 앞에 샾(#)을 붙이면, Win IE 4~6, Mac IE 5, Opera 7, Mozilla, Firefox에서는 스타일이 적용되고, 다른 브라우저에는 적용되지 않는다.

p { #color:white; }



star 7 hack

셀렉트의 앞에 html*을 붙이면, Win IE 5.5~6, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.

html*p { color:white; }



xmlns hack

속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법.
Mozilla, Fire-fox, Opera 7/8, Safari, IE 7 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

html[xmlns] h1 { color:red; }



:root hack

셀렉터의 앞에 :root를 붙이면, Mozilla, Firefox, Mac IE 5, Safari 등 :root유사클래스를 지원하는 브라우저에만 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

:root h1 { color:red; }



Tantek box model hack

voice-family프로퍼티를 이용한 가장 유명한 박스모델핵.

div#content {
width:500px;
voice-family: "\"}\"";
voice-family:inherit;
width:400px;
}



Win IE 5용 패스필터

@media tty {
i{content:"\";/*" "*/}}; @import '/css/style.css'; {;}/*";}
}/* */



Win IE 5.5용 패스필터

@media tty {
 i{content:"\";/*" "*/}}@m; @import '/css/style.css';/*";}
}/* */



Win IE 5-5.5용 패스필터

@media tty {
 i{content:"\";/*" "*/}}@import '/css/style.css';/*";}
}/* */



모던브라우저용 패스필터

@import "null?\"\{";
@import "/css/style.css";
@import "null?\"\}";

이 이외에도 많은 핵(hack)이 존재한다. CSS Filters (dithered.com)에 다양한 CSS hack이 잘 정리되어 있으므로 참고하시길…

2006년 7월 18일, IE7용의 핵(hack)을 추가.



IE7에만 적용

IE7에만 다른 스타일을 적용하는 방법은 해당 셀렉터의 앞에

*+html body

이나(*+html body는 Opera8~에도 적용되어 버리는 문제가 있기에 *+html>/**/body로 Opera8~ 전용 스타일을 기술하여야 한다. 참조:IE7のCSSバグとOpera CSS Hack)

*:first-child+html

을 기술한 다음 해당 셀렉터와 스타일을 작성하면 된다. 예를 들어 #banner라는 id셀렉터에 적용시키는 경우

*:first-child+html #banner {
      :
  [IE7용 스타일을 기술]
      :
}

라고 기술한다. IE7이외의 브라우저를 위한 원래의 #banner 스타일 설정은 IE7용 스타일 설정 앞에 기술한다(순서가 바뀌면 원하는 효과를 얻지 못한다. 참조:IE7 の CSS ハック)

#banner {
      :
  [IE7이외의 브라우저를 위한 스타일을 기술]
      :
}
*:first-child+html #banner {
      :
  [IE7용 스타일을 기술]
      :
}



IE 6 and below (IE6이하)

* html


IE 7 and below (IE7이하)

*:first-child+html, * html



IE 7 only (IE7전용)

*:first-child+html



IE 7 and modern browsers only (IE7과 모던브라우저)

html>body



Modern browsers only (not IE 7) (IE7이외의 모던 브라우저)

html>/**/body



Opera 9와 Safari 동시적용

html:first-child



Opera 9와 Safari 동시적용

/* XXX \*/로 코멘트 아웃하고 html:\66irst-child를 덧붙임으로써 Safari에만 CSS가 적용된다.

/* safari only \\*/
html:\\66irst-child div.globalContainer{
margin: 0 0 0 18px;
}
/* end */

내용중 잘못된 부분이나 수정, 추가가 필요한 부분이 있으시면 의견 부탁드립니다.

1.ASP 페이지 형식

①처음 만드는 ASP 페이지

ASP는 대소문자를 구분 안하지만 구분하는것이 정식 표기이며 좋은 습관이다.


  1. <% @Language=VBScript %>

    <html>

    <head>

    <title> 내가 처음 만드는 ASP 페이지 <title>

    </head>

    <body>

    현재 시간은 <% = Now %> 입니다.

    </body>

    </html>


②조금 더 복잡한 ASP 페이지 만들기

  1. <% @Language=VBScript %>

    <html>

    <head>

    <title> 두번째  ASP 페이지</title>

    </head>

    <body>

    <%

    For i = 1 To 10

    Response.Write i & "<br>"

    Next

    %>

    </body>

    </html>


미리보기


설명

<%

For i = 1 To 10

Response.Write i & "<br>"

Next

%>

이것을

<%

For i = 1 To 10

= i & "<br>"

Next

%>


이런식으로 바꾸면 안된다.

'=' 연산자는 데이터를 페이지를 출력하라는 의미이라고 했지만 <%=와 쌍으로 필 사용될 때 그런의미를 가지게 된다.

즉,'=' 연산자가 아니라 <%= 태그가 데이터를 페이지에 출력하라는 의미이다.

따라서 여러 라인의 코드를 통해 데이터를 출력 할때에는 <%= 대신에 response.write 를 써야한다.


2.ASP 데이터 형식

①Variant에 대해 이해하기

②Variant 데이터 형의 하위 형식

3.ASP의 변수

①변수의 선언

ASP(VBScript)에서 변수를 선언할 때는 Dim,Public, 또는 Private 중 한가지 키워드 사용

Public 이나 Priviate 는 주로 클래스를 구현할 때 클래스가 가지는 멤버 변수를 선언 할때 쓰이고 일반적으로 Dim을 사용한다.


Dim 변수명


Dim 변수1, 변수2, 변수3, ...


Dim myAge

myAge = 10


Dim myAge = 10 (X)

ASP(VBScript)에서는 변수의 선언과 동수에 값을 대입할 수 없다.


greeting = 안녕하세요? ASP 입니다.

Dim 키워드를 특별히 선언되지 않았음에도 사용할수 있다.

하지만 작성하는 코드양이 많아질수록 사용하는 변수 또한 늘어난다.

그러므로 변수를 선언하지 않고 사용하면 언제 부터 코드에 등장했는지, 어떤 용도로 사용하려고 했는지 상당히 헷갈릴 수 있다.

따라서 Dim 키워드로 사용하고자 하는 변수를 미리 선언한 뒤에 사용하는 것이 바람직한 코딩이다.


<% @Language=VBScript %>

<% Option Explicit

Dim myAge

myAge = 10

myName = ASP 3.0 이다. ' 여기서 오류가 발생하게 된다.

VBScript는 Option Explicit 라는 구문을 통해 Dim 사용해서 변수가 선언되었는지 확인함으로서 Dim 사용을 강제 할수 있다.

myName 변수는 Dim을 통해 선언되지 않은 변수 임으로 Option Explicit 구문으로 인해 오류를 발생시킨다.


②변수의 이름

 변수의 이름 정의 규칙

  1. 알파벳 문자로 시작해야 한다.
  2. 255자 까지만 사용할 수 있다.
  3. 변수의 이름은 변수가 선언된 범위 내에서 유일해야 한다.
  4. 마침표나 기타 특수문자(& , ^ , @)를 포함할 수 없다.

올바른 변수 선언 예

Dim myName

Dim my1stName , my2ndName

Dim my_point


올바르지 않는 변수 선언 예

Dim 1sPosition (X) '알파벳 문자로 시작 하지 않았다

Dim _toDo (X) '알파벳 문자로 시작 하지 않았다.

Dim my@Name (X) '기타 특수 문자를 사용하였다.


③변수의 사용 범위

변수는 변수가 선언되는 위치에 따라 그 사용 범위가 달라진다.


  • 전체 ASP 페이지에서 사용할 수 있는 전역 변수

<%@ Language=VBscript %>

<%

Dim globalVar '전역변수를 선언한다.

globalVar = 전역변수 입니다.


Response.Write globalVar

globalVar 변수는 ASP 페이지에 대해 전역적으로 선언 되었기 때문에

페이지 내에 존재하는 어떠한 코드에도 이 변수에 값을 대입하거나 가져올수 있다.


  • 특정 프로시저나 함수 내에서만 사용되는 프로시저 변수

<%@ Language=VBScript %>

<%

Function Add(a, b)

Dim c

c = a + b

add = c

End Function

.

Dim result

result = Add(1, 5)

Response.Write result  '6이 출력된다.

 Add 함수 내에 선언된 c라는 변수는 Add 함수 내부에서만 사용이 가능한 프로시저 변수

이 변수는 Add함수가 사용될 때 생성되었다가 Add함수가 실행이 끝나면 메모리에서 삭제 된다.


4.ASP 상수

VBScript에는 변수와 반대되는 개념으로 상수라는 개념이 있다.

변수 : 메모리를 확보하고 여기에 어떤 값이든 개발자가 원하는 값을 저장해 둘수 있다

상수 : 오직 한번만 값을 설정하고 그 이후에는 값을 설정할 수가 없다.


상수는 변수와 달리 Const라는 키워드에 의해 선언된다.

<%@ Language=VBScript %>

<%

Const MAX = 10

Dim i


For i = 1 TO MAX

Response.Write i & <br>

Next


MAX = 100 '오류가 발생한다.

%>

* 변수와 달리 상수는 선언과 동시에 값을 지정하는 것이 가능하다.

* 상수를 사용하는 이유는 개발자가 코드를 작성하는 동안 임의로 값을 변경할 수 없도록 하기 위해서 이다.


5.ASP 배열


①1차원 배열

DIm myArray(5)

위 코드는 myArray 라는 이름으로 총 6개의 원소를 갖는 배열을 생성하라는 의미 이다.

ASP에서는 배열의 각 원소에 접근하기 위해 배열의 인덱스를 사요하는데 이 인덱스는 0부터 시작

* 괄호안의 숫자는 배열의 원소의 개수가 아니라 배열의 마지막 원소의 인덱스인 것에 주의해야 한다.


myArray(0) = 강호동

myArray(1) = 홍길동

         ...

 myArray(5) = 역도산

선언된 배열에 값을 대입할 때는 일반적으로 변수에 값을 대입하는 것과 동일하다.


예제) 2-3 : 2-3.asp

<% Language=VBScript %>

<html>

<head>

<title> 차원 배열 </title>

</head>

<body>

Dim myArray(4)

myArray(0) = "바람의 파이터"

myArray(1) = "역도산"

myArray(2) = "해리포터"

myArray(3) = "반지의 제왕"

myArray(4) = "스파이더맨"

Response.Write "내가 좋아하는 영화<br><br>"

Response.Write myArray(0) & "<br>"

Response.Write myArray(1) & "<br>"

Response.Write myArray(2) & "<br>"

Response.Write myArray(3) & "<br>"

Response.Write myArray(4) & "<br>"

%>

</body>

</html>


1차원 배열은 다음과 같은 형태로 메모리에 저장

원소인덱스 0 1 2 3 4
바람의 파이터 역도산 해리포터 반지의 제왕 스파이더맨

②2차원 배열

Dim myArray(4, 3)

선언된 배열은 각각 5개 와 4개의 원소를 갖는 2차원 배열이면 1차원배열이 여러개 존재하는 표의 형태로 생각하면 된다.

  0 1 2 3 4
0 myArray(0, 0) myArray(0, 1) myArray(0, 2) myArray(0, 3) myArray(0, 4)
1 myArray(1, 0) myArray(1, 1) myArray(1, 2) myArray(1, 3) myArray(1, 4)
2 myArray(2. 0) myArray(2, 1) myArray(2, 2) myArray(2, 3) myArray(2, 4)
3 myArray(3, 0) myArray(3, 1) myArray(3, 2) myArray(3, 3) myArray(3, 4)

<% Language=VBScript %>

<html>

<head>

<title> 차원 배열 </title>

</head>

<body>

Dim myArray(4)

myArray(0, 0) = "바람의 파이터"

myArray(1, 0) = "역도산"

myArray(2, 0) = "태극기 휘날리며"

myArray(3, 0) = "실미도"

myArray(4, 0) = "어린신부"

Response.Write "내가 좋아하는 영화와 주연배우<br><br>"

Response.Write myArray(0, 0) & "-" & myArray(1, 0) & "<br>"

Response.Write myArray(0, 1) & "-" & myArray(1, 1) & "<br>"

Response.Write myArray(0, 2) & "-" & myArray(1, 2) & "<br>"

Response.Write myArray(0, 3) & "-" & myArray(1, 3) & "<br>"

Response.Write myArray(0, 4) & "-" & myArray(1, 4) & "<br>"

%>

</body>

</html>


6.ASP의 연산자

VBScript에는 연산자의 기능에 따라 산술 연산자, 논리 연산자, 비트 연산자 ,비교 연산자 로 나눌수 있다.


①ASP의 산술 연산자

7.ASP의 조건문

ASP에서 제공되는 조건문은 If ~ Then ~ Else 구문과 Select Case 구문 두가지가 있다.

①If ~ Then ~ Else

If ~ Then ~ Else구문은 If구문에 지정된 조건에 따라 특정 코드를 선택해서 실행될 수 있도록하는 구문이다.


⑴If 구문

If구문은 If구문의 조건이 True일 때 한줄의 코드를 실행하기 위해 사용한다.

If 조건문 Then 조건문이 참일 때 실행될 구문


예제) 2-7 : 2-7.asp

<% @Language=VBScript %>

<html>

<head>

<titile>If 구문</titile>

</head>

<body>

<%

Dim a

a = 5

if a = 5 Then Response.Write "a가 5보다 작다"

if a < 5 Then Response.Write "a는 5와 같다"

if a > 5 Then Response.Write "a는 5보다 크다"

%>

</body>

</html>


(2)If ~ End if

If 구문의 경우 If 구문의 조건식이 참일 때 실행될 문장이 단 한 문장인 경우에만 사용 할수 있다.

만일 if구문의 조건식이 참일 때 실행될 문장이 두줄 이상이라면 If ~ End If 구문을 사용해야 한다.

If 조건식 Then

조건식이 참일 때 실행될 문장1

조건식이 참일 때 실행될 문장2

.

조건식이 참일 때 실행될 문장n

End if


예제) 2-8 : 2-8.asp

<% @Language=VBScript %>

<html>

<head>

<titile>If ~ End If 구문</title>

</head>

<body>

<%

Dim a

a = 5

If a =5 Then

Response.Write "현제 변수의 a의 값은"

Response.Write a

Response.write " 입니다."

End If

</body>

</html>


(3)If ~ Else ~ End If 구문

지금까지 살펴본 If 구문은 If 구문의 조건식이 참일 때 특정코드를 실행하도록 하는 구문이었다.

If ~ Else ~ End If 구문을 사용하면 조건식이 거짓일 때 실행될 코드 또한 지정할 수가 있다.

If 조건식 Then

조건식이 참일 때 실행될 문장

Else

조건식이 거짓일 때 실행될 문장

End If


예제) 2-9 : 2-9.asp

<% @Language=VBScript %>

<html>

<head>

<title>If ~ Else ~ End If 구문</title>

</head>

<body>

<%

Dim a

a =5

If a = 5 Then

Response.Write "a는 5이다"

Else

Response.Write "a는 5가 아니다."

End If

%>

</body>

</html>

 If ~ Else ~ End If 구문에 의해 변수 a가 5라는 값을 가지는지 그렇지 않은지 검사하고 그에 따라 다른 결과를 출력할수 있다.


(4)If ~ ElseIf ~ Else ~ End If

If ~ ElseIf ~ Else ~ End If 구문은 여러개의 조건식을 검사하기 위한 If구문의 또 다른 형태이다.

If 조건식1 Then

조건식이 참일 때 실행될 문장

ElseIf 조건식2 Then

조건식2가 참일 때 실행될 문장

ElseIf 조건식n Then

조건식n이 참일 때 실행될 문장

Else

위의 조건식이 모두 거짓일 때 실행될 문장

End If


예제) 2-9 : 2-9.asp

<% @Language=VBScript %>

<html>

<head>

<titile>If ~ ElseIf ~Else ~ End If</title>

</head>

<body>

<%

Dim a

a = 5

If a < 5 Then

Response.Write "a는 5보다 작다"

Else a = 5 Then

Response.Write "a는 5이다"

Else

Response.Write "a는 5보다 크다"

End If

%>

</body>

</html>


② Select Case 구문

Select Case 구문은  여러개의 Else If 구문을 포함하는 경우의 If구문에 비해 실행 속도면에서 뛰어나다.


(1)일반적인 Select Case 구문의 사용

Select Case 변수

Case 변수값1

변수의 값이 변수 값 1일 때 실행될 구문

Case 변수값2:

변수의 값이 변수 값 2일 때 실행될 구문

Case 변수값n

변수의 값이 변수 값 3일 때 실행될 구문

Case Else

변수의 값이 Case 문에 열거된 값을 갖지 않을 때 실행될 구문

End Select


예제) 2-11 : 2-11.asp

<% @Language=VBScript %>

<html>

<head>

<title>Select Case 구문</title>

</head>

<body>

<%

Dim a

a = 3

Select Case a

Case 1

Response.Write "a는 1입니다.

Case 2

Response.Write "a는 2입니다.

Case 3

Response.Write "a는 3입니다.

Case 4

Response.Write "a는 4입니다.

Case 5

Response.Write "a는 5입니다.

Case Else

Response.Write "a는 5보다 큽니다.

End Select

%>

</body>

</html>


(2) Case 구문에서 여러값을 검사하기

Case 구문에서는 콤마를 이용하여 여러 값을 검사할 수 있다.


예제) 2-12 : 2-12.asp

<% @Language=VBScript %>

<html>

<head>

<title>Select Case 구문</title>

</head>

<body>

<%

Dim a

a = 3

Select Case a

Case 3, 5

Response.Write "a는 3 이거나 5 이다."

Case  Else

Response.Write "a는 3이나 5가 아니다."

End Select

%>

</body>

<html>


(3)Case 문에서 문자열 사용


예제) 2-13 : 2-13.asp

<% @Language=VBScript %>

<html>

<head>

<title>Select Case 구문</title>

</head>

<body>

<%

Dim myName

myName = "webgenie"

Select Case myName

Case "webgenie"

Response.Write "올바른 사용자 입니다."

Case Else

Response.Write "올바른 사용자가 아닙니다."

End Select

%>

</body>

</html>


8.ASP의 반복문

ASP에는 크게 4가지 반복문이 존재 한다.

①For ~ Next 구문

For ~ Next 구문은 사용 빈도가 상당히 높은 반복문

이구문은 코드가 반복될 회수를 미리 정의할 수 있다는 것이 가장 큰 장점이다.


For 카운트변수 = 초기값 To 종료값 [Step 카운트변수의 증가값]

반복 실행될 코드

Next


1)For ~ Next 구문의 사용예


예제)2-14 : 2-14.asp

<% @Language=VBScript %>

<html>

<head>

<title>For ~ Next</title>

</head>

<body>

Dim i

For i = 1 To 10

Response.Write "현재 i 변수의 값은"

Response.Write i

Response.Write " 입니다.<br>"

Next

%>

</body>

</html>

루프 카운터 변수 : For 문의 i 변수는  For문의 반복 회수를 자동으로 보관하게 되는 함수


2)For ~ Next 구문의 증가치 조절하기


 For i = 1 To 10 Step 1

Next


step 키워드를 사용해서 루프 카운트 변수의 증가치를 개발자가 임의로 변경할 수 있다.

<% @Language=VBScript %>

<html>

<head>

<title>For ~ Next 구문</title>

</head>

<body>

Dim i

For i = 1 To 10 Step 2

Response.Write "현재 i의 변수의 값은"

Response.Write i

Response.write " 입니다.<br>"

Next

%>

</body>

</html>

 i의 변수값은 1부터 10까지 2씩 증가하고 있다.


3)For ~ Next 구문의 반복 실행을 중단하기


예제)2-16 : 2-16.asp

<% @Language=VBScript %>

<html>

<head>

<title>Exit For 구문</title>

</head>

<body>

<%

Dim i

For i = 1 To 10

Response.Write "현재 i변수의 값은"

Response.Write i

Response.Write " 입니다.<br>"

If i = 5 Then Exit For

Next

%>

</body>

</html>


If 구문에 의해 루프 카운터 변수 i의 값이 5가 되면 Exit For 구문을 호출한다.

따라서 이 페이지는 총 5번의 루프를 실행하게 될 것이다.


②For Each ~ Next 구문

앞서 살펴본 For ~ Next 구문은 루프 카운터 변수를 이용하여 개발자가 지정한 회수만큼 반복 실행 할수 있는 구문이었다.

For Each ~ Next 구문은 배열이나 컬렉션에서 각 원소를 자동으로 순환해 주는 편리한 구문이다.


For Each 변수 in 배열 또는 컬렉션

반복 실행될 구문

Next


예제) 2-17 : 2-17.asp

<% @Language=VBScript %>

<html>

<head>

<title>For Each ~ Next</title>

</head>

<body>

<%

Dim myArray(4)

myArray(0) = "바람의 파이터"

myArray(1) = "역도산"

myArray(2) = "해리포터"

myArray(3) = "반지의 제왕"

myArray(4) = "스파이더맨"

Response.Write "내가 좋아하는 영화<br><br>"

For Each item in myArray

Response.Write item & "<br>"

Next

%>

</body>

</html>


For Each ~ Next 구문은 myArray 배열의 각 원소를 순환하면서 원소를 item 변수에 차례되로 대입한다.

For Each ~ Next 구문 역시 For ~ Next  구문과 같이 Exit For 구문을 이용하여 루프를 도중에 중단할수 있따.


③While ~ Wend 구문

While ~ Wind 구문은 주어진 조건식에 따라 조건식이 True인 동안 계속해서 코들르 반복실행할 수 있는 구문이다.

For ~ Next 구문도 그렇지만 이 구문 역시 다른 구문들과 달리 End while 로 끝나지 않는 것에 주의한다.


While 조건

'반복 실행될 구문

Wend


While ~ Wind은 For ~ Next 구문이나 다음에 나올 Do Loop 구문처럼 루프실행을 중단할수 있는 방법이 없다.


예제) 2-18 : 2-18.asp

<% @Language=VBScript %>

<html>

<head>

<title>While ~ Wend 구문 </title>

</head>

<body>

<%

Dim i

i = 1

While i <= 5

Response.Write "현제 i 변수의 값은"

Response.Write i

Response.Write " 입니다.<br>"

i = i + 1

Wend

%>

</body>

</html>

While 구문은 반복되는 코드를 실행할 때마다 조건을 검사하고 이조건이 True 일때만 반복문을 실행한다.


④Do ~ Loop

Do ~ Loop 구문은 방금 살펴본 While ~ Wend 구문에 비해 더욱 유연한 루프를 처리 할수 있다.

Do ~ Loop 구문은 While ~ Wend 구문과 비슷하지만 다음과 같이 두가지 형식으로 사용될 수 있다.


Do While 조건식

'조건식이 True인 동안 반복 실행될 구문

Loop


DO Until 조건식

'조건식이 True가 될 때까지 반복 실행될 구문

Loop


Do ~ Loop 구문은 While 나 Until 중 하나를 사용할 수 있으며 While 과 Until 위치에 따라 또 두가지 사용 형식을 가진다.


Do [While | Until ] 조건식

'반복 실행될 구문

Loop


Do

'반복 실행될 구문

Loop [While | Until ] 조건식


While 또는 Until 는 Do 옆에 나타나거나 Loop 옆에 나타 날수 있다.

따라서 총 4가지 형식이 존재하는 셈이다.


Do While ~ Loop 구문

Do While ~ Loop 구문은 조건식이 참인 동아 ㄴ반복해서 코드를 실행하는 구문이다.


예제) 2-19 : 2-19.asp

<% @Language=VBScript %>

<html>

<head>

<titile>Do While ~ Loop</titile>

</head>

<body>

Dim i

i = 10

Do While i < 5

Response.Write "현제 i 변수의 값은"

Response.Write i

Response.Write " 입니다.<br>"

i = i + 1

Loop

%>

</body>

</html>


Do While 구문에 지정된 i < 5 라는 조건은 처음 시작부터 False 라는 값을 갖게 된다.

따라서 이 페이지는 아무런 결과도 출력 되지 않는다.


Do ~ Loop While 구문

Do While ~ Loop 구문은 조건식을 판단한 후 이 조건식이 True이면 Do Loop 구문내의 코드를 반복 실행한다.

이에 반해 While ~ Do Loop 구문은 조건식을 한번 실행한 후 이 조건식이 True이면 Do Loop 구문내의 코드를 반복 실행한다.


즉, Do ~ Loop While 구문은 비록 조건식이 False라 하더라도 한번은 Do ~ Loop 구문내의 코드가 실행된다는 것이다.


예제) 2-20 : 2-20.asp

<% @Language=VBScript %>

<html>

<head>

<title>Do ~ Loop While 구문</title>

</head>

<body>

<%

Dim i

i = 10

Do

Response.Write "현재 i 변수의 값은"

Response.Write i

Response.Write "입니다.<br>"

i = i + 1

Loop While i < 5

%>

</body>

</html>


Do Until ~ Loop 구문

Do Until ~ Loop 구문은 조건식이 True인 동안이 아니라 True가 될 때까지 코드를 반복 실행한다.


예제) 2-21 : 2-21.asp

<% @Language=VBScript %>

<html>

<head>

<titile>Do Until ~ Loop구문</title>

</head>

<body>

<%

Dim i

i = 1

Do Untile i > 5

Response.Write "현제 i 변수의 값은"

Response.Write i

Response.Write " 입니다.<br>"

i = i + 1

Loop

%>

</body>

</html>


즉, i가 5보다 커질 때까지 12번 라인부터 16번 라인까지의 코드를 반복하라는 의미가 된다.


9.ASP의 기타 구문

① Option Explicit 구문

Option Explicit 구문은 ASP 개발자가 반드시 변수를 선언한 후에 사용하도록 한다.


예제) 2-22 : 2-22.asp

<% @Language=VBScript %>

<% Option Explicit %>

<html>

<head>

<titile>Option Explicit</title>

</head>

<body>

Dim myName

myName = 'webhenie'

myAge = 31

Response.Write "내 이름은 " & myName & "이며 "

Response.Write "내 나이는" & myName & "입니다."

%>

</body>

</html>


② On Error 구문

On Error 구문은 미약하지만 ASP 페이지가 실행 도중에 오류가 발생했을 때 오류 처리를 할 수 있도록 해주는 구문

On Error 구문은 다음과 같이 두가지 형태로 사용된다.


On Error Resume Next

On Error Goto 0


Resume Next 옵션

오류가 발생하면 오류가 발생한 코드의 실행을 중단하고 다음 라인의 코드를 계속 실행하여 결과를 출력한다.

Goto 0 옵션

오류가 발생하면 실행을 멈추고 오류의 내용을 페이지에 출력하게 된다.


예제) 2-23 : 2-23.asp

<% @Language=VBScript %>

<% Option Explicit %>

<% On Error Resume Next %>

<html>

<head>

<title>On Error 구문</title>

</head>

<body>

Dim myName

myName = "webgenie"

MyAge = 31

Response.Write "내 이름은 " & myName & "이며."

Response.Write "내 나이는 " & myAge & "입니다."

</body>

</html>

선언하지 않는 변수 myAge 때문에 발생한 오류의 내용이 출력되는 것이 아니라 코드 부분이 무시된채 실행결과가 출력된다.


③Set 구문

Set 구문은 ASP에서 매우 중요한 역할을 담당하는 구문이다.

ASP는 자체적으로 내장된 기능은 빈약한 편이지만 대신 COM기반 컴포넌트를 이용하여 거의 무한대로 기능을 확장할수 있다.

Set 구문은 이러한 컴퓨넌트를 이용할 때 주로 사용하게 되는 구문이다.


Set 변수 = 개체식

개체식이란 특정 COM 개체를 표현하는 식을 의미한다. 5장에서 Set 구문을 만나게 될 것이다.


④With ~ End With 구문

이 구문은 하나의 객체 참조를 이용하여 여러가지 작업을 수행해야 할 경우 객체 참조를 편리하게 도와주는 구문이다.


다음코드 5장에서 공부할게 될 Command 객체에 여러속성 값을 대입하는 예제이다.

With Command

.ActiveConnection = connection

.CommandText  = SELECT * FROM authors

.CommandType = adCmdText

End With

예제에서 사용된 With ~ End With 구문은  Command 객체에 대해 매번 객체 참조를 요구하는 세 구문을 간략하게 해준다.


위 예제에서 With ~ End With 구문을 사용하지 않으면 다음과 같이 작성해야 한다.

Command.ActiveConnection = connection

Command.CommandText = SELECT * FROM authors

Command.CommandType = adCmdText

무엇이 다른지 금방 눈에 들어올 것이다.


10. ASP의 프로시저

프로시저는 별도로 실행딜 수 있는 일련의 코드를 가지고 있는 코드 블록이다.

ASP에서는 프로시저를 크게 두 가지로 나눈다.

리턴 값이 없는 것을 프로시저(Procedure) , 리턴 값이 있으면 함수(Function)이라고 한다.


①프로시저를 사용하는 이유

웹 응용 프로그램의 구현에 사용된 코드의 재사용성을 높이고 프로그램을 모듈화하기 위해서이다.


프로시저 사용과정

  • 웹 응용 프로그램 전반에 걸쳐 공통적으로 사용되는 코드가 존재
  • 이 코드를 프로시저나 함수로 별도의 파일에 따로 정의
  • 서버측 인클루드(SSI : Server Side Include) 기능을 이용하여 필요한 페이지에 프로시저나 함수가 구현된 파일을 포함
  • 필요한 곳에 이 프로시저나 함수를 호출함으로써 쉽게공통된 기능을 이용할수 있다.

②프로시저 정의하기

프로시저는 Sub ~ End Sub 키워드를 이용하여 정의 , 함수는 Function ~ End Function 키워드를 이용하여 정의 된다.


Sub 포로시저이름

'프로시저를 구현하는 코드

End Sub


Function 함수 이름

'함수를 구현하는 코드

End Function


예제) 2-24 : 2-24.asp

<% @Language=VBScript %>

<%

Fuction GetMyName

Dim myName

myName = "webgenie"

GetMyName = myName

End Function


Sub PrintMyName

Response.Write "내이름은 webgenie 입니다."

End Sub

%>

<html>

<head>

<titile>ASP의 프로시저</title>

</head>

<body>

<%

Response.Write "내이름은" & GetMyName & "입니다.<br>"

PrintMyName

%>

</body>

</html>

한개의 함수와 한개의 프로시저를 정의하고 있다.


함수

GetMyName함수는 myName 이라는 변수를 선언하고 이 변수를 webgenie 라는 문자열을 대입한 뒤 이 변수를 리턴한다.

함수에서 값을 리턴할 때는 함수의 이름에 리턴할 겂을 대입하는 방법을 사용한다.


프로시저

PrintMyName프로시저는 Response.Write 구문을 이용하여 문자열을 출력한다.


③매개 변수가 있는 프로시저 (이해 안됨)

매개변수

프로시저나 함수가 실행되는데 필요한 데이터를 외부로 부터 반아오기 위한 변수를 의미

프로시저나 함수의 내부에서만 사용되는 지역 변수의 형태를 가지고 있다.


Sub | Function 프로시저이름 (매개변수1 , 매계변수2 , 매계변수3)

End Sub | Function


예제) 2-25 : 2-25.asp

<% @Language=VBScript %>

<%

Sub Print(msg)

Response.Write msg

End Sub

%>

<html>

<head>

<title>매개 변수를 갖는 ASP의 프로시저</title>

</head>

<body>

<%

Dim i

For i To 5

Print "현제 i 변수의 값은"

Print  i

Print "입니다.<br>"

Next

%>

</body>

</html>


④매개 변수의 전달 방식

함수나 프로시저에 선언된 매개 변수에 데이터를 전달할 때 사용하는 방식은 크게 두가지가 있다.

1.매개변수에 데이터의 복사본을 전달하는 방법 , 값에 의한 호출(Call By Value)

2.데이터에 대한 참조를 전달하는 , 방식 참조에 의한 호출(Call By Reference)


두가지 방식의 구분은 ByVal , ByRef 키워드로 가능하며 둘중 어떤 키워드도 사용하지 않은 매개변수는 ByVal이 된다.


예제) 2-26 : 2-26.asp

<% @Language=VBScript %>

<%

Sub SwapByVal(ByVal a,ByVal b)

Dim temp

temp = b

b = a

a = temp

End Sub

Sub SwapByRef(ByRef a, ByRef b)

Dim temp

temp = b

b = a

a = temp

End Sub

Dim num1 , num2

num1 = 10

num2 = 5

%>

<html>

<head>

<titile>ByVal과 ByRef</title>

</head>

<body>

<%

SwapByVal num1 , num2

Response.Write "num1은" & num1 & ", num2는 " & num2 & "입니다.<br>"

SwapByRef num1 , num2

Response.Write "num1은" & num1 & ", num2는 " & num2 & "입니다.<br>"

%>

</body>

</html>


3 Global.asa 파일과 ASP 의 내장 객체

1.Global.asa 파일

Global.asa 파일은 웹 응용 프로그램의 전반에 영향을 미치는 어떤 작업을 위한 파일이다.

확장자 ASA는 웹응용 프로그램을 위한 확장자이다.

Global.asa 파일은 기본적으로 RUNAT=Server라는 특성을 가지고 있는 스크립트 태그로 이루어져 있다.

RUNAT=Server 라는 특성 때문에 <SCRIPT>태그에 작성된 코드는 서버에서 해석되고 실행된다.

<SCRIPT LANGUAGE=VBScript RUNAT=Server>

</SCRIPT>

이 태그 내부에 4개의 이벤트를 처리하기 위한 코드를 작성할수 있다.


① Application 과 Session의 이해

ASP를 이용하여 웹사이트를 구축하면 이 웹 사이트가 바로 하나의 웹 응용 프로그램이 된다.

Application 이라는 개념은 웹 응용프로그램을 실행하는 모든 사용자가 공유할 수 있는 개념으로 생각하면 된다.

Session 은 웹 응용 프로그램과 이를 사용하는 개별적인 사용자 사이에 생성되는 가상의 공간이다.


②Global.asa 파일에서 제공하는 이벤트

가장 처음 접속하는 사용자에 의해 웹 응용 프로그램이 본격적으로 실행되기 시작할 것이다.

이때 한번의 이벤트가 발생하는데 이것이 바로 Aplication  객체의 Start 이벤트이다.

이것은 Sub Aplication_OnStart ~ End Sub  형식으로 구현된다.


두번째 사용자가 접속하면 새로운 사용자를 위한 새션이 생성 되므로 그 이후로는 Session 객체의 Start 이벤트가 실행된다.

이것은 Sub Session Onstart ~ End Sub 형식으로 구현된다.


사용자가 웹 응용프로그램의 실행을 마친후 20분이 지나면 세션이 종료되면서 Session OnEnd 이벤트가 발생된다.

이것은 Sub Sesson OnEnd ~ End Sub 형식으로 구현된다.


마지막 사용자가 웹 응용프로그램의 실행을 마친후 20분이 지나면 Session End 이벤트와 Aplication End 이벤트가 발생된다.

이것은 Sub Application OnEnd ~ End Sub 형식으로 구현된다.


Global.asa 파일의 이벤트 구현하기

예제) 3-1: global.asa

<SCRIPT LANGUAGE=VBScript RUNAT=Server>

Sub Application_OnStart

Application("current_Visit") = 0

End Sub


Sub Session_Onstart

Application("current_visit") = Cint(Application("current_visit")) + 1

End Sub


Sub Session_OnEnd

Application("current_visit") = Cint(Application("current_visit")) - 1

End Sub


Sub Application_OnEnd

Application("current_Visit") = 0

End Sub


예제) 3-2: 3-1.asp

<% @Language=VBScript %>

<html>

<head>

<title>Global.asa 파일 예제</title>

</head>

<body>

현제 접속자 수는 <% = Application("current_visit") %>명 입니다.

</body>

<hml>

하나의 IE를 더 실행시켜보면 접속자수가 1씩 증가하는 것을 볼수 있을 것이다.


2.ASP의 주요 내장 객체

ASP는 개발자가 웹 응용 프로그램을 개발하는데 필요한 작업을 수행하는데 도움을 주기 위해 5개의 내장 객체를 지원한다.

객체 설명
Application 웹 응용 프로그램 전반에 적용될 데이터를 보관하거나 관련된 작업을 수행하는데 함수들을 제공한다.
Session 개별 사용자에게 할당되는 세션을 구현한 객체이다.
Server 웹 서버와 관련된 작업을 수행하는 함수들을 제공한다.
Request 사용자의 요청과 관련된 데이터와 작업을 수행하기 위한 함수들을 제공한다.
Response

서버와 응답과 관련된 데이터와 작업을 수행하기 위한 함수들을 제공한다.

중요한 것들임으로 꼭 기억하자..


*참고*


메서드

함수와 동일한 개념으로 객체 지향 프로그램이 언어에서 함수의 역할으 수행하는 요소를 말한다.


컬렉션

배열과 유사한 개념이다. 각 원소마다 고유의 키 문자열이 있다. 따라서,

배열처럼 인덱스를 통해 원소에 접근할수 있는 방법 외 원소의 키 문자열을 이용하여 각 원소에 접근할수 있는 방법도 제공

또한 배열과 달리 한 원소를 제거하면 컬렉션이 자동으로 재배치되는 등 편리한 기능을 제공하지만

배열에 비해 많은 서버 메모리를 사용한다는 단점도 있다.


① Application 객체

Application 객체는 웹 응용 프로그램 전반에 걸처 적용될 수 있는 데이터의 보관 및 제어 를 위한 컬렉션과 메서드를 제공한다


Application 객체에 데이터를 보관하기 위한 코드는 다음과 같다.

Application(키 문자열) = 값


Application에 보관되는 데이터는 Contents 컬렉션에 추가된다.

이 컬렉션은 각 데이터를 고유의 키 문자열로 구분하기 때문에 기 문자열과 그에 저장될 값이 필요하다.

또 동일한 문자열을 갖는 키 문자열이 존재할 수 없다.


1.Application 객체의 컬렉션

Application 객체는 웹 응용 프로그램 전반에 걸쳐 사용될 수 있는 변수의 값이나 속성들을 컬렉션 형태로 가지고 있다.


  • Applicaton.Content  컬렉션

이 컬렉션은 Application 객체에 선언된 모든 항목들의 목록을 가지고 있는 컬렉션이다.

예제) 3-3 : 3-2.asp

<% @Language=VBScript %>

<% Option Explicit %>

<html>

<head>

<title>Application.Content 컬렉션</title>

</head>

<body>

<%

Dim i

Dim key

For i = 1 To 10

Application("item" & i) = "아이템" & i

Next

For Each key In Application.Contents

Response.Write key & "=" & Application(key)

Response.Write "<br>"

Next

%>

</body>

</html>


For ~ Next 구문은 i 변수의 값을 1부터 10까지 변화시키면서

Application 객체에 Item이라는 문자열과 i 변수의 값을 연결한 문자열을 해당키에 대한 값으로 Application 객체에 추가한다.

이렇게 추가된 10개의 아이템은 모두 Application 객체의  Content 컬렉션에 포함 된다.

Content 컬렉션에 포함되어 있는 항목을 Application(ket)같이 eky변수를 사용해서 해당 문자열의 원소값을 가져올 수있다.


  • Application.StaticObject 컬렉션

<OBJECT> 태그에 의해 선언된 객체들으 목록을 보관하고 있는 컬렉션이다.

<OBJECT> 태그를 통한 사용하려는 객체를 Application 객체에 추가하려면 <OBJECT>태그에 SCOPE 특성을 사용한다.

<OBJECT id=obj1 progid=서버객체 아이디 SCOPE=Application Runat=Server></OBJECT>

이와 같이 선언된 객체는 Application 객체에 보관된다.

이후 id 특성에 지정된 obj1이라는 이름을 키문자열로 사용하여 Application 객체를 통해 액세스할 수 있다.


  • Application.Contents.Remove 컬렉션

Application 객체의 Contnets 컬렉션은 Remove라는 메서드를 통해 Application 객체에 선언된 변수와 값을 삭제 할수 있다.


예제) 3-4 : 3-3.asp


<% @Language=VBScript %>

<% Option Explicit %>

<html>

<head>

<title>Application.Content 컬렉션</title>

</head>

<body>

<%

Dim i

Dim key

For i = 1 To 10

Application("item" & i) = "아이템" & i

Next

Application.Content.Remove "item3"

Application.Content.Remove "item5"

For Each key In Application.Contents

Response.Write key & "=" & Application(key)

Response.Write "<br>"

Next

%>

</body>

</html>

Item3과 Item5 항목이 컬렉션에서 삭제되어 출력되지 않는 것을 확인할 수 있다.


  • Application.StaticObject.remove 컬렉션

Remove메서드는 StaticObject 컬렉션에도 제공되어서 Application.StaticObject.remove 이런 식으로 사용할 수 있다.


  • Application.Contents.RemoveAll 컬렉션

Contents 컬렉션에 보관된 모든 항목을 제거하는 기능을 제공한다.


  • StaticObject.Contents.RemoveAll 컬렉션

StaticObjects 컬렉션에서도 적용되어서 StaticObject.Contents.RemoveAll 이런식으로 사용할 수 있다.


2.Application 객체의 메서드

Application 객체는 단 2개의 메서드를 제공하는 서로 짝을 이루어져 사용된다.

  • application.Lock 메서드와 application.UnLock 메서드

두명이 동시에 사용하는 상황에서 application개체에 데이터를 동시에 변경하려고 한다면 원치않는 결과가 나타날 수 있다.

이런 이유로 application 객체는 어떤 사용자가 자신이 보관하고 있는 데이터를 변경할 때

다른 사용자가 데이터의 변경 작업을 수행할 수 없도록 하는 기능과 이를 해제 하는 기능을 제공한다..


<%
Application.Lock

'Application 객체에 보관된 데이터를 변경한느 작업을 수행한다

Application.UnLock

%>


② Session 객체

Session 객체는 웹 서버와 웹 서버에 접속한 개별적인 사용자 사이의 독립되 공간을 표현한다.

개별적인 세션을 관리하기 위한 속성과 컬렉션, 메서드를 제공 하는 객체이다.

Session 객체는 다른사용자의 접근이 허용 되지 않아서 사용자마다 별도로 관리해야 한느 데이터를 보관하기에 알맞다.


Session 객체에 데이터를 보관하기 위한 코드는 다음과 같다.

Session(키 문자열) = 값


Session 객체 역시 Application 객체와 마찬가지로 키와 값의 쌍으로 이루어지는 코드를 작성해야 한다.

이렇게 추가된 데이터는 Session.Content 컬렉션에 추가된다.


1.Session 객체의 속성

Session 객체는 개별적인 상요자 공간을 구별하고 관리할 수 있는 몇가지 속성들을 제공한다.

이들 속성의 일부는 속성 값을 가져올 수만 있으며 개발자가 임의로 값을 설정할 수 없는 일기 전용 속성이다.


  • Session.SessionID 속성

웹서버에 하나의 세션이 생성될 때마다(새로운 사용자가 접속) 해당 사용자의 세션을 구별하기 위해 IIS가 부여하는 고유한 값을 가져오는 읽기 전용의 속성이다.


Session ID 속성의 값을 확인하기 위한 예제

예제) 3-5 : 3-4.asp

<% @Language=VBScript %>

<html>

<head>

<titile>Session.SessionID 속성</title>

</head>

<body>

Response.Write "현재  세션 ID: "

Response.Write Session.SessionID

%>

</body>

</html>


  • Session.Timeout 속성

Global.asa에서 20분 동안 사용자가 웹 응용 프로그램의 실행종료 또는 서버에 요청을 보내지 않으면 세션을 파기한다고 했다.

20분은 기본값이며 Session 객체의 Timeout 속성을 이용해서 지정된 시간이 지난후 세션을 자동적으로 파기 시킬수 있다.


<% Session.Timeout = 10 %>

분단위로 지정 되며, 위 예제를 실행하면 사용자가 웹 응용프로그램을 종료한 후 10분 뒤에 세션이 자동적으로 파기된다.


2.Session 객체의 컬렉션


Session객체는 Application 객체와 완전히 동일한 Content컬렉션과 StaticObject컬렉션을 제공한다.

뿐만아니라 이컬렉션들은 각각 Remove,RemoveAll 메서드를 제공한다.


  • Session.content  
  • Session.content.Remove
  • Session.content.RemoveAll
  • Session.StaticObject
  • Session.StaticObject.Remove
  • Session.StaticObject.RemoveAll

3.Session 객체의 메서드


  • Abandon 메서드

Session객체는 Abandon 이라는 단 하나의 메서드를 제공한다.

이 메서드는 개발자가 필요한 때에 세션을 파기할 수 있도록 해준다.


<% Session.Abandon %>


로그인과 로그아웃 구현하는 방법

1.로그인구현 = Session에 UserID라는 문자열과 사용자의 ID를 저장한다.

   - 빈문자열을 받으면 로그인하지 않은 사용자

   - 어떤 문자열을 받으면 로그인한 사용자

2.로그아웃구현

   - 로그아웃 페이지를 호출하게 되면 로그아웃 페이지에서 Session.Abandon 메서드를 호출 강제적으로 세션을 파기한다.


④Request 객체

Request 객체는 클라이언트로부터 서버로 전송되는 요청을 표현하기 위한 객체

클라이언트에서 전송된 데이터를 서버에서 액세스하기 위한 여러 가지 속성과 컬랙션, 메서드를 제공한다.


1.Request 객체의 속성

Request 객체는 그 반대 되는 개념인 Response 객체에 비하면 그구조가 매운 단순하다.


  • TotalByte 속성

클라이언트로 부터 서버로 전달된 데이터의 총 바이트수(크기)를 보관하고 있는 속성

GET 방식으로 전달된 데이터는 이 속성에 포함되지 않으며 POST방식으로 전달된 데이터만 이 속성을 사용할수 있다.

'Web(웹) Study > ASP .NET' 카테고리의 다른 글

웹서버 컨트롤  (0) 2008.07.15
VBScript개요와 기본적인 사용법  (0) 2008.07.15
데이터그리드로 데이터 전송  (0) 2008.07.15
XML 파일 읽기  (0) 2008.07.15
Global.asa 파일의 구성  (0) 2008.07.15

보통 로그인할때 아이디를 저장하는 기능 입니다.

다음번 로그인 할때 아이디가 자동으로 입력되도록 쿠키로 설정하는 것입니다.


-----------------------------------------------------------------------------


<html>
<head>
<script language="javascript">
function setCookie (name, value, expires) {
  document.cookie = name + "=" + escape (value) +
    "; path=/; expires=" + expires.toGMTString();
}

function getCookie(Name) {
  var search = Name + "="
  if (document.cookie.length > 0) { // 쿠키가 설정되어 있다면
    offset = document.cookie.indexOf(search)
    if (offset != -1) { // 쿠키가 존재하면
      offset += search.length
      // set index of beginning of value
      end = document.cookie.indexOf(";", offset)
      // 쿠키 값의 마지막 위치 인덱스 번호 설정
      if (end == -1)
        end = document.cookie.length
      return unescape(document.cookie.substring(offset, end))
    }
  }
  return "";
}
function saveid(form) {
  var expdate = new Date();
  // 기본적으로 30일동안 기억하게 함. 일수를 조절하려면 * 30에서 숫자를 조절하면 됨
  if (form.checksaveid.checked)
    expdate.setTime(expdate.getTime() + 1000 * 3600 * 24 * 30); // 30일
  else
    expdate.setTime(expdate.getTime() - 1); // 쿠키 삭제조건
  setCookie("saveid", form.id.value, expdate);
}
function getid(form) {
  form.checksaveid.checked = ((form.id.value = getCookie("saveid")) != "");
}
</script>
</head>
<body onLoad="getid(document.mainform)">
<form name=mainform>
아이디 <input type=text name=id>
암호 <input type=password name=pw>
<input type=checkbox name=checksaveid onClick="saveid(this.form)">아이디 기억
</form>
</body>
</html>

DOCTYPE HTML PUBLIC 선언

HTML 문서의 첫머리에 <!DOCTYPE..으로 시작하는 것을 본적이 있을것이다.

가장 흔히 사용되는 DOCTYPE 코드는 일반형식(Transitional)과 엄격한 형식(Strict)으로 나누어 진다. HTML 4.01 Transitional은 예전에 있었거나 없어진 태그도 지원하며, <font>에 지정된 스타일도 제대로 표현해 준다. HTML 4.01 Strict 은 HTML을 엄격하게 적용한다. <font>태그에 적용된 스타일 보다는 CSS파일에서 지정된 스타일을 지켜 표현 해야 한다.

DOCTYPE을 규정하는 가장 좋은 방법은 Strict 형식을 사용하는 것이다. 이것은 CSS를 통해 모든 HTML 태그의 속성을 모두 자유자재로 규정 할 수 있기 때문이다. 즉, b{font-weight:normal;}라고 적는 다면 더 이상 <b>는 굵은체로 표시되지 않는다. 그러나, 아직 브라우저 호환성 때문에 <embed>나 비표준 태그를 사용 해야할 필요가 있으므로 현재 상태에서 가장 최상의 브라우저 호환성을 제공해 주는 문서 형식은 XHTML 1.0 Transitional 을 사용 하는 것이다.

HTML 4.01 호환모드

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

가장 최근의 CSS 규격을 따른다. 단, frame을 사용할 수 없다.

HTML 4.01 엄격모드

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

1999년 12월 24일 확정 규격. 권장하지 않는 element, attribute, frame 사용불가
element 배치가 엄격하여 가장 이상적인 문서 작성시 사용.


XHTML 1.0 호환모드

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1999년 12월 24일 확정 규격. frameset 사용 가능.
넷츠케이프, 파이어폭스에서 frame이 작동하지 않음.


XHTML 1.0 엄격모드

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
EUC-KR<=>UTF-8 상호변환 하기

<?
# UTF 로 무조건 변환
function change_to_utf($utfStr) {
  if (iconv("UTF-8","UTF-8",$utfStr) == $utfStr) {
    return $utfStr;
  }
  else {
    return iconv("EUC-KR","UTF-8",$utfStr);
  }
}

# UTF => EUC-KR로 변환
function iconv_to_euc_kr($get_data) {
  $work_unit = 50;

  $init_size = strlen($get_data);

  $result_data = "";

  $count = 0;

  for ( $i = 0 ; $i < $init_size ; $i++ ) {
    $cur_char = substr($get_data,$i,1);

    $t = ord($cur_char);
    if ( $t == 9 || $t == 10 || (32 <= $t && $t <= 126) ) {
      $tn = 1;
    }
    else if ( 194 <= $t && $t <= 223 ) {
      $tn = 2;
    }
    else if ( 224 <= $t && $t < 239 ) {
      $tn = 3;
    }
    else if ( 240 <= $t && $t <= 247 ) {
      $tn = 4;
    }
    else if ( 248 <= $t && $t <= 251 ) {
      $tn = 5;
    }
    else if ( $t == 252 || $t == 253 ) {
      $tn = 6;
    }
    else {
      $tn = 1;
    }

    if ( $work_unit < $tn ) {
      break;
    }

    if ( $count + $tn > $work_unit ) {
      $temp_data = iconv("utf-8","euc-kr",$work_string);
      $result_data .= $temp_data;

      $work_string = "";
      $i--;
      $count = 0;
    }
    else {
      for ( $j = 0 ; $j < $tn ; $j++ ) {
        $work_string .= $cur_char;
        $i++;
        $count++;
        $cur_char = substr($get_data,$i,1);
      }
      $i--;
    }
  }

  if ( $work_string ) {
    $temp_data = iconv("utf-8","euc-kr",$work_string);
    $result_data .= $temp_data;
  }

  return $result_data;
}

# ex.

# 수신된 메일로부터 폼값을 받을때 수신된 메일의 charset이 euc-kr이 아닌 UTF8로 오는 경우,

# 일단 무조건 UTF8로 변환한 후 EUC-KR로 재변환하여 처리해야만 한글이 깨지지 않고

# 정상적으로 표출됩니다.

# Usage.
# $fromName = change_to_utf($fromName);
# $fromName = iconv_to_euc_kr($fromName);

?>


/**
* UTF-8=>한글 코드페이지[949]로 변환  AJAX에서 유니코드 문자 오류
*/
function utf8_euckr(&$item, $key, $prefix = ''){
    if(is_array($item)) array_walk($item, 'utf8_euckr');
    else $item=iconv('UTF-8', 'CP949',$item);
}
/**
* 한글 코드페이지[949] => UTF-8로 변환  AJAX에서 유니코드 문자 오류
*/
function euckr_utf8(&$item, $key, $prefix = ''){
    if(is_array($item)) array_walk($item, 'euckr_utf8');
    else $item=iconv('CP949', 'UTF-8',$item);
}
/**
* 입력값
*/
@array_walk($_POST, 'utf8_euckr');

/**
* 결과값 변환
*/
@array_walk($Result, 'euckr_utf8');

 

<?php
// $document should contain an HTML document.
// This will remove HTML tags, javascript-x sections
// and white space. It will also convert some
// common HTML entities to their text equivalent.

$search = array ('@<script-x[^>]*?>.*?</script-x>@si', // Strip out javascript-x
'@<[\/\!]*?[^<>]*?>@si', // Strip out HTML tags
'@([\r\n])[\s]+@', // Strip out white space
'@&(quot|#34);@i', // Replace HTML entities
'@&(amp|#38);@i',
'@&(lt|#60);@i',
'@&(gt|#62);@i',
'@&(nbsp|#160);@i',
'@&(iexcl|#161);@i',
'@&(cent|#162);@i',
'@&(pound|#163);@i',
'@&(copy|#169);@i',
'@&#(\d+);@e'); // evaluate as php

$replace = array ('',
'',
'\1',
'"',
'&',
'<',
'>',
' ',
chr(161),
chr(162),
chr(163),
chr(169),
'chr(\1)');

$text = preg_replace($search, $replace, $document);



strip_tags(get_the_content($document));


?>


1    <?php 
2   // $document should contain an HTML document. 
3   // This will remove HTML tags, javascript-x sections 
4   // and white space. It will also convert some 
5   // common HTML entities to their text equivalent. 
6   $search = array ("'<script-x[^>]*?>.*?</script-x>'si",  // Strip out javascript-x 
7                    "'<[/!]*?[^<>]*?>'si",          // Strip out HTML tags 
8                    "'([rn])[s]+'",                // Strip out white space 
9                    "'&(quot|#34);'i",                // Replace HTML entities 
10                    "'&(amp|#38);'i", 
11                    "'&(lt|#60);'i", 
12                    "'&(gt|#62);'i", 
13                    "'&(nbsp|#160);'i", 
14                    "'&(iexcl|#161);'i", 
15                    "'&(cent|#162);'i", 
16                    "'&(pound|#163);'i", 
17                    "'&(copy|#169);'i", 
18                    "'&#(d+);'e");                    // evaluate as php 
19   $replace = array ("", 
20                    "", 
21                    "\1", 
22                    """, 
23                    "&", 
24                    "<", 
25                    ">", 
26                    " ", 
27                    chr(161), 
28                    chr(162), 
29                    chr(163), 
30                    chr(169), 
31                    "chr(xxx1)"); // remove the "xxx" - this is just for showing the source 
32   $text = preg_replace($search, $replace, $document); 
33   ?>


+ Recent posts