'웹_TIP'에 해당되는 글 11건

  1. 2007/02/27 레이어 팝업 띄우기
  2. 2007/02/26 티스토리 시작부터 2차도메인 및 Google Apps설정까지 (3)
  3. 2007/01/25 문서
  4. 2007/01/19 명품 프리젠테이션
  5. 2007/01/17 전체화면소스(항상 같은좌표로 위치하게)
  6. 2007/01/15 onfocus='blur();' 를 한번에
  7. 2007/01/15 드래그금지,마우스오른쪽금지
  8. 2007/01/15 전체화면(풀스크린)으로 창 열기
  9. 2007/01/15 테이블, 이미지 테두리관련 스타일
  10. 2007/01/15 한줄짜리 웹소스
2007/02/27 15:09

레이어 팝업 띄우기

2007/02/27 15:09 in 웹_TIP
layer_popup.zip
팝업창이나 alert창을 띄우면 확인 버튼이나 창 닫기 버튼을 눌러야하는 번거로움도 있고 그래서 조금 색다른 느낌의 팝업을 만들어봤습니다. allblog.net이나 여러 곳에서 사용하고 있는 방법의 레이어팝업입니다.
레이어팝업 데모보기

-- new_win.js
/**************************************************************************
  레이어 팝업 모듈            - 07. 2. 13  by Hamt -
  모든 페이지에 인클루드 되는 파일에 이 소스를 추가한다.
  <!-- new popup start -->
  <div id="dialogbackgroundlayer" style="display:none;position:absolute;z-index:11;" onclick="win.dialog_close()">
  </div>
  <div id="dialoglayer" style="display:none;position:absolute;z-index:12;">
  </div>
  <div id=message style="display:none;position:absolute;left:0px;top:0px;padding:3px;background:#cc0000;color:#ffffff;font-size:13px;font-weight:bold;z-index:100;"></div>
  <script>
  var win = new new_popup();
  </script>
  <!-- new popup end -->
/***************************************************************************/
var popup_req = false;//for popup ajax
var popup_script = false;//dialog_open 네번째 인자로, 레이어 팝업창을 띄운 직후 실행할 스크립트 값
var in_alertcount = 0;
function new_popup()
{
    this.agent_name = navigator.userAgent.toLowerCase();
    this.is_ie = ((this.agent_name.indexOf("msie") != -1) && (this.agent_name.indexOf("opera") == -1));
    this.is_gecko = navigator.product;
    this.position_x = 0;
    this.position_y = 0;

    this.dlg_bg = document.getElementById('dialogbackgroundlayer');
    this.dlg = document.getElementById('dialoglayer');
    this.msg = document.getElementById('message');
    this.dlg_bg.style.left = '0px';
    this.dlg_bg.style.top = '0px';
    this.dlg_bg.style.width = '100%';
    this.dlg_bg.style.background = "#000";
    this.dlg_bg.style.opacity = (50/100);
    this.dlg_bg.style.MozOpacity = (50/100);
    this.dlg_bg.style.KhtmlOpacity = (50/100);
    this.dlg_bg.style.filter = 'alpha(opacity=50)';
    this.dialog_open= function(url, w_width, w_height, run_script)
    {
        var height = document.body.clientHeight;
        if(!w_height) w_height = 170;
        if (this.is_gecko) height += 10;
        this.dlg_bg.style.height = height + 'px';
        this.dlg_bg.style.display = '';
        this.dlg.style.left = "50%";
        this.dlg.style.top = w_height + "px";
        this.dlg.style.marginLeft = w_width/2*-1+"px";
        if (run_script)
            popup_script = run_script;
        else
            popup_script = false;
        this.load(url);
        this.dlg.style.display = '';
    }
    this.dialog_close= function()
    {
        this.dlg_bg.style.display = 'none';
        this.dlg.style.display = 'none';
    }
    this.in_alert = function(message)
    {
        this.msg.innerHTML = message;
        this.msg.style.display = '';
        window.setTimeout(this.in_alert_hidden, 2000);
        in_alertcount++;
    }
    this.in_alert_hidden = function()
    {
        in_alertcount--;
        if(!in_alertcount)
            document.getElementById('message').style.display = 'none';
    }
    this.load = function(url) {
        popup_req= false;
        // branch for native XMLHttpRequest object
        if (window.XMLHttpRequest) {
            try {
                popup_req = new XMLHttpRequest();
            }
            catch(e) {
                popup_req = false;
            }
        }
        // branch for IE/Windows ActiveX version
        else if (window.ActiveXObject) {
            try {
                popup_req = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e) {
                try {
                    this.req= new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(e) {
                    popup_req  = false;
                }
            }
        }
        if (popup_req ) {
            popup_req.onreadystatechange = this.processPopup;
            popup_req.open("GET", url, true);
            popup_req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
            popup_req.send("");
        }
    }
    this.processPopup = function() {
        // only if req shows "loaded"
        var obj = document.getElementById('dialoglayer');
        if (popup_req.readyState == 4) {
            // only if "OK"
            obj.innerHTML = popup_req.responseText;
            if (popup_script)
                eval(popup_script);
        }
    }
}

주석의 내용대로 div 세개와 객체 생성 스크립트를 적당한 곳에 둡니다.
그리고 푸터 파일쯤? 암튼 적당한 곳에서 이 객체를 생성합니다.
압축해서 올린 파일에는 var win = new new_popup(); 으로 win이란 객체를 만들었구요

사용하실 함수들은
win.dialog_open('팝업 중앙에 보여질 php or html or etc 파일','<-- 이 파일의 폭', '높이(빈칸으로 두면 170px 디폴드), '팝업 띄우고 포커스를 준다든가 하는 스크립트(빈칸이면 스크립트 실행 안함)');
win.dialog_close(); 창 닫기
win.in_alert('알림 메세지'); 화면 좌측 상단에 2초간 보여질 내용입니다.
닉네임을 빼먹었으니 입력하라던가 하는 상황에 써먹으면 좋겠다 싶어서 만들었구요
이 세 함수가 다입니다.
open에서 보내진 파일을 Ajax에서 출력물을 받아다가 가운데 창 레이어의 innerHTML로 넣어주도록 동작하고 있습니다.

그런데 innerHTML에 스크립트를 넣는 경우 실행이 안되는것 같네요
그래서 저는 인클루드 되는 js파일에 레이어 안에서 필요한 함수들을 모아놓고 사용하고 있습니다.
레이어 내부에 포커스를 준다든가 하는 간단한 스크립트는 네번째 인자에 주면 동작하게 했구요

출처: phpschool.com

이올린에 북마크하기(0) 이올린에 추천하기(0)
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹_TIP' 카테고리의 다른 글

레이어 팝업 띄우기  (0) 2007/02/27
티스토리 시작부터 2차도메인 및 Google Apps설정까지  (3) 2007/02/26
문서  (0) 2007/01/25
명품 프리젠테이션  (0) 2007/01/19
전체화면소스(항상 같은좌표로 위치하게)  (0) 2007/01/17
onfocus='blur();' 를 한번에  (0) 2007/01/15
Posted by 감정은행
Tag allblog, div, HTML, 레이어, 레이어팝업, 스크립트, 인클루드, 팝업
Trackback 0 Comment 0
2007/02/26 11:02

티스토리 시작부터 2차도메인 및 Google Apps설정까지

2007/02/26 11:02 in 웹_TIP
 
네이버 블로그, 태터툴즈(Tattertools), 워드프레스(WordPress), 무버블타입(Movable Type), 이글루스(Egloos) 등 여러 블로그에서 삽질만하며 떠돌다가 정착한 티스토리(Tistory)에 대한 애정으로 이 포스트를 씁니다.

물론, 개인적인 블로깅 성향에 따라 각자 좋아하는 블로깅 툴과 서비스가 있고 각 블로그 서비스마다 장단점이 있습니다. 개인적으로 저와 가장 잘 맞는다고 생각하는 서비스이기에 추천하는 의미로 티스토리에 관심이 있는 분들과 시작하려는 분들에게 기초적인 정보를 드리고자 합니다.

특히 포털의 가입형 블로그 서비스를 이용하다가 옮기려고 하는 분, 티스토리 관련한 각각의 설정방법을 일일이 검색하며 찾아다니기 귀찮으신 분들과 왕초보님들을 위하여...



1. 티스토리(Tistory) 소개
티스토리는 국산 설치형 블로그인 태터툴즈(Tattertools)를 설치 없이 웹에서 손쉽게 블로깅 할 수 있도록 해주는 서비스형 블로그이다.
Daum과 태터툴즈 개발사인 태터앤컴퍼니가 손잡고 개발한 블로그 서비스로 현재 베타 서비스 단계이다.
이미 많은 사용자를 확보하고 있는 태터툴즈에 의한 블로그 서비스라는 점과 Daum과의 제휴, 2차 도메인 연결, 무제한 동영상 업로드 서비스, 초대장에 의한 계정 배포 등으로 많은 화제를 모으고 있다.

티스토리와 도메인, Google Apps for Your Domain 설정만 하면, 호스팅을 받아 서비스하는 개인 홈페이지 못지않은 블로그를 무료로 사용 가능하다.

2. 티스토리 특징
설치형 블로그의 개인화된 통계정보와 자유도를 원하고 있지만, 복잡하고 어렵다는 생각을 하고 있던 일반 사용자도 거의 설치형 블로그와 같은 기능을 웹에서 손쉽게 이용 가능
  • 무료 서비스(일단 공짜면 좋다)
  • 무제한 블로그 용량, 트래픽 부담 NO, 동영상 업로드
  • 이미지 갤러리, 플레쉬 갤러리, MP3 업로드&플레이어, 동영상 등 멀티미디어 포스팅 지원
  • 2차 블로그 주소 서비스에 의해 자기 도메인으로 블로그 운용 가능(xxx.tistory.com → 자기도메인)
  • 스킨 편집가능: 기본 스킨 제공, 사용자에 의한 다양한 스킨 소스, 코드 삽입으로 가능한 Adsense, Analytics 등 타 서비스와 연계한 이용 가능
  • 통계 서비스: 카운터는 기본, 리퍼러 통계(어디서 내 블로그에 들어왔는지 확인 가능)
  • 플러그인 서비스: 제공하는 여러 가지 플러그인을 ON/OFF 설정에 따라 다양한 추가 기능
  • 데이터 백업/복원: 간단하게 블로그 백업 및 복원 지원(첨부파일 포함 가능)
  • 필터링: IP, 홈페이지, 본문, 이름 별로 필터링 지원
  • 블로그 주소 변경 가능: 제한 없이 주소 변경 가능하며, 즉시 반영
  • 댓글 알리미: 다른 티스토리 블로그에 내가 남긴 댓글 및 반응 확인 가능

3. 티스토리 시작 및 사용방법
티스토리는 이메일로 초대장을 받아야만 이용할 수 있다. 초대장이 있는 티스토리 사용자를 찾아 초대장을 신청해서 받아야 한다.
초대장은 티스토리 측에서 특정 시점에 1) 기존 초대장을 모두 사용한 사용자 2) 발급일 기준, 10일 이내에 공개 글이나 댓글을 쓴 사용자에게 5장씩 일괄동시 발급하고 있다.1

초대장을 얻는 방법

Tistory.com에 초대장 나누는 게시판이 있으면, 구하려는 사람들이 고생을 좀 덜 텐데 아쉽다. 발품 팔고 헤매야 귀하게 생각하려나?

초대장을 받으면 Tistory 블로그 시작방법을(http://manual.tistory.com/677)을 읽어 본다. 그리고 Tistory 블로그 메뉴얼(http://manual.tistory.com/)을 참고. 굳이 메뉴얼을 보지 않아도, 보면 대충 감이 올 정도로 쉬움.

사용방법 및 환경설정 등은 메뉴얼에 나와있고, 특별한 추가 설명이 필요없는 부분이므로 위의 링크로 대신하고 생략한다.

4. 티스토리 2차 블로그 주소 설정
추가 2006.9.17
새롭게 티스토리를 사용하시는 분들은 상관없지만, 기존 테터툴즈 사용자가 티스토리로 이동하려고 하시는 분들은 늑돌이님의 '티스토리 독립도메인 사용시의 문제점'과 티스토리 업데이트 소식을 확인하시고 이동하시길 권합니다.

4-1. 도메인 구입
일단 자신이 원하는 도메인을 구입하여야 한다. 이 블로그의 도메인은 b416.net이다.
도메인을 구입할 수 있는 등록기관은 아주 많아서 검색창에 '도메인' 치면 후이즈, 가비아, 아이네임즈, 닷네임코리아 등 많이 나온다. 그중에 한 곳을 선택하여 회원가입하고, 도메인 검색하고 등록가능 여부를 확인하여 결제하면 된다.

그런데 등록기관마다 같은 도메인이라도 가격이 다를 수 있다. 가격 비교해서 구입해야 싸게 살 수 있을 것이다.

개인적으로는 호스트웨이를 추천한다. 일단 싸다!!! 2006년 9월은 국제도메인 이벤트 기간이라서 정상가 6,000원에 반값인 3,000원에 세금까지 3,300원에 구입했다. (도메인만 구입하도록 한다!!!)

4-2. 도메인 네임서버 변경
  • 도메인을 구입 등록한 사이트 방문, 로그인
  • 자신의 도메인 관리 페이지 이동
  • 네임서버(Name Servers) 관리 페이지 이동

자신의 네임서버 관리 페이지에서 DNSever 네임서버 주소로 변경. 바로 뒤에 설명하는 'DNSever를 이용한 호스트 IP(A) 설정'으로 하실 분들만 DNSever의 네임서버로 변경.




4-3. DNSever를 이용한 호스트 아이피(A) 설정
DNSever를 이용한 방법 외에 luv4us님은 'ZoneEdit을 이용한 티스토리 독립도메인 설정' 방법을 설명하시기도 했다. 여기서는 많은 분이 이용하는 방법이며, 한글 서비스이고, 직접 해본 서비스인 DNSever를 이용한 설정방법을 설명한다.

먼저, 윈도우에 시작→모든 프로그램→보조프로그램→명령 프롬프트 실행하여 아래처럼 자신의 티스토리 IP를 확인하고 적어둔다.
  • DNSever(http://www.dnsever.co.kr) 회원가입
  • 왼쪽 메뉴 중 '도메인 추가' 클릭 후 자신의 도메인 추가
  • 왼쪽 메뉴에서 자신의 도메인을 선택
  • 호스트 IP(A) 관리 클릭

호스트 이름은 비워두고, IP주소란에 위에서 확인한 자신의 티스토리 IP 입력.

이렇게 하여 'IP 주소(A) 추가' 버튼을 누르고 확인해 보면, 아래와 같다.
이렇게 호스트 IP(A)관리에서 자신의 도메인과 티스토리 IP를 연결하면, DNSever에서의 설정은 일단은 끝. (뒤에 Google Apps for Your Domain 서비스를 이용하려면 다시 이곳에서 설정할 것이 있음)

4-4. 티스토리 2차 블로그 주소 변경

네임서버 변경 정보가 반영되는데 시간이 걸린다. 이 글 작성을 위해 참고한 Rukxer님의 포스트 이곳은 '티스토리', '티스토리'입니다. 에서는 일반적으로 20~30분 정도 걸린다고 한다.
적용 전에 티스토리 환경설정에서 2차 블로그 주소를 바꾸면, 찾을 수 없는 페이지라는 익숙한 페이지를 보게 된다. 따라서 네임서버 변경 후 20~30분 정도가 지난 후에 2차 블로그 주소 변경.
저 같은 경우 위의 설명한 순서대로 네임서버 먼저 변경하고, 호스트 IP(A) 설정을 하며 버벅거면서 시간을 보내고 2차 블로그 주소 변경했더니 바로 적용되는 것 같은 체감효과^^

여기까지 하면 xxx.tistory.com과 같은 주소 대신에 간단한 자기 도메인으로 블로그 서비스를 이용할 수 있게 된다.

5. 독립도메인 이메일 사용을 위한 Google Apps for Your Domain 설정 방법
Google Apps for Your Domain을 설정하면 독립도메인 이메일과, Google Talk, Google Calendar, Google Page Creator를 이용할 수 있다. 여기서는 독립도메인 이메일 사용을 위한 방법만을 설명하겠다.
Google Apps for Your Domain 서비스를 이용하면 자기 도메인 이메일을 사용할 수 있다. 예를 들면 ID@naver.com 같은 메일이 아닌 ID@자기도메인.com 같은 메일을 사용 할 수 있다는 것이다. 그 뿐만 아니라 자기도메인으로 된 각각 2G짜리 이메일 계정을 25개까지 만들 수 있다.

설정방법은 http://www.google.com/a 접속하면 아래와 같은 페이지가 뜬다.
(1/9) PREVIOUS ZOOM NEXT

DNSever와 관련된 다른 설명은 앞서 설명한 4-3. DNSever를 이용한 호스트 아이피(A) 설정 참조.

위의 과정이 끝나면 Google Apps for Your Domain은 http://www.google.com/a/자기도메인.com, 설정한 독립도메인 지메일은 http://mail.google.com/a/자기도메인.com 으로 접속해서 이용 가능하다. 자주 사용할 메일 접속 주소가 길고 복잡한데, DNSever에서 웹 포워딩 설정을 해주면 http://mail.자기도메인.com으로 쉽게 접속 가능하다.

http://mail.자기도메인.com 로그인한 화면이다. 지메일과 똑같다. 도메인만 달리 쓴다고 생각하면 될 것 같다.


Google Apps for Your Domain의 다른 서비스를 이용하기 위해서는 또 다른 설정이 필요한데, 그것은 생략하겠다. 여기까지 따라오셨으면 다른 것도 대충 어떻게 해야 하는지 아실 것 같다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

이미 다른 분들이 더 전문적으로 잘 정리해 놓으셨지만, 왕초보님들을 위하여 또 검색하기 귀찮아하시는 님들을 위하여 나름대로 정리해봤습니다.
내용 중 틀린 부분이나 보강 설명이 필요한 부분은 댓글이나 트랙백 부탁드립니다.


참조한 혹은 도움되는 포스트 리스트

작성자 분들에게 감사 드립니다. 위의 링크 리스트외에도 너무 많은 분들의 글을 참고해서, 일일이 링크 달거나 트랙백 보내지 못한 점 죄송하게 생각합니다. 특히 luv4us님 블로그에 Google Apps와 도메인 이메일등에 관한 유용한 정보에서 많은 도움 받았습니다.

관련 참고 사이트 리스트

  1. 2006년 9월 11일 3번째 발급이 있었음 [본문으로]

출처: http://b416.net/35

이올린에 북마크하기(0) 이올린에 추천하기(0)
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹_TIP' 카테고리의 다른 글

레이어 팝업 띄우기  (0) 2007/02/27
티스토리 시작부터 2차도메인 및 Google Apps설정까지  (3) 2007/02/26
문서  (0) 2007/01/25
명품 프리젠테이션  (0) 2007/01/19
전체화면소스(항상 같은좌표로 위치하게)  (0) 2007/01/17
onfocus='blur();' 를 한번에  (0) 2007/01/15
Posted by 감정은행
Tag 2차블로그주소, dnsever, 개인도메인, 독립도메인, 블로그, 티스토리
Trackback 0 Comment 3
2007/01/25 14:17

문서

2007/01/25 14:17 in 웹_TIP
웹사이트 개발시에 필요한 문서 목록입니다.
해당 문서목록의 의견,문제점,궁금하신 점은 Q&A게시판에 올려주십시요.
공유를 원하는 유용한 웹개발문서를 받고 있습니다. 많이 많이 여기로 보내주세요.(다양한 업종의 스토리보드와 제안서 강추)

Q : 파일 다운로드시 한글파일의 경우 다운로드 되지 않거나 글자가 깨집니다.
A : 익스플로러 "도구 > 인터넷 옵션 > 고급 "에서 고급 UTF8옵션 해제하시면 됩니다.

* 버전 : v2.0
* 최종수정일자 : 2005.07.08 10:30:22

이올린에 북마크하기(0) 이올린에 추천하기(0)
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹_TIP' 카테고리의 다른 글

레이어 팝업 띄우기  (0) 2007/02/27
티스토리 시작부터 2차도메인 및 Google Apps설정까지  (3) 2007/02/26
문서  (0) 2007/01/25
명품 프리젠테이션  (0) 2007/01/19
전체화면소스(항상 같은좌표로 위치하게)  (0) 2007/01/17
onfocus='blur();' 를 한번에  (0) 2007/01/15
Posted by 감정은행
Trackback 0 Comment 0
2007/01/19 15:21

명품 프리젠테이션

2007/01/19 15:21 in 웹_TIP
'special event'

 "나의 프레젠테이션은 3막으로 구성된 명작 오페라"

 http://www.apple.com/quicktime/qtv/specialeventoct05/

 

 스티브 잡스를 프레젠테이션의 달인으로 만들어 준 행사의 동영상입니다.


  2005년 10월 12일 미국 캘리포니아주 산호세 캘리포니아 극장에서

 데스크 톱 pc 아이맥, 휴대용 미디어 플레이어 아이팟, 동영상을 유료로 즐기는 아이튠스의 새 버전을 발표하는

 'special event'의 기조연설입니다.


 오프닝서부터 클로징까지 29개의 챕터로 구성되어 있습니다.

 동영상을 보려면 '퀵타임 7 플레이어'가 설치되어야 하며, 애플 사이트에서 무료로 다운로드 받을 수 있습니다.


 참고로 빌 게이츠의 연설도 한번 보세요. ^^

 http://www.microsoft.com/events/executives/billgates.mspx

이올린에 북마크하기(0) 이올린에 추천하기(0)
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹_TIP' 카테고리의 다른 글

티스토리 시작부터 2차도메인 및 Google Apps설정까지  (3) 2007/02/26
문서  (0) 2007/01/25
명품 프리젠테이션  (0) 2007/01/19
전체화면소스(항상 같은좌표로 위치하게)  (0) 2007/01/17
onfocus='blur();' 를 한번에  (0) 2007/01/15
드래그금지,마우스오른쪽금지  (0) 2007/01/15
Posted by 감정은행
Tag PT, special event, 다운로드, 빌게이츠, 스티브잡스, 애플, 퀵타임, 프리젠테이션
Trackback 0 Comment 0
2007/01/17 14:40

전체화면소스(항상 같은좌표로 위치하게)

2007/01/17 14:40 in 웹_TIP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>THEDOFL SHOWCASE</title>
<script language="JavaScript" type="text/JavaScript">
<!--
window.resizeTo(window.screen.availWidth,window.screen.availHeight);
 window.moveTo(0,0);
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body bgcolor="#dedcd1" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--url's used in the movie-->
<!--text used in the movie-->
</body>
</html>

창사이즈가 작거나 커도 모니터 해상도에 맞게 맞추어줌 좌표로 이동

이올린에 북마크하기(0) 이올린에 추천하기(0)
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹_TIP' 카테고리의 다른 글

문서  (0) 2007/01/25
명품 프리젠테이션  (0) 2007/01/19
전체화면소스(항상 같은좌표로 위치하게)  (0) 2007/01/17
onfocus='blur();' 를 한번에  (0) 2007/01/15
드래그금지,마우스오른쪽금지  (0) 2007/01/15
전체화면(풀스크린)으로 창 열기  (0) 2007/01/15
Posted by 감정은행
Tag 소스, 전체화면
Trackback 0 Comment 0
2007/01/15 17:35

onfocus='blur();' 를 한번에

2007/01/15 17:35 in 웹_TIP

<body>


<script language="JavaScript">

function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.onfocusin=bluring;
</script>



</body>

이올린에 북마크하기(